首頁(yè) 猿問 Next.js：getStatic...

Next.js：getStaticProps 不更新生產(chǎn)中的獲取值

JavaScript

月關(guān)寶盒 2022-10-27 10:47:46

我基本上是在 Next.js 上開發(fā)一個(gè)博客。因?yàn)樗秦?fù)責(zé)后端的另一個(gè)團(tuán)隊(duì)，所以我目前正在從 getStaticProps 獲取 API 調(diào)用以獲取我的文章，即使直接進(jìn)行數(shù)據(jù)庫(kù)查詢是更好的做法：export async function getStaticProps({ params, res }) { try { const result = await fetch(`${API.baseURL}/get_article/${params.id}`); const article = await result.json(); return { props: { article }, }; } catch (error) { res.statusCode = 404; return { props: {} }; }}雖然這在開發(fā)模式下完美運(yùn)行，但獲取文章、編輯它，然后再次訪問它在生產(chǎn)中不起作用（即使在本地，使用構(gòu)建版本）。我想這與 Next.js 以某種方式處理緩存有關(guān)......我做錯(cuò)了什么？謝謝！

查看完整描述

3 回答

慕容森

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個(gè)贊

首先，函數(shù)的參數(shù)，getStaticProps即context對(duì)象沒有任何名為的屬性res。所以res.statusCode = 404;這里什么也不做。

并且getStaticProps意味著用于靜態(tài)站點(diǎn)生成，另外對(duì)于動(dòng)態(tài)路由，您可以導(dǎo)出另一個(gè)函數(shù)getStaticPaths，該函數(shù)應(yīng)該生成并返回具有動(dòng)態(tài)路由參數(shù)的路徑數(shù)組，getStaticProps將在構(gòu)建時(shí)調(diào)用這些路徑參數(shù)以預(yù)渲染頁(yè)面。

在開發(fā)模式下，將根據(jù)請(qǐng)求調(diào)用數(shù)據(jù)獲取方法，以便您的代碼正常工作。但在生產(chǎn)模式下，它將顯示預(yù)渲染的靜態(tài)頁(yè)面，這意味著頁(yè)面將顯示渲染時(shí)的內(nèi)容，如果您編輯和更新內(nèi)容，它將不會(huì)反映在頁(yè)面上。

如果您決定使用靜態(tài)站點(diǎn)生成，則必須在更新博客后重建整個(gè)站點(diǎn)，或者您必須具有某種客戶端 data-fetching邏輯，以便在更新博客內(nèi)容時(shí)更新博客。

對(duì)于客戶端數(shù)據(jù)獲取，您可以使用類似swr或react-query

這是一些可能有助于預(yù)渲染頁(yè)面的偽代碼，

路線/article/[articleId]

export async function getStaticPaths() {

const articles = await /* db query to get the list of articles or fetch from remote API*/

// generate a list of paths with route params

const paths = articles.map(article => ({ params: { articleId: article.id }}))

return {

paths,

fallback: false

// fallback can be true if you want to show a fallback version of page

// and serve JSON for unknown articles

}

export async function getStaticProps(ctx) {

try {

const result = await fetch(`${API.baseURL}/get_article/${params.id}`);

const article = await result.json();

return {

props: { article },

};

} catch (error) {

return {

props: null

}

詳細(xì)了解函數(shù)docsfallback的返回值是如何工作的。getStaticPaths

另一種選擇是getServerSideProps用作數(shù)據(jù)獲取方法，該方法將在每次請(qǐng)求頁(yè)面時(shí)調(diào)用，但 TTFB（到第一個(gè)字節(jié)的時(shí)間）會(huì)更高。因此，對(duì)于博客發(fā)布網(wǎng)站，我不建議使用getServerSideProps.

反對(duì) 回復(fù) 2022-10-27

繁星淼淼

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊

您必須添加revalidate參數(shù)。在這里了解更多信息。

在你的情況下

export async function getStaticProps({ params, res }) {

try {

const result = await fetch(`${API.baseURL}/get_article/${params.id}`);

const article = await result.json();

return {

props: { article },

revalidate: 10 // 10 seconds

};

} catch (error) {

res.statusCode = 404;

return { props: {} };

}

請(qǐng)注意該revalidate參數(shù)。

反對(duì) 回復(fù) 2022-10-27

MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊

有一種方法可以更新使用 getStaticProps 生成的 HTML，這個(gè)過程稱為增量服務(wù)器重新生成。這將確保您在將更新推送到博客文章時(shí)更新您的頁(yè)面。NextJS 已經(jīng)記錄了這個(gè) https://nextjs.org/docs/basic-features/data-fetching 您在上面的頁(yè)面上搜索 ISR 以了解它是如何完成的基本上您必須指定 NextJS 將嘗試更新頁(yè)面的時(shí)間，如果完全有新帖子，它將在第一次請(qǐng)求時(shí)由服務(wù)器呈現(xiàn)，并且然后緩存，一旦緩存，它幾乎就像一個(gè)靜態(tài)頁(yè)面一樣工作，參考后備：'blocking' 從網(wǎng)站引用：Next.js 允許您在構(gòu)建網(wǎng)站后創(chuàng)建或更新靜態(tài)頁(yè)面。增量靜態(tài)重新生成 (ISR) 使您能夠在每個(gè)頁(yè)面的基礎(chǔ)上使用靜態(tài)生成，而無需重建整個(gè)站點(diǎn)。使用 ISR，您可以在擴(kuò)展到數(shù)百萬頁(yè)的同時(shí)保留靜態(tài)的優(yōu)勢(shì)。

考慮我們之前的 getStaticProps 示例，但現(xiàn)在通過 revalidate 屬性啟用增量靜態(tài)再生

反對(duì) 回復(fù) 2022-10-27