在 SvelteKit 中设置 SSG 和预渲染

Question

我刚刚开始使用 SvelteKit 并阅读了文档。我想在我的应用程序中使用 SSG 并预渲染每个页面。我按照文档所述配置了我的应用程序，但似乎没有任何效果如所描述的那样。

我想要实现的目标：

1.SSG （预渲染）

在构建时将静态内容（例如<h1>， ）生成为 HTML。<p>不要用 JS 来滋润客户端页面。我想尽可能避免这种情况，它会增加加载时间，一些用户禁用了 JS 并且对 SEO 不友好。我实在看不出你为什么要这么做有什么好处。只有当数据发生变化时，用 JS 生成数据才有用，对吗？我也看不出“无水合作用”和“预渲染”之间有什么区别。

2. 禁用SSR

不要在服务器上运行代码并呈现页面或请求。那么我可以假设 localStorage 等可用。

3. 不使用node服务器打开app

这并不是那么重要，但如果应用程序只需在本地浏览器中打开 index.html 文件即可运行，那就太好了。那时它可以与 Github Pages 一起使用。在构建了一个用纯 Svelte 编写的应用程序后，你可以怎么做。

4. 仅限 SvelteKit

如果只配置 SvelteKit 就足够了，那就太好了。无需任何外部库或不同 Svelte 框架的帮助。

我尝试过的

这是github上的一个例子。第一个目录中是一个可重现的示例，其中生成了构建版本。第二个大致是我期望构建给我的输出，这是我手动编写的。

我启动了新的 SvelteKit 项目并通过npm i -D @sveltejs/adapter-static@next. 然后我设置svelte.config.js文件：

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: adapter(),
        ssr: false,
        hydrate: false,
        prerender: {
            crawl: true,
            enabled: true,
        }
    }
};

export default config;

由于我全局关闭了 ssr，我认为使用 localStorage 是安全的。所以我在导入的外部脚本（store.js）中使用了它。但是在构建时我收到此错误消息：

我还注意到它说“构建 SSR 捆绑包”，我想知道为什么......

当我查看构建时，每个元素仍然用 JS 渲染，仅在浏览器中打开它是行不通的。

我想说的就是这些，感谢您的阅读和帮助！

Edit1：有点弄清楚第一部分。
水合仅呈现必要的内容。所以其他的可以预渲染成 HTML。客户端路由器是JS渲染的主要原因。所以我启用了水合并禁用了路由器。但是启动应用程序时什么也不会显示。所以我必须启用 ssr （即使我不想）。
变化是这样的svelte.config.js：

ssr: true,
hydrate: true,
router: false

现在内容已按我想要的方式生成，但 ssr 已启用。

Answer 1

根据您的屏幕截图，我假设您在“module”脚本标记中的 SvelteKit 加载函数中使用了“localStorage”，该函数不起作用，因为在构建期间您无权访问浏览器相关的 API。

所以你应该将这部分代码移到客户端。

另请参阅： https: //kit.svelte.dev/docs#loading