渲染策略
静态站点生成 (SSG)
静态站点生成 是指在构建时生成 HTML,随后每个请求都会使用该 HTML。静态站点生成可能是最适合 SEO 的渲染策略,不仅因为 预渲染 机制会在页面加载时提供完整的 HTML,还能提升页面性能——而性能如今也是 SEO 的排名因素之一。
服务端渲染 (SSR)
与服务端渲染 (SSR) 类似,服务端渲染 也是预渲染的,因此同样有利于 SEO。不同于 SSG 在构建时生成 HTML,SSR 会在请求时生成 HTML。这对于高度动态的页面非常适用。
增量静态再生 (ISR)
如果页面数量庞大,在构建时生成所有页面可能不太现实。Next.js 允许您在构建站点后创建或更新静态页面。
增量静态再生 让开发者和内容编辑可以逐页使用静态生成功能,而无需重新构建整个站点。通过 ISR,您可以在扩展到数百万页面的同时,保留静态生成的优势。
客户端渲染 (CSR)
客户端渲染 允许开发者完全通过浏览器中的 JavaScript 渲染网站。初始页面加载时通常只会提供一个几乎不含内容的 HTML 文件,直到获取 JavaScript 并由浏览器编译所有内容。
如前所述,通常不建议将客户端渲染用于优化 SEO。
CSR 非常适合数据密集的仪表盘、账户页面或任何不需要被搜索引擎索引的页面。
总结
对 SEO 而言最重要的是,页面数据和元数据无需 JavaScript 即可在页面加载时可用。在这种情况下,SSG 或 SSR 是最佳选择。
Next.js 的一大优势在于,上述每种渲染方法都可以按页面单独配置。您可以让博客文章静态生成,客户账户仪表盘使用客户端渲染,而新闻动态则采用服务端渲染。
延伸阅读
- Next.js: 数据获取
- Smashing Magazine: Next.js 增量静态再生完全指南
- Vercel: Next.js:服务端渲染 vs. 静态生成