代码之家 › 专栏 › 技术社区 › kooru_hi

通用加载函数如何在服务器端加载不可序列化的数据

sveltekit server-side-rendering svelte

kooru_hi · 技术社区 · 2 年前

在通用加载函数的svelte工具包教程中,给出了以下示例+page.server.js文件,该文件会导致内部服务器错误,因为服务器端加载只适用于可序列化的数据,而组件是不可序列化的:

import component from './blue.svelte';

export function load() {
    return {
        color: 'blue',
        component
    };
}

当文件名更改为+page.js时,它就可以工作了。我不明白的是:由于svelte工具包默认为访问的第一个页面提供服务器端渲染,如果这是访问的第一页,这个加载函数不应该导致错误吗?我自己测试了一下,看起来效果不错。我不明白为什么。

1 回复 | 直到 2 年前

brunnerh 2 年前

如果在使用通用负载时没有禁用SSR,则存在SSR,但与服务器负载的不同之处在于,数据从不跨越客户端/服务器边界,因此不需要序列化。

该组件及其加载功能是为客户端和服务器构建的。在服务器上,构建了SSR版本,该版本也在服务器上进行了全面评估;则不将数据发送到客户端。

然后在客户端上评估页面时,调用通用负载 再一次 在水合过程中,这一次它执行客户端代码,该代码导入组件的非SSR版本。(当从其他地方导航到此页面时,还会加载并执行此代码。)

我有点惊讶地发现,这现在正在发挥作用,因为在少数小版本之前,情况并非如此。我在更改日志中找不到任何对此的引用,所以也许不应该依赖此功能。始终可以返回与特定组件相对应的键,并将其导入 +page.svelte 相反

推荐文章

TheDomis4 · nextjs:链接元素导致水合错误

1 年前

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

Kim · 带SSR的Angular 18:将优化设置为true会忽略脚本中加载的库

1 年前

Marya · 为什么我的API使用fetch发送电子邮件会产生未定义的响应,但仍然成功发送电子邮件

2 年前

Rafael · 为什么next.js中的picture元素不能使用隐藏属性?

2 年前

Dayvson Spacca · 如何使用nextjs中的服务器端组件从url获取params-id?

2 年前

Hamza Manan · 文本内容与使用i18n进行翻译的服务器呈现HTML不匹配

2 年前

Amir Abaris · Angular检测到“HttpClient”未配置为使用“fetch”API。(角17-SSR)

2 年前

kooru_hi · 通用加载函数如何在服务器端加载不可序列化的数据

2 年前

Tibo · 如何在Next JS中的_app文件中获取会话数据?

2 年前