渲染模式差异和选择

传统服务端渲染

在过去传统开发中，页面渲染任务是由服务端完成的，服务器负责获取数据，拼装页面，客户端仅负责内容显示，使用这种方式的典型技术有 JSP、PHP、ASP.NET 等等。

客户端渲染 CSR

Vue.js、React 这类框架之所以能解决前面提到的问题，主要是因为采用了前后端分离的开发模式，这种方式的特点是页面是由客户端渲染的，应用在客户端首次获取的是空 HTML 文档，浏览器下载并运行 JS，获取数据之后再创建页面，也就是大家熟悉的单页面应用 - SPA。

客户端渲染适合那些不需要 SEO 或者用户访问频率不高的强交互应用，例如：SaaS 系统、后台管理系统、在线文档等。

服务端渲染 SSR

前面提到 SPA 的 SEO 问题和首屏加载速度问题，有什么好办法可以解决它们呢？其实传统的服务端渲染就行。但是这样一来岂不是开历史倒车，兜兜转转又回去了？

SSR 方式非常灵活，几乎可以适配大多数需求，尤其是一些基于内容的网站：博客，电商，官网等等。

静态站点生成 SSG

直接生成站点静态文件的方式：

SSG 仅适合内容创建之后不经常变化的网站，例如：个人博客、网站、宣传页等。

端侧渲染

过去，SSR 只能运行在 Node.js 环境，但是 Next 提供了端侧渲染 - Edge Render，这种方式能够在 CDN edge worker 环境下直接执行渲染，这样 Next 应用能够运行在离用户更近的环境中，从而降低延迟和服务器花销。

实时游戏，交易系统等实时性要求高的应用可以尝试Edge渲染模式。

Next中的内容渲染

Next中页面渲染非常灵活，可以理解为混合渲染模式。因为跟layout或page使用方式不同实际上会产生独立渲染方式，大面上分为：

• 静态渲染：创建时即渲染了页面结果，可理解为SSG
  • 缓存数据 + 无动态函数 cached + no dynamic function
• 动态渲染：每次请求在服务器动态渲染结果，此方式有两种实现：
  • 动态函数 dynamic function
  • 动态数据获取 dynamic data fetching

动态函数

默认情况下会认为是静态函数，但会根据请求时的参数情况决定是否是动态函数：

• 在服务端组件中使用cookies()或headers()
• 在客户端组件中使用useSearchParams()
• 使用searchParams 页面属性

动态数据获取

通过设置fetch()请求的cache选项为no-store或revalidate为0