next.js 的渲染模式
一些渲染模式的介绍
客户端渲染（CSR Client Side Rendering）
CSR， 客户端渲染。
直接使用JavaScript在浏览器中渲染页面。所有逻辑，数据获取，模板和路由均在客户端而不是服务器上处理。
优点：灵活，真正的前后端分离，方便于前后台各自更新维护。
缺点：增加了HTTP请求的次数，减缓了页面加载速度，容易白屏，SEO不友好
服务端渲染 (SSR Server Side Rendering)
SSR， 服务端渲染。
服务端将动态数据处理后插入到 HTML 中之后再返回给客户端，服务器呈现响应于导航为服务器上的页面生成完整的HTML。这样可以避免在客户端进行数据获取和模板化的其他往返过程，因为它是在浏览器获得响应之前进行处理的。
优点：对 SEO友好，减少了HTTP请求的次数，加速了页面初次渲染的速度，避免出现白屏时间过长
缺点：不灵活，前后端耦合太深。需要一个服务器承载页面的实时请求、渲染和响应，增大服务端开发和运维的成本。对于静态场景，比如博客、官网等，内容相对确定，变化不频繁，无疑浪费了很多没必要的服务器资源。
静态站点生成 (SSG Static Site Generation)
SSG：静态网站生成。
静态网站生成类似于服务器端渲染，不同之处在于它是在构建时渲染页面而不是在请求时渲染页面。
与服务器渲染不同，由于不必动态生成页面的HTML，因此它还可以实现始终如一的快速到第一字节的时间。通常，静态呈现意味着提前为每个URL生成单独的HTML文件。借助预先生成的HTML响应，可以将静态渲染器部署到多个CDN，以利用边缘缓存的优势。
缺点：仅仅适合于页面内容较为静态的场景。
优点：生产环境中就能直接生成完整页面，不会有白屏的问题，对 SEO 友好
next.js 预渲染
next.js 页面的预渲染
next.js 官网对于预渲染的一个说明
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)
默认情况下，Next.js 将 预渲染 每个 page（页面）。这意味着 Next.js 会预先为每个页面生成 HTML 文件，而不是由客户端 JavaScript 来完成。预渲染可以带来更好的性能和 SEO 效果。
每个生成的 HTML 文件都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载一个 page（页面）时，其 JavaScript 代码将运行并使页面完全具有交互性。（此过程称为 hydration。）
next.js 两种形式的预渲染
Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.
- Static Generation (Recommended): The HTML is generated at build time and will be reused on each request.
- Server-side Rendering: The HTML is generated on each request.
Next.js 具有两种形式的预渲染： 静态生成（Static Generation） 和 服务器端渲染（Server-side Rendering）。这两种方式的不同之处在于为 page（页面）生成 HTML 页面的 时机 。
next.js 混合渲染模式
next.js 还支持渲染模式的混合使用。
Importantly, Next.js lets you choose which pre-rendering form you’d like to use for each page. You can create a “hybrid” Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.
You can also use Client-side Rendering along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by client side JavaScript. To learn more, take a look at the Data Fetching documentation.
Next.js 允许为每个页面 选择 预渲染的方式。可以创建一个 “混合渲染” 的 Next.js 应用程序：对大多数页面使用“静态生成”，同时对其它页面使用“服务器端渲染”。
出于性能考虑，相对服务器端渲染，next.js 更 推荐 使用 静态生成 。 CDN 可以在没有额外配置的情况下缓存静态生成的页面以提高性能。但是，在某些情况下，服务器端渲染可能是唯一的选择。
SSR + CSR
-
首次加载页面走 SSR：保证首屏加载速度的同时，并且满足 SEO 的诉求。
-
页面切换走 CSR：Next.js 会发起一次网络请求，执行 getServerSideProps 函数，拿到它返回的数据后，进行页面渲染。
二者的有机结合，大大减少后端服务器的压力和成本的同时，也能提高页面切换的速度，进一步提升用户的体验。除了 Next.js，还有其他的框架也使用 SSR + CSR 方案，比如 ice.js 等。
SSG + CSR
对于某些静态网站或者实时性要求较低的网站来说，是没有必要使用 SSR 的。
-
静态内容走 SSG：对于页面中较为静态的内容，比如导航栏、布局等，可以在编译构建时预先渲染静态 HTML
-
动态内容走 CSR：一般会在 useEffect 中请求接口获取动态数据，然后进行页面重新渲染
虽然从体验来说，动态内容需要页面重新渲染后才能出现，体验上没有 SSR 好，但是避免 SSR 带来的高额服务器成本的同时，也能保证首屏渲染时间不会太长，相比纯 CSR 来说，还是提升了用户体验。
SSG + SSR
-
静态内容走 SSG：编译构建时把相对静态的页面预先渲染生成 HTML，浏览器请求时直接返回静态 HTML
-
动态内容走 SSR：浏览器请求未预先渲染的页面，在运行时通过 SSR 渲染生成页面，然后返回到浏览器，并缓存静态 HTML，下次命中缓存时直接返回
动态内容可以直接直出，进一步提升了首次访问页面时的体验；相比于 SSR + CSR 来说，减少没必要的静态页面渲染，节省了一部分后端服务器成本。