SEO 百科

Svelte 与 SvelteKit

本页目录

Svelte 与 SvelteKit

Svelte 与 SvelteKit 是同一套技术，Svelte 负责把组件编译成 JavaScript，SvelteKit 在它之上提供路由、数据拉取和服务端渲染[1][2]。两者通常一起出现，用它做内容站，初始 HTML 里往往带着正文；要留意的是页面级的渲染开关，配错一项就会影响抓取。

两者的分工

SvelteKit 官方把两者分得很清楚：Svelte 用来写界面组件，例如导航栏、评论区、表单；SvelteKit 帮开发者把组件组成应用[1]。

Svelte 的做法和其他框架不同。它把组件编译成可以直接运行的 JavaScript，编译器直接输出操作页面的代码，不把整套框架打进产物[1]。官方说明，编译器把组件转成用来渲染 HTML 的 JavaScript，以及给页面加样式的 CSS[1]。

SvelteKit 官方拿它和别的框架对标：从 React 过来的人会觉得它像 Next.js，从 Vue 过来的人会觉得它像 Nuxt[1]。

默认渲染方式

SvelteKit 默认先在服务端渲染组件，把 HTML 发给客户端；随后浏览器再渲染一遍，把事件绑定上去，这一步叫激活[2]。官方的原话是：“默认情况下，SvelteKit 会先在服务端渲染组件，再把 HTML 发给客户端”[2]。

所以这类站点的初始 HTML 里通常带着正文，抓取工具一次请求就能读到。这一点和 Nuxt 默认一致。

页面级的渲染开关

SvelteKit 把渲染方式做成开关，可以按页面设置[2]。

  • prerender 打开后，页面在构建阶段生成静态 HTML。
  • ssr 关掉后，页面变成只有框架的空白页，内容全部由浏览器生成。
  • csr 关掉后，页面不再给浏览器发 JavaScript，只用 HTML 和 CSS。

一个内容页的预设可以写成：

export const prerender = true

官方提示，两个开关都关掉时，页面什么都渲染不出来[2]。

抓取与收录

Google 处理 JavaScript 网页分三个阶段：抓取、呈现、编入索引[3]。默认开着服务端渲染的 SvelteKit 页面，第一阶段就拿到了正文。

要留意预渲染的条件。官方说，页面能被预渲染，前提是两个用户直接访问时，从服务器拿到的内容一样[2]。需要区分用户的页面不能预渲染，否则会把一个人的内容发给所有人。

还有一条和网址有关。默认行为是把网址末尾的斜杠去掉，/about/ 会重定向到 /about。官方提醒，不加斜杠和加斜杠会被当成两个网址，对 SEO 有害，所以这个行为最好不要改成忽略[2]。

使用的代价

  • 编译步骤不能省。Svelte 的产物要经过编译，项目要跑在 Node.js 环境里。
  • 首屏仍要等脚本。默认模式下，交互要等 JavaScript 加载执行之后才能用。
  • 出错时页面空白。服务端渲染报错，用户拿到的可能是没有正文的页面。
  • 生态比 React 和 Vue 小。组件库和现成方案没那么多，遇到问题可参考的资料也少。

常见误用

一个误用是把 ssr 关掉来绕开报错。关掉之后页面在服务端什么都没有，抓取工具看到的是一片空白。

另一个误用是给需要登录的页面开预渲染。构建阶段拿不到用户数据，生成出来的内容对所有人一样。

还有一种是把 csr 关掉，却又留着依赖脚本的交互。这类交互需要 JavaScript，关掉 csr 之后就会失效。

附录

参见

参考资料

官方（境外）

  1. 《Introduction》，SvelteKit 官方文档。
  2. 《Page options》，SvelteKit 官方文档。
  3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-04 更新。

外部链接

无。