引言

之前講過 next.js 中的 getServerSideProps，今天來講一講另一個很類似的 API：getStaticProps，以及和 getStaticProps 緊密相關(guān)的 getStaticPaths。

getStaticProps 主要用于構(gòu)建時落地一些靜態(tài)數(shù)據(jù)，但不同于 getServerSideProps，getStaticProps 默認情況下只會在構(gòu)建時執(zhí)行一次，之后的每次請求都會使用構(gòu)建時的數(shù)據(jù)。在 ISR、SSG 等場景下還有不同的表現(xiàn)。

而 getStaticPaths 則用于配合 getServerSideProps 實現(xiàn)動態(tài)路由的構(gòu)建，next.js 會在構(gòu)建時根據(jù) getStaticPaths 的返回值來生成對應的靜態(tài)頁面。

使用

先看下 getStaticProps 如何使用，其實和 getServerSideProps 用法差不多：

export default function GetStaticProps({ content }: { content: string }) {
    return (
        <div>
            <header>getStaticProps</header>
            <main>{content}</main>
        </div>
    );
}
export const getStaticProps = async () => {
    const content = 'Hello World';
    console.log('call getStaticProps');
    return {
        props: {
            content
        }
    };
};

只需要在 page 中導出 getStaticProps 函數(shù)，然后在函數(shù)中返回 props 即可。在 page 渲染組件中就可以直接通過 props 即可獲得數(shù)據(jù)。

調(diào)用時機

再來看下 getStaticProps 的調(diào)用時機，這里和 getServerSideProps 存在很大差異：

• 當執(zhí)行 next build 時
• 當 getStaticPaths 返回 fallback 不為 false 時
• 當使用了 revalidate 時

上面給出的例子是 getStaticProps 最簡單的一個例子，只有在執(zhí)行 next build 時才會調(diào)用 getStaticProps，之后的每次請求都會使用構(gòu)建時的數(shù)據(jù)。

構(gòu)建時 next.js 會將其構(gòu)建為 html，并且還會構(gòu)建一份 json 文件，存儲 getStaticProps 的返回值，在訪問時初次進入頁面為該頁面時會直接使用 html 內(nèi)容，而非初次進入則會去請求該 json 文件獲取數(shù)據(jù)進行渲染。

json 文件中的數(shù)據(jù)如下：

{ "pageProps": { "content": "Hello World" }, "__N_SSG": true }

可以看到和之前講到的 getServerSideProps 的返回值是基本一致的，只是將 __N_SSP 參數(shù)變更為 __N_SSG，用以區(qū)分兩個數(shù)據(jù)的類型。

開發(fā)時的 getStaticProps

需要注意的是，在開發(fā)時也就是 next dev 時，getStaticProps 會在每次頁面訪問時被請求，也就是和 getServerSideProps 行為基本一致，剛上手時很容易對這里感到困惑。

使用 getStaticPaths

getStaticPaths 主要用于動態(tài)路由中的靜態(tài)頁面構(gòu)建，簡單說就是將一個動態(tài)路由通過 getStaticPaths 轉(zhuǎn)換為多個靜態(tài)頁面。

下面看下一個簡單的例子：

pages/get-static-paths/[id].tsx

function GetStaticPaths({ post }: { post: string }) {
    return (
        <div>
            <h1>Post: {post}</h1>
        </div>
    );
}
export async function getStaticPaths() {
    const paths = new Array(10).fill(0).map((_, i) => ({
        params: { id: i + 1 + '' }
    }));
    console.log('paths', paths);
    return { paths, fallback: true };
}
export async function getStaticProps({ params }: { params: { id: string } }) {
    console.log('params', params);
    return { props: { post: `post ${params.id}` } };
}
export default GetStaticPaths;

此處是一個簡單的動態(tài)路由，通過 getStaticPaths 我們可以定義該動態(tài)路由的匹配的路由值，通過 paths[number] 中的 params 參數(shù)和動態(tài)路由中的參數(shù)進行匹配。以下是 next.js 將其轉(zhuǎn)換為靜態(tài)頁面的步驟中 getStaticPaths 和 getStaticProps 相關(guān)的部分。

