Two froms of Pre-rendering of Next.js

Next.js有兩種預(yù)渲染形式：靜態(tài)生成(Static Generation)和服務(wù)端渲染(Server-side Rendering)。 不同之處在于他們?yōu)轫撁嫔蒆TML代碼的時(shí)間。

• 靜態(tài)生成是一種在build階段生成html的預(yù)渲染方式。預(yù)渲染的HTML的代碼會(huì)被每個(gè)request復(fù)用
• 而服務(wù)端渲染是每次請求都生產(chǎn)新HTML

我們在 Next.js 中可以選擇任意一種預(yù)渲染方式，亦或是混合使用——大多數(shù)時(shí)候用靜態(tài)生成，其他用服務(wù)端渲染。

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

那我們該如何選擇這兩種渲染方式呢？
任何時(shí)候都推薦使用靜態(tài)生成(with & without data) ，因?yàn)槲覀兊捻撁嬷恍枰猙uild一次并使用CDN，這樣就比使用server-render每個(gè)request都要渲染頁面快得多。

你應(yīng)該問問你自己：“我能在用戶請求前預(yù)渲染這個(gè)頁面嗎？”
如果答案是“可以”，那就使用靜態(tài)生成(static generation)吧

相反，如果你不能在用戶請求前預(yù)渲染這個(gè)頁面，比如這個(gè)頁面需要頻繁的更新數(shù)據(jù)，而且頁面內(nèi)容每次都會(huì)隨request變化，那這個(gè)時(shí)候我們就應(yīng)該使用服務(wù)端渲染(Server-Side Rendering)，這樣會(huì)慢一些，但是預(yù)渲染的頁面可以實(shí)時(shí)更新。
或者你可以跳過預(yù)渲染，使用客戶端的Javascript來填充數(shù)據(jù)。