英文:
NextJS getServerSideProps not being triggered
问题
以下是您要翻译的内容：
"First time using NextJS to build an application. I'm trying to fetch products from the database.
My folder structure for the products is as follows:
products
|__[category]
| |__page.tsx
|__[subcategory]
| |__page.tsx
|_page.tsx
Now the problem is not so much with the data fetching, but that the getServerSideProps-function is not even being triggered. This is what my [category] -> page.tsx looks like:
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 } };
}
So what would the problem be? I have tried everything I can and whatever I do the second function (getServerSideProps) is not being triggered. Am I missing any setup, is my folder structure wrong? I haven't done anything to my next.config.js file. I know it is a rookie problem, but I can't figure it out whatever I do."
英文:
First time using NextJS to build an application. I'm trying to fetch products from the database.
My folder structure for the products is as follows:
products
|__[category]
| |__page.tsx
| |__[subcategory]
| |__page.tsx
|_page.tsx
Now the problem is not so much with the data fetching, but that the getServerSideProps-function is not even being triggered. This is what my [category] -> page.tsx looks like:
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 } };
}
So what would the problem be? I have tried everything I can and whatever I do the second function (getServerSideProps) is not being triggered. Am I missing any setup, is my folder structure wrong? I haven't done anything to my next.config.js file. I know it is a rookie problem, but I can't figure it out whatever I do.
答案1
得分: 2
你似乎正在使用app目录，其中不支持getServerSideProps，而应使用新的其他方法，如服务器组件...
查看此响应以获取更多信息：
https://stackoverflow.com/a/75119735/13414535
> 在Next.js版本13中，有一个新功能，允许默认情况下在所有页面上进行服务器端数据获取，包括app目录。这是通过使用带有cache: 'no-store'选项的fetch方法实现的。这允许在所有页面上进行服务器端数据渲染，类似于getServerSideProps函数的工作方式。您可以参考官方文档https://nextjs.org/blog/next-13#data-fetching，了解如何在Next.js版本13及更高版本中使用此功能。
英文:
You seem to be using the app directory where getServerSideProps is not supported in favor of new other methods like server components...
Look a this response for more information:
https://stackoverflow.com/a/75119735/13414535
> Next.js version 13, there is a new feature that allows for server-side
> data fetching by default on all pages, including app directory. This
> is achieved by using the fetch method with the cache: 'no-store'
> option. This allows for server-side rendering of data on all pages,
> similar to how getServerSideProps function works. You can refer the
> official docunentation https://nextjs.org/blog/next-13#data-fetching
> on how to use this feature in Next.js version 13 and later.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论