• 調(diào)用 next build 命令，next.js 會進行頁面數(shù)據(jù)的收集，檢測到動態(tài)路由時會嘗試調(diào)用 getStaticPaths 并獲取其返回值。
• 將返回值中的 paths 進行遍歷，依次取出和動態(tài)路由進行匹配，匹配后進行靜態(tài)頁面的生成步驟。
• 將 path 中的 params 傳入 getStaticProps 中，執(zhí)行 getStaticProps 獲取返回值。
• 通過返回值生成相應的 html 和 json 文件

所以上述代碼我們在 next build 時將會生成 10 個靜態(tài)頁面 [1-10].html 和 10 個 JSON 文件 [1-10].json，生成的文件可以到 .next/server/pages/ 下查看。

fallback

此外上面的 DEMO 中可以看到 fallback 參數(shù)，fallback 其實有三個可選值：true、false 和 blocking，主要是用于控制訪問動態(tài)路由時該地址未落地成靜態(tài)頁面時的處理。

false 時基本就只有上述行為，當訪問不存在的頁面時會返回 404 頁面，比如上面訪問到 /get-static-paths/11 時會返回 404。

而 fallback 為 true 時會有一些不同，當訪問不存在的頁面時不會返回 404，而是會返回動態(tài)路由頁面，并且使用頁面參數(shù)去請求 getStaticProps 數(shù)據(jù)，然后生成靜態(tài)頁面和 JSON 文件并將 JSON 文件返回動態(tài)渲染到頁面中。而二次訪問該頁面時由于已經(jīng)有了靜態(tài)頁面，就和其他已存在頁面行為一致了。可以理解為一種 lazy build。

fallback 為 blocking 時行為和 true 基本一致，但不同的是當訪問不存在的頁面時會等待 getStaticProps 執(zhí)行完成后再返回頁面，不需要進行二次數(shù)據(jù)請求。所以初次訪問表現(xiàn)不一致，一個為異步一個為同步。

注意點

這里還有一個比較需要關(guān)注的問題是 getStaticPaths 中的 params 中的參數(shù)需要為字符串，否則將會導致無法匹配，猜測為 next.js 中進行了類型判斷或 map 操作，這個在后續(xù)源碼分析中細看。

此外和 getStaticProps 一樣，在開發(fā)環(huán)境下 getStaticPaths 也會在每次訪問時被調(diào)用。

和 getServerSideProps

需要注意 getStaticProps 和 getServerSideProps 無法混用，在 next.js 的定位中，getStaticProps 主要用于 SSG 場景，而 getServerSideProps 主要用于 SSR 場景，在同一頁面中使用時將會提示：You can not use getStaticProps or getStaticPaths with getServerSideProps. To use SSG, please remove getServerSideProps。

當然，個人覺得從設(shè)計上進行混用也沒啥問題，getStaticProps 落地靜態(tài)數(shù)據(jù)、getServerSideProps 落地動態(tài)數(shù)據(jù)，然后動態(tài)覆蓋靜態(tài)即可，next.js 這么設(shè)計可能是為了遵循單一職能原則。

總結(jié)

最后來聊一聊什么場景下我們應該使用 getStaticProps，其實官方使用文檔里有列出推薦的使用場景，我這邊說下自己的想法：如果頁面中的數(shù)據(jù)是通過發(fā)布行為來進行更新的，那么就可以使用 getStaticProps。當然，要注意數(shù)據(jù)的安全性等問題。如果遇到頁面中既有動態(tài)數(shù)據(jù)又有靜態(tài)數(shù)據(jù)，那還是老老實實使用 getServerSideProps 吧。

當然，有同學可能發(fā)現(xiàn)上面只講了兩種 getStaticProps 的場景，而 revalidate 的場景沒講到，由于 revalidate 和 ISR 相關(guān)，這個后面再說（下次一定，逃～）。

以上就是next.js之getStaticProps getStaticPaths使用技巧解析的詳細內(nèi)容，更多關(guān)于next.js getStaticProps getStaticPaths的資料請關(guān)注腳本之家其它相關(guān)文章！