用wordpress制作軟件seo關(guān)鍵詞排名教程
最近學(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é),希望能幫到你,加油💪🏻