Next.js中的两种预渲染机制区别

Static Generation 对比 Server-side rendering(翻译自Next.js 文档)

---

前言

Next.js 内置了预渲染(pre-rendering)概念，默认开启，预渲染有两种形式

• Static Generation
• Server-side rendering

Next.js 应用程序能混合使用以上两种方式来渲染目标，根据你的需要可以配置每一个页面是在构建(build)的时候还是在服务端完成渲染。

Next.js 预渲染的原理是在构建时或者是根据需要在其它时间生成 html 文件，生成的文件已经被优化(经过压缩等操作)了。

Static Generation

常用于以下场景：

• 静态电商页面
• 静态博客页面
• 数据展示(Dashboards)

常被称为:

• Static Site Generation (SSG)
• Static Generation
• Static Website

页面在运行next build命令之后被渲染为静态的 html 文件，next build命令会输出.html静态文件，该文件在服务器中始终不会发生任何变化。

考虑到默认情况下，Next.js 在每一次渲染之间有不变的部分，所以 Next.js 会预渲染一些不需要阻塞数据(blocking data)的页面。

在构建时预渲染有一个好处是：静态的 HTML 文件可以自动通过 CND 进行加速(需要你的运营商支持)。

// 该页面没有阻塞的数据
// 所以它在构建时将会生成HTML文件

const HomePage = 
Welcome to Next.js!
;

export default HomePage;

Server-Side Rendering

常用于以下场景：

• 频繁更新的数据
• 由 CMS 管理的页面

常被称为：

• Server-Side Rendering
• Dynamic rendering
• On-demand render

当接收到一个请求的时候，页面按需求进行渲染，这意味着用户总是获得最新的页面数据。一般在有阻塞数据的页面会选用这种模式。

数据总是保持最新，但是用户在获得到 HTML 页面的时候会花费稍多的时间。此外，必须运行 Node.js 运行时,且要根据负载进行扩展。

/**
 * 该页面定义了`getInitialProps`函数来获取数据
 * Next.js会执行`getInitialProps`
 * 然后等待结果的返回
 * 当获取得结果之后，页面会被渲染
 * 在每次请求进入的时候，Next.js都会重复上面的操作
 */

const HomePage = ({ stars }) => 
Next stars: {stars}
;

HomePage.getInitialProps = async ({ req }) => {
  const res = await fetch("https://api.github.com/repos/zeit/next.js");
  const json = await res.json();
  return { stars: json.stargazers_count };
};

export default HomePage;

总结

Next.js 提供了静态化的两种不同实现形式，其中 Static Generation 是在构建过程中就生成了静态的 html 文件，而 SSR 则是在服务器动态生成，消耗更多的资源也会花费更多的时间，在需要实时数据时候使用 SSR。