Sveltejs Academy · 课时

用于仅客户端页面的 ssr = false

对依赖浏览器专用 API 的页面禁用服务器端渲染

第 3 / 4 课13 个步骤

用于仅客户端页面的 ssr = false 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。

禁用 SSR

设置 ssr = false,跳过依赖浏览器专用 API 的页面的服务器渲染。

export const ssr = false;

使用场景

使用画布、WebGL、地理定位,或任何必须在浏览器中运行的页面。

权衡

跳过 SSR 意味着首次内容绘制更慢,并且该页面的 SEO 更差。

与预渲染结合

您可以禁用 SSR,同时仍然为静态托管预渲染一个外壳 HTML。

加载指示器

由于页面仅在客户端运行,请显示加载状态,直到 JS 完成水合。

需要身份验证的路由

有时,仅需身份验证的路由会跳过 SSR,以避免在客户端检查令牌之前进行渲染。

按页面设置

按路由设置 ssr,以平衡 SEO 与交互需求。

布局级别

在布局中设置它,即可为整个区域禁用 SSR。

无服务器代码

没有 SSR 时,服务器加载仍会运行,但页面只会在浏览器中渲染。

性能注意事项

沉重的纯客户端页面可以通过预渲染骨架屏并使用数据完成水合来获益。

实际应用

仪表板、复杂编辑器和三维体验有时会关闭 SSR。

快速检查

什么时候应设置 ssr = false?

回顾

对于需要浏览器专用 API 的页面,请设置 ssr = false,以更简单的纯客户端渲染换取 SEO 表现。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
41
课程
163

常见问题解答

「用于仅客户端页面的 ssr = false」课时是免费的吗?

是的 — 「用于仅客户端页面的 ssr = false」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Sveltejs Academy 课程的其余内容,请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「用于仅客户端页面的 ssr = false」这节课中我会学到什么?

对依赖浏览器专用 API 的页面禁用服务器端渲染 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「用于仅客户端页面的 ssr = false」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗?

能。每节 Sveltejs Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 通用 load 与仅服务器端 load
  2. 用于静态页面的 prerender = true
  3. 用于仅客户端页面的 ssr = false
  4. 岛屿架构
← 返回 Sveltejs Academy