Nextjs - Fetching single post data using getServerSideProps

Question

I am building a news website using Nextjs + Strapi, since news websites are highly dynamic and need to push updates on minute basis, I cannot use getStaticProps since this method fetching data on the build even using incremental static regeneration will not make any sense, in addition the website must have advanced search and user accounts where they can personalize the news categories they want to read.

I was able to use getServerProps to fetch main menu data ( News Categories ) in the layout, I created dynamic routes but when it came to fetching (Single Category) with news articles belongs to it, I could not find any clear documentation for that.

I tried to create an external method in ./pages/api folder getCategoryData.js to fetch single category data from external api (Strapi Backend) using axios and the category.slug as variable, I was able to fetch data correctly but I tried many ways to assign category data to a const category inside the page body method, it was not successful and returning undefined.

here exactly what I did in Single Category Page: ./pages/category/[slug]/index.js

import { useRouter } from 'next/router'
import DefaultLayout from "../../../components/layouts/default";
import { getCategory } from "../../api/getCategoryData";

const CategoryArticles = ({ menuItems }) => {
    const router = useRouter()
    const { slug } = router.query

    const category  = getCategoryData(slug); 
    console.log(category) // here returns undefined !!!

    return (
        <DefaultLayout menuItems={ menuItems }>
            <div>  { category.name } </div>
        </DefaultLayout>
    );
}
export default CategoryArticles

// Note: I tried to call getCategoryData(slug) here but could not export the slug variable outside of
// page body method, also tried to use getInitialProps method for that, it did not work since I am
// using getServerSideProps. 

export async function getServerSideProps() {
    const res = await fetch('http://localhost:1337/categories')
    const data = await res.json()

    return {
        props: { menuItems: data },
    }
}

an in ./pages/api/getCategoryData.js

import axios from "axios";

export const getCategoryData = async (slug) => {
    const response = await axios.get(`http://localhost:1337/categories?slug=${slug}`);

    console.log(response.data[0]) // here when I logged response data it returened a json object

    if (!response.data.length) {
        return {
            statusCode: 404,
        };
    }

    return {
        statusCode: 200,
        category: response.data[0],
    };

};

Please any suggestions? I spent 4 days searching on Internet but I got totally confused most tutorials explains how to get static props without any details about server side props, Or should I migrate to use Vue Nuxtjs since it is more easier there to handle these requests.

Answer 1

You can access the slug param from getServerSideProps context, and make the external API call directly from there. There's no need to make the request from the client-side.

export async function getServerSideProps({ params }) {
    // Call external API from here directly
    const response = await fetch(`http://localhost:1337/categories?slug=${params.slug}`)
    const data = await res.json()

    return {
        props: { menuItems: data }
    }
}