NextJS getServerSideProps not being triggered

Question

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.

@YoussoufOumar No, unfortunately not. I don't think my code in the getServerSideProps function is wrong. The problem I'm having is that the function is not being fired at all. — leo, Jun 05 '23 at 15:18
Go through the answer, please; it's the same problem I think. — Youssouf Oumar, Jun 05 '23 at 15:20
@YoussoufOumar Yes it does fire the function that way. However I'm using dynamic routes and I need the params. I'd like to use the getServerSideProps if possible. Do you have any idea why the getServerSideProps is not being fired without having to call it from the CategoryProducts function? Thank you for taking your time — leo, Jun 05 '23 at 15:31

score 1 · Accepted Answer · answered Jun 05 '23 at 16:25

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.

I feel so dumb now. Thank you very much. I can finally move on! — leo, Jun 05 '23 at 19:05
Looking at it now I also realise that Youssof's answer also explains this. Thank you Youssouf too. — leo, Jun 05 '23 at 19:07

NextJS getServerSideProps not being triggered

1 Answers1