NextJS getServerSideProps未被触发[重复]

z31licg0  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(158)

此问题已在此处有答案

How to fetch data server-side in the app directory of Next.js? Tried getStaticProps but it's returning undefined(2个答案)
14天前关闭
第一次使用NextJS构建应用程序。我正在尝试从数据库中获取产品。
我的产品文件夹结构如下:

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

现在问题不在于数据获取,而是getServerSideProps-function甚至没有被触发。这就是我的[category] -> page.tsx的样子:

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 } };
}

那么问题是什么呢?我已经尝试了我能做的一切,无论我做什么,第二个函数(getServerSideProps)都没有被触发。我是否缺少任何设置,我的文件夹结构是否错误?我没有对我的next.config.js文件做任何操作。我知道这是个新手问题,但我无论如何也弄不明白。

ehxuflar

ehxuflar1#

您似乎正在使用app目录,其中不支持getServerSideProps,而支持其他新方法,如服务器组件...
查看此响应以获取更多信息:
https://stackoverflow.com/a/75119735/13414535
在Next.js版本13中,有一个新功能,允许在所有页面上默认获取服务器端数据,包括应用程序目录。这是通过该高速缓存使用fetch方法来实现的:“无存储”选项。这允许服务器端呈现所有页面上的数据,类似于getServerSideProps函数的工作原理。您可以参考官方文档https://nextjs.org/blog/next-13#data-fetching,了解如何在Next.js 13及更高版本中使用此功能。

相关问题