NextJS中getServerSideProps未触发问题求助

问题背景 #

首次使用NextJS搭建产品应用，产品页面的文件夹结构如下：

products
|__[category]
|  |__page.tsx
|  |__[subcategory]
|     |__page.tsx
|_page.tsx

当前[category]/page.tsx中定义的getServerSideProps函数完全未触发，代码如下：

import ProductsPageLayout from '../components/ProductsPageLayout';

export default function CategoryProducts({ products }: any) {
    return (
        <>
            {JSON.stringify('PRODUCTS - C ', products)}
            <ProductsPageLayout products={products} />
        </>
    );
}

export async function getServerSideProps(context: any) {
    console.log('LOGGING!!!!!!!')
    const { category } = context.params;
    const res = await fetch(`http://xxx:xxxx/api/products/${category}`);
    const products = await res.json();
    console.log('C - CONTEXT ', context);
    console.log('C - RES ', res);
    console.log('C - REPO ', products);

    return { props: { products } };
}

问题原因 #

你使用的是NextJS 13+的App Router（通过文件夹中的page.tsx命名可判断），而getServerSideProps是Pages Router专属的数据获取函数，App Router不会识别该函数，因此完全不会触发。

解决方案 #

方案1：使用App Router的Server Component直接获取数据 #

App Router中默认的page.tsx是Server Component，支持直接在组件内部编写异步代码获取数据，替代getServerSideProps的功能：

import ProductsPageLayout from '../components/ProductsPageLayout';

// Server Component 支持异步逻辑
export default async function CategoryProducts({ params }: { params: { category: string } }) {
    const { category } = params;
    // 直接在组件内发起请求获取数据
    const res = await fetch(`http://xxx:xxxx/api/products/${category}`);
    const products = await res.json();

    return (
        <>
            {JSON.stringify('PRODUCTS - C ', products)}
            <ProductsPageLayout products={products} />
        </>
    );
}

方案2：需要请求上下文时的处理 #

如果需要获取请求头、Cookie等上下文信息，可以使用NextJS提供的headers()和cookies()函数：

import { headers, cookies } from 'next/headers';
import ProductsPageLayout from '../components/ProductsPageLayout';

export default async function CategoryProducts({ params }: { params: { category: string } }) {
    const requestHeaders = headers();
    const userCookie = cookies().get('user');
    const { category } = params;

    const res = await fetch(`http://xxx:xxxx/api/products/${category}`, {
        headers: {
            'Authorization': requestHeaders.get('Authorization') || ''
        }
    });
    const products = await res.json();

    return (
        <>
            {JSON.stringify('PRODUCTS - C ', products)}
            <ProductsPageLayout products={products} />
        </>
    );
}

方案3：切换到Pages Router（可选） #

如果坚持要使用getServerSideProps，需要切换到Pages Router，调整文件夹结构为：

pages
|__products
|  |__[category].tsx
|  |__[category]
|     |__[subcategory].tsx
|  |__index.tsx

此时[category].tsx中的getServerSideProps就能正常触发。

内容的提问来源于stack exchange，提问作者leo