最近學(xué)習(xí)了Next.js 14框架，總結(jié)一下預(yù)渲染技術(shù)和具體代碼用法，如果有理解不對(duì)的地方還請(qǐng)大佬指正。

注意以下內(nèi)容只討論App Router的新方案（getStaticProps已經(jīng)棄用）。

1.簡(jiǎn)介

預(yù)渲染主要分為2種技術(shù)，靜態(tài)頁(yè)面渲染(SSG)和服務(wù)器端渲染(SSR）

預(yù)渲染簡(jiǎn)單說(shuō)就在瀏覽器訪問(wèn)網(wǎng)頁(yè)頁(yè)面時(shí)，由服務(wù)器返回完整的html文件，而不是部分?jǐn)?shù)據(jù)。
?

2.靜態(tài)頁(yè)面渲染（SSG）

使用場(chǎng)景：頁(yè)面內(nèi)容基本不怎么變動(dòng)，又考慮SEO優(yōu)化和首次頁(yè)面加載速度快。

優(yōu)點(diǎn)：SEO優(yōu)化，首頁(yè)加載速度快，服務(wù)端和客戶(hù)端壓力都小。

缺點(diǎn)：內(nèi)容更新不及時(shí)。

實(shí)現(xiàn)：在編譯項(xiàng)目的時(shí)候就把js動(dòng)態(tài)頁(yè)面編譯成html靜態(tài)頁(yè)面，客戶(hù)端訪問(wèn)時(shí)，服務(wù)器直接返回完整html文件，有點(diǎn)返璞歸真的意味。

主要情況有以下4種情況：

1.以下是一個(gè)頁(yè)面（Page.js）的內(nèi)容，在一個(gè)頁(yè)面中沒(méi)有任何動(dòng)態(tài)操作時(shí)，會(huì)被默認(rèn)編譯成靜態(tài)頁(yè)面html。

export default function MyPage(){return <main><h1>我的首頁(yè)!</h1></main>
}

2.以下是一個(gè)頁(yè)面（Page.js）的內(nèi)容，在頁(yè)面中上來(lái)就執(zhí)行fetch操作時(shí)，會(huì)被默認(rèn)編譯成靜態(tài)頁(yè)面。在編譯時(shí)會(huì)直接去拉取https://jsonplaceholder.typicode.com/users的信息生成html。

export default async function MyPage(){const response = await fetch('https://jsonplaceholder.typicode.com/users')const data = await response.json()//以下不必關(guān)心，主要看上面return(<>...此處省略</>)
}

3.動(dòng)態(tài)路由

在動(dòng)態(tài)路由中，希望生成靜態(tài)頁(yè)面,添加getStaticPaths函數(shù)，然后指定id，對(duì)應(yīng)的id的頁(yè)面就在編譯時(shí)生成靜態(tài)頁(yè)面。

export default async function Post({ params }) {const id = params.postIdconst response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)//在服務(wù)器端獲取數(shù)據(jù)const data = await response.json()//以下不必關(guān)心，主要看上面return (...此處省略)
}export async function getStaticPaths(){return {paths: [{params:{postId: '1'}},{params:{postId: '2'}},{params:{postId: '3'}}],fallback: false}
}

其中fallback為false，表示訪問(wèn)除了指定的1,2,3的postId之外的其他頁(yè)面全報(bào)404找不到。

其中fallback為true，表示訪問(wèn)除了指定的1,2,3的postId之外，在客戶(hù)端第一次訪問(wèn)改頁(yè)面時(shí)，會(huì)先返回一個(gè)加載過(guò)渡頁(yè)面，服務(wù)器會(huì)去嘗試靜態(tài)生成html，然后在返回html給客戶(hù)端。

其中fallback為block，表示訪問(wèn)除了指定的1,2,3的postId之外，在客戶(hù)端第一次訪問(wèn)改頁(yè)面時(shí)，會(huì)卡住等待，服務(wù)器會(huì)去嘗試靜態(tài)生成html，然后在返回html給客戶(hù)端。

4.增量靜態(tài)生成 ISR（Buff疊加）

如果頁(yè)面的內(nèi)容是會(huì)更新的，純純的靜態(tài)頁(yè)面就無(wú)法滿(mǎn)足了，那么可以使用ISR技術(shù)。

說(shuō)人話(huà)就是，我雖然是靜態(tài)頁(yè)面，但是我只保持給定時(shí)間（如5秒鐘），超過(guò)5秒鐘后，如果有客戶(hù)端來(lái)訪問(wèn)，服務(wù)器就重新去fetch數(shù)據(jù)，重新生成一次html再返回給客戶(hù)端。

export const revalidate = 5 //5s后如果有請(qǐng)求，則重新生成該頁(yè)面export default async function MyPage(){const response = await fetch('https://jsonplaceholder.typicode.com/users')const data = await response.json()//以下是data的使用，不必關(guān)心，主要看上面return(<>...此處省略</>)
}

如上，只需要把revalidate設(shè)定并export出去，就可以使用ISR技術(shù)了，是不是很簡(jiǎn)單。

3.服務(wù)端頁(yè)面渲染（SSR）

使用場(chǎng)景：頁(yè)面內(nèi)容經(jīng)常變動(dòng)，又考慮SEO優(yōu)化和頁(yè)面加載速度快。

優(yōu)點(diǎn)：SEO優(yōu)化，首次加載速度快，客戶(hù)端壓力小。

缺點(diǎn)：服務(wù)端壓力變大。

實(shí)現(xiàn)：服務(wù)端渲染就是客戶(hù)端每次頁(yè)面訪問(wèn)時(shí)，服務(wù)器都會(huì)重新fetch拉取數(shù)據(jù)，并重新生成html，再返回給客戶(hù)端。

使用方法如下。

export default async function MyPage(){const response = await fetch('https://jsonplaceholder.typicode.com/users',{ cache: 'no-store'})const data = await response.json()//以下不必關(guān)心，主要看上面return(<>...此處省略</>)
}

只需要在fetch后面加入{ cache: 'no-store'}就可以開(kāi)啟了，是不是很簡(jiǎn)單。

4.客戶(hù)端頁(yè)面渲染（CSR）

使用場(chǎng)景：用戶(hù)動(dòng)態(tài)交互很多的頁(yè)面，也不需要SEO。

優(yōu)點(diǎn)：動(dòng)態(tài)交互，服務(wù)器壓力小。

缺點(diǎn)：首次加載速度慢，頁(yè)面內(nèi)容不是純html，不利于SEO。

實(shí)現(xiàn)：這種就是傳統(tǒng)的react的方式，利用useEffect去拉取數(shù)據(jù)，注意一定要標(biāo)明"use client"，不是nextjs的方式了，但是也可以在nextjs中使用。

"use client"//默認(rèn)next.js為"use server"，所有使用CSR時(shí)必須添加該標(biāo)識(shí)import { useState,useEffect } from "react";//客戶(hù)端獲取數(shù)據(jù)的方法
function MyPage(){const [data, setData] = useState(null)useEffect(()=>{async function  fetchMyData() {const response = await fetch('https://jsonplaceholder.typicode.com/users')const data = await response.json()setData(data)}fetchMyData()},[])//以下不必關(guān)心，主要看上面return (...此處省略）
}export default MyPage

總結(jié)

在實(shí)際開(kāi)發(fā)一個(gè)網(wǎng)站時(shí)，可能需要將以上幾種方案混合在一起，發(fā)揮各自的特長(zhǎng)，而且這些都可以在Next.js中做到，是不是很強(qiáng)大？哈哈，以上是我的學(xué)習(xí)總結(jié)，希望能幫到你，加油💪🏻