next渲染方式

next可以根据每个页面的情况选择最合适的渲染方式，无论是静态站点生成、服务器端渲染还是客户端渲染
实现了同时支持服务端渲染和客户端渲染。开发者可以在同一个应用中采用两种渲染方式的组合

它支持三种渲染方式包括

客户端渲染 CSR (Client Side Rendering)
静态站点生成器 SSG (Static Site Generation)
服务端渲染 SSR (Server Side Render)

预渲染

服务端渲染和静态站点渲染都属于“预渲染（Pre-Rendering）”。预渲染就是指在服务端完成外部数据获取以及 React 组件到 HTML 的代码转换，然后将结果网页发送到客户端。

SSG静态站点生成

在Next中，可以通过在页面中以命名导getStaticProps函数的方式启用静态站点渲染。Next会在构建阶段（即执行 next build 指令时）调用getStaticProps函数，并使用函数内部返回的数据生成静态HTML

HTML在构建阶段时生成

SSR服务端渲染

服务器端渲染发生在客户端每次请求后端服务时，页面HTML是在这个时候在服务端生成，在返回客户端

在 Next.js 中，你可以通过在页面中以命名导出getServerSideProps函数的方式启用服务器端渲染。Next将会在每次客户端请求时调用getServerSideProps函数，并用函数内部返回的数据返回组件
getServerSideProps 用于在服务器上获取数据并将 props 转发到文件中默认导出的 React 组件
在每次页面请求时，重新生成HTML

js
export async function getServerSideProps() {
  const res = await fetch(`https://...`)
  const projects = await res.json()
 
  return { props: { projects } }
}
 
export default function Dashboard({ projects }) {
  return (
    <ul>
      {projects.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  )
}

CSR客户端渲染

NextJS 的页面和组件默认是服务端渲染，只有使用了use client指令的页面或组件，它和它的子组件都将是客户端渲染

混合渲染模式

可以同时使用SSG和SSR，或者SSG和CSR，根据页面需求选择合适的渲染方式

使用getServerSideProps，就是开启SSR
使用getStaticProps，就是开启SSG
也可以同时使用，说明当前页混合了两种渲染方式

SSG + SSR

静态内容走 SSG：编译构建时把静态的页面预渲染生成HTML，浏览器请求时直接返回静态HTML
动态内容走 SSR：浏览器请求未预先渲染的页面，在运行时通过 SSR 渲染生成页面，然后返回到浏览器，并缓存静态HTML，下次命中缓存时直接返回

SSR + CSR

使用CSR时，页面切换无需刷新，无需重新请求整个 HTML 的内容

首次加载页面走SSR：保证首屏加载速度的同时，并且满足 SEO 的诉求
页面切换走CSR：Next会发起一次网络请求，执行getServerSideProps函数，拿到它返回的数据后，进行页面渲染

SSG + CSR

对于某些静态网站或者实时性要求较低的网站来说，是没有必要使用SSR的

静态内容走SSG：对于页面中较为静态的内容，比如导航栏、布局等，可以在编译构建时预先渲染静态HTML
动态内容走CSR：比如一般会在useEffect中请求接口获取动态数据，然后进行页面重新渲染

预渲染​

SSG静态站点生成​

SSR服务端渲染​

CSR客户端渲染​

混合渲染模式​

SSG + SSR​

SSR + CSR​

SSG + CSR​

预渲染