Next.js 中的渲染策略

大家好，好久不见！大家还好吗？

最近，我一直在深入研究 Next.js 15，温习一些基本概念并探索一个新的最喜欢的主题：渲染策略。这适合任何对 SSR（服务器端渲染）及其在 Next.js 中的所有同级策略感到好奇的人。无论您是刚刚开始还是需要复习，请将此视为您有关渲染策略的首选备忘录！

Next.js 中的 SSR（服务器端渲染）与 CSR（客户端渲染）

SSR 的工作原理

在 SSR 中，Next.js 在每次请求时在服务器上预渲染页面。如果您曾经在 Next 中的功能组件顶部添加了获取请求，然后点击刷新来更新数据，那么您已经在使用 SSR。

最新更新的一个游戏规则改变者是 serverComponentsHmrCache 功能。这允许我们在开发模式下跨 HMR（热模块替换）刷新来缓存服务器组件中的获取响应。因此，每次刷新都会变得更快、更便宜、更高效的体验，尤其是在涉及收费 API 调用时。

SSR 的好处：

1. 缩短了初始加载时间：比 CSR 更快，尤其是对于首次访问者。
2. SEO 友好：搜索引擎喜欢 SSR，因为内容在抓取时就已经准备好了。
3. 减少 FCP（首次内容绘制）：为用户提供更快的感知加载体验。
4. 直接数据库调用：通过 SSR，数据获取逻辑可以保留在服务器端，从而无需构建 API 端点即可直接进行数据库调用。
5. 自动请求重复数据删除：一项鲜为人知的福利 - 当多次请求相同的数据时，仅发送一个请求。
6. 增强的安全性：将敏感数据保留在服务器端，永远不会在客户端暴露 API 密钥。
7. 减少网络瀑布：SSR 并行获取数据，避免顺序延迟。
8. JS 可选：如果浏览器禁用了 JavaScript，用户仍然可以访问内容。

CSR（客户端渲染）

在 CSR 中，您首先声明一个空状态并在 useEffect 中执行获取请求。数据到达后，您可以更新状态和 UI。

权衡：

1. 首先是空页面：在加载数据之前，用户会看到一个空壳，这可能会影响用户体验和 SEO。
2. 完全控制状态：非常适合用户操作触发更新的交互式页面。

渲染策略概述

让我们回顾一下这些渲染方法，重点介绍您选择其中一种的时间和原因。

SSG（静态站点生成）

SSG 在构建时生成 HTML，可以通过 CDN 快速提供服务。但是，它不适合内容经常更新的网站。这也是 Next.js 的默认渲染策略。

ISR（增量静态再生）

ISR 是 SSG 灵活的兄弟。即使在初始构建之后，它也允许更新内容，非常适合偶尔更改但不需要实时数据的网站。只需添加 export const revalidate = ;按页面进行配置，或使用 revalidatePath 和 revalidateTag 进行更有针对性的重新验证。

SSR（服务器端渲染）

SSR 针对每个用户请求在服务器上呈现页面，这意味着内容始终是新鲜的。它非常适合高度动态的内容，但它可能比 SSG 慢，因为页面是按需生成的。 SSR 在最新内容很重要但客户端交互性并不重要的场景中表现出色。

PPR（渐进式页面渲染）

PPR 引入了一种混合方法。它在组件级别而不是页面级别上运行，使其独一无二。静态 SSR shell 最初提供服务，而动态内容则作为封装在 Suspense 中的组件异步加载。这使您可以在同一页面上混合搭配 SSR 和 CSR，立即提供静态 shell，并逐渐用交互式内容填充它。

结论

这就是总结！根据应用程序的要求，每种渲染策略都具有独特的优势。尝试、实验并找到最适合您的用例的方法！
快乐编码！

制作人员：基于 JS Mastery 资源并结合 AI 格式完成

以上是Next.js 中的渲染策略的详细内容。更多信息请关注PHP中文网其他相关文章！