渲染
默认情况下,Next.js 会预渲染每个页面。这意味着 Next.js 会预先为每个页面生成 HTML,而不是由客户端 JavaScript 完成所有操作。预渲染可以提高性能和 SEO。
每个生成的 HTML 都与该页面所需的最小 JavaScript 代码相关联。当浏览器加载页面时,其 JavaScript 代码会运行并使页面完全交互(此过程称为 React 中的水合)。
预渲染
Next.js 有两种预渲染形式:静态生成和服务器端渲染。区别在于它何时为页面生成 HTML。
- 静态生成:HTML 在构建时生成,并在每次请求中重复使用。
- 服务器端渲染:HTML 在每次请求时生成。
重要的是,Next.js 允许您为每个页面选择要使用的预渲染形式。您可以通过对大多数页面使用静态生成,而对其他页面使用服务器端渲染来创建一个“混合”Next.js 应用。
出于性能方面的考虑,我们建议使用静态生成而不是服务器端渲染。静态生成的页面可以由 CDN 缓存,无需任何额外的配置即可提高性能。但是,在某些情况下,服务器端渲染可能是唯一的选择。
您还可以将客户端数据获取与静态生成或服务器端渲染一起使用。这意味着页面的某些部分可以完全由客户端 JavaScript 渲染。要了解更多信息,请查看数据获取文档。
服务器端渲染 (SSR)
使用服务器端渲染在每次请求时渲染页面。
静态站点生成 (SSG)
使用静态站点生成 (SSG) 在构建时预渲染页面。
自动静态优化
Next.js 会尽可能自动优化您的应用以成为静态 HTML。在此了解其工作原理。
客户端渲染 (CSR)
了解如何在页面路由器中实现客户端渲染。
边缘和 Node.js 运行时
了解有关 Next.js 中可切换运行时(边缘和 Node.js)的更多信息。
这有帮助吗?