时间戳

首页 > 解决方案 > 在 SvelteKit 中设置 SSG 和 Prerender

svelte - 在 SvelteKit 中设置 SSG 和 Prerender

问题描述

我刚开始使用 SvelteKit 并阅读了文档。我想在我的应用程序中使用 SSG 并预渲染每个页面。我按照文档中的说明配置了我的应用程序，但似乎没有像描述的那样工作。

我想要达到的目标：

1.SSG （预渲染）

在构建时将静态内容（例如<h1>, <p>）生成到 HTML 中。不要在客户端使用 JS 水合页面。我想尽可能避免这种情况，它增加了加载时间，一些用户禁用了 JS，而且它对 SEO 不友好。我真的看不出你为什么要这样做有什么好处。用 JS 生成数据只有在数据变化的时候才有用，对吧？我也看不出“不补水”和“预渲染”之间有什么区别。

2.禁用SSR

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

3.不使用节点服务器打开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）中使用了它。但是在构建时我收到了这个错误信息： 构建时 SvelteKit 错误

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

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

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

Edit1：有点想通第一部分。
Hydration 仅呈现必要的内容。所以其他的可以预渲染成 HTML。客户端路由器是使用 JS 进行渲染的主要原因。所以我启用了水合作用并禁用了路由器。但是当启动应用程序时，什么都不会出现。所以我不得不启用ssr（即使我不想）。
这是如何svelte.config.js改变的：

ssr: true,
hydrate: true,
router: false

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

标签： sveltesveltekitstatic-site-generation

解决方案

根据您的屏幕截图，我假设您在“模块”脚本标签中的 SvelteKit 加载功能中使用了“localStorage”，但该功能不起作用，因为在构建时您无法访问与浏览器相关的 API。

因此，您应该将这部分代码移动到客户端。

另见：https ://kit.svelte.dev/docs#loading

推荐阅读