使用

getServerSideProps 是 next.js 中的一項特色功能，可以讓我們在給頁面設(shè)置一些初始的 props 參數(shù)。

getServerSideProps 是定義在頁面中的 API，但是其執(zhí)行環(huán)境是 node 端，而不是客戶端，一般常見使用場景為：

• 頁面前置權(quán)限校驗
• 頁面必備參數(shù)獲取

使用時需要在對應(yīng)的 page 文件中 export getServerSideProps

const Page = props => {
    return <div>page</div>;
};
export async function getServerSideProps(context) {
    return {
        props: {}
    };
}
export default Page;

這樣便可以從頁面組件中直接使用 props 來獲取 getServerSideProps 注入的 props 了。

ts 定義

如果是在 TS 中 next.js 也提供了 GetServerSideProps 接口來方便智能提示。

import { GetServerSideProps } from 'next';
export const getServerSideProps: GetServerSideProps = async context => {
    return {
        props: {}
    };
};

context

getServerSideProps 中的 context 參數(shù)包含了常用的請求的 req、res、params、query 等參數(shù)，還包含了 preview、previewData、resolvedUrl、locale 等參數(shù)

實現(xiàn)

當 getServerSideProps 所在頁面為 SSR 服務(wù)端渲染時，getServerSideProps 中的數(shù)據(jù)將會被放到全局的 _NEXT_DATA 中，用于 hydrate。

而非 SSR 情況下，進入該頁面 next.js 將會自動發(fā)請求到： _next/data/development/{url}.json?{query}，其中 development 為開發(fā)環(huán)境下地址段，該請求的返回值為：

{
    "pageProps": "返回的 props 數(shù)據(jù)內(nèi)容",
    "__N_SSP": true
}

從而將 getServerSideProps 返回值在頁面掛載時注入進去。

請求 API

需要注意 getServerSideProps 為 node server 端代碼，無法在其中直接請求內(nèi)部 API，因為會找不到地址（外部 API 可以請求，認為是這段代碼是獨立的 node 端代碼就行了）。如果想要調(diào)用內(nèi)部 API 可以將對應(yīng)的 API handler 拆解，作為方法調(diào)用。

// api/test.ts
export const getContent = async () => {
    return content;
};
export default async function handler(req: NextApiRequest, res: NextApiResponse<Response<T[]>>) {
    res.status(200).json({
        code: 0,
        data: await getContent()
    });
}

// pages/page.tsx
import { getContent } from './api/test.ts';
export const getServerSideProps: GetServerSideProps = async context => {
    return {
        props: await getContent()
    };
};

問題

還有一點需要注意的是，雖然 getServerSideProps 為 server 端代碼，但是客戶端打包時好似仍然會將對應(yīng)的代碼打包到頁面中，所以應(yīng)當盡量避免其中有過于復雜的邏輯或引入一些較大的包。

特殊處理 - 404、跳轉(zhuǎn)、異常

getServerSideProps 返回值除了可以設(shè)置 props 外還可以使用 notFound 來強制頁面跳轉(zhuǎn)到 404。

export async function getServerSideProps(context) {
    const data = await getData();
    if (!data) {
        return {
            notFound: true
        };
    }
    return {
        props: { data }
}

或者是使用 redirect 來將頁面重定向。

export async function getServerSideProps(context) {
    const data = await getData();
    if (!data) {
        return {
            redirect: {
                destination: '/',
                permanent: false
            }
        };
    }
    return {
        props: { data }
    };
}

并且如果 getServerSideProps 報錯了，next.js 將會直接跳轉(zhuǎn)到 500 頁面，又省下一段異常處理代碼，可喜可賀。

總結(jié)

通過 next.js 的 getServerSideProps，我們在開發(fā)中可以很好的協(xié)調(diào)前后端數(shù)據(jù)，一些頁面初始化數(shù)據(jù)、頁面鑒權(quán)可以直接在 getServerSideProps 中進行處理，這樣可以大大簡化頁面邏輯，還保障前后端的統(tǒng)一性，更多關(guān)于next.js 初始化參數(shù)設(shè)置的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論