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来填充数据。