SvelteKit ​

SvelteKit 是 Svelte 官方推出的开发框架，它包含了 Svelte SSR 方案。

和前文提到的其他 SSR 框架不同的是，SvelteKit 专注于前端，以适配器的方式接入到各式各样的应用中。它的服务端是适配器以 express 中间件的形式提供的。

Demo ​

通过以下代码创建的Demo 仓库，并设置适配器为node

npm create svelte@latest my-app

作为没有运行时依赖的 Svelte 应用，它的 SSR 应用在生产环境构建后，客户端JS竟然也达到了 44KB。

到底是什么原因让每个SSR框架都有不小的客户端JS代码？

client JS ​

SvelteKit 的客户端代码，在开发模式下查看，内容很简单

const element = document.currentScript.parentElement;

const data = [null,null];

Promise.all([
    import("/node_modules/@sveltejs/kit/src/runtime/client/start.js"),
    import("/@fs/Users/luoway/git/github/demo-ssr-frameworks/.svelte-kit/generated/client/app.js")
]).then(([kit, app]) => {
    kit.start(app, element, {
        node_ids: [0, 2],
        data,
        form: null,
        error: null
    });
})

start.js ​

start.js是初始化代码，也是除用户代码外的客户端JS的最大部分。

代码内容只有一个start()函数，执行以下内容

1. 创建方法对象client{}，包含_hydrate()、_start_router()等
2. 创建单例存储上面的方法对象，以及页面状态stores
3. 执行_hydrate() 加载 node_ids 指定的组件代码，再将root组件挂载到element指定的节点上
4. 执行_start_router()
   代理页面上的可能触发导航的事件click、submit、popstate，以支持SPA内的跳转; 手动管理页面的滚动位置history.scrollRestoration = 'manual'

app.js ​

app.js是包含Svelte应用容器 root、error、layout，以及页面代码 page 的索引文件。

它导出root，按需加载其他组件。

小结 ​

SvelteKit 产出的是 SSR + SPA 应用。

其中，SSR可以通过配置降为SSG、CSR，但SPA不可配置，除非禁用CSR以去掉。

参考资料 ​

• Node servers