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 = <div>Welcome to Next.js!</div>;
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 }) => <div>Next stars: {stars}</div>;
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。
