SvelteKit：禁用 SSR

Question

我在 Svelte 中制作了一个应用程序，现在我想将其移植到 SvelteKit。我的应用程序使用window和document对象，但这些在 SSR 中不可用。首先，它抛出了ReferenceError: window is not defined，但我通过检查应用程序是否在浏览器中运行来解决这个问题。但正因为如此，我的应用程序无法运行。

Answer 1

由于 SvelteKit 的更改，之前的答案不再有效。有关更多信息，请参阅 PR： https: //github.com/sveltejs/kit/pull/6197以及文档：https://kit.svelte.dev/docs/page-options

基本上现在你在每个页面/布局级别上禁用SSR，所以而不是在 src/hooks.server.js 中（是的，hooks.js 也被分成客户端作为服务器，并添加了客户端钩子。）

export function handle({ event, resolve }) {
  return resolve(event, { 
    ssr: false
  });

你现在做

// src/routes/+layout.js
export const ssr = false;

确保将上面的行放入+layout.js而不是+layout.svelte

Answer 2

您可以从钩子中禁用服务器端渲染handle，定义如下src/hooks.js：

\n

export async function handle({ event, resolve }) {\n    return resolve(event, { ssr: false });\n}\n

\n

甚至可以有条件地做到这一点，通常是根据event请求检查并做出决定。

\n\n

如果您的用例要求一切都在客户端发生，那么禁用 SSR 是有意义的。但请注意，由于某些仅限浏览器的代码，不建议严格禁用它 \xe2\x80\x94 在这种情况下，通常最好通过browser检查和动态导入仅客户端依赖项来有条件地执行代码。在跳转到禁用 SSR 之前，我会探讨一下您的应用程序停止工作的原因。

\n