使用

getServerSideProps 是 next.js 中的一項(xiàng)特色功能，可以讓我們?cè)诮o頁(yè)面設(shè)置一些初始的 props 參數(shù)。

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

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

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

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

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

ts 定義

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

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

context

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

實(shí)現(xiàn)

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

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

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

從而將 getServerSideProps 返回值在頁(yè)面掛載時(shí)注入進(jìn)去。

請(qǐng)求 API

需要注意 getServerSideProps 為 node server 端代碼，無法在其中直接請(qǐng)求內(nèi)部 API，因?yàn)闀?huì)找不到地址（外部 API 可以請(qǐng)求，認(rèn)為是這段代碼是獨(dú)立的 node 端代碼就行了）。如果想要調(diào)用內(nèi)部 API 可以將對(duì)應(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()
    };
};

問題

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

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

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

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

或者是使用 redirect 來將頁(yè)面重定向。

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

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

總結(jié)

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

最新評(píng)論