一起來學 next.js - getServerSideProps 篇

語言: CN / TW / HK

theme: devui-blue

持續創作,加速成長!這是我參與「掘金日新計劃 · 10 月更文挑戰」的第12天,點擊查看活動詳情

getServerSidePropsnext.js 中的一項特色功能,可以讓我們在給頁面設置一些初始的 props 參數。

使用

getServerSideProps 是定義在頁面中的 API,但是其執行環境是 node 端,而不是客户端,一般常見使用場景為:

  • 頁面前置權限校驗
  • 頁面必備參數獲取

使用時需要在對應的 page 文件中 export getServerSideProps

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

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

ts 定義

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

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

context

getServerSideProps 中的 context 參數包含了常用的請求的 reqresparamsquery 等參數,還包含了 previewpreviewDataresolvedUrllocale 等參數

實現

getServerSideProps 所在頁面為 SSR 服務端渲染時,getServerSideProps 中的數據將會被放到全局的 _NEXT_DATA 中,用於 hydrate

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

json { "pageProps": "返回的 props 數據內容", "__N_SSP": true }

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

請求 API

需要注意 getServerSidePropsnode server 端代碼,無法在其中直接請求內部 API,因為會找不到地址(外部 API 可以請求,認為是這段代碼是獨立的 node 端代碼就行了)。如果想要調用內部 API 可以將對應的 API handler 拆解,作為方法調用。

```ts // api/test.ts export const getContent = async () => { return content; };

export default async function handler(req: NextApiRequest, res: NextApiResponse>) { res.status(200).json({ code: 0, data: await getContent() }); } ```

```ts // pages/page.tsx import { getContent } from './api/test.ts';

export const getServerSideProps: GetServerSideProps = async context => { return { props: await getContent() }; }; ```

問題

還有一點需要注意的是,雖然 getServerSidePropsserver 端代碼,但是客户端打包時好似仍然會將對應的代碼打包到頁面中,所以應當儘量避免其中有過於複雜的邏輯或引入一些較大的包。

特殊處理 - 404、跳轉、異常

getServerSideProps 返回值除了可以設置 props 外還可以使用 notFound 來強制頁面跳轉到 404。

```tsx export async function getServerSideProps(context) { const data = await getData();

if (!data) {
    return {
        notFound: true
    };
}

return {
    props: { data }

} ```

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

```tsx export async function getServerSideProps(context) { const data = await getData();

if (!data) {
    return {
        redirect: {
            destination: '/',
            permanent: false
        }
    };
}

return {
    props: { data }
};

} ```

並且如果 getServerSideProps 報錯了,next.js 將會直接跳轉到 500 頁面,又省下一段異常處理代碼,可喜可賀。

總結

通過 next.jsgetServerSideProps,我們在開發中可以很好的協調前後端數據,一些頁面初始化數據、頁面鑑權可以直接在 getServerSideProps 中進行處理,這樣可以大大簡化頁面邏輯,還保障前後端的統一性。