Next.js预渲染的两种形式——静态生成和服务端渲染

Two froms of Pre-rendering of Next.js

Next.js有两种预渲染形式：静态生成(Static Generation)和服务端渲染(Server-side Rendering)。 不同之处在于他们为页面生成HTML代码的时间。

• 静态生成是一种在build阶段生成html的预渲染方式。预渲染的HTML的代码会被每个request复用
• 而服务端渲染是每次请求都生产新HTML

我们在 Next.js 中可以选择任意一种预渲染方式，亦或是混合使用——大多数时候用静态生成，其他用服务端渲染。

When to Use Static Generation v.s. Server-side Rendering

那我们该如何选择这两种渲染方式呢？
任何时候都推荐使用静态生成(with & without data) ，因为我们的页面只需要build一次并使用CDN，这样就比使用server-render每个request都要渲染页面快得多。

你应该问问你自己：“我能在用户请求前预渲染这个页面吗？”
如果答案是“可以”，那就使用静态生成(static generation)吧

相反，如果你不能在用户请求前预渲染这个页面，比如这个页面需要频繁的更新数据，而且页面内容每次都会随request变化，那这个时候我们就应该使用服务端渲染(Server-Side Rendering)，这样会慢一些，但是预渲染的页面可以实时更新。
或者你可以跳过预渲染，使用客户端的Javascript来填充数据。