I have an article page that displays all my articles and I have a <Link> tag to each individual article.

My individual articles are under articles/[id]/[articleName]/page.tsx.

My problem is that when I click an article, the load is sometimes up to 3 seconds and I have no idea why. I thought the generateStaticParams would pre-render all my articles and thus making the load time instant.

PS: I have tried adding a delay to the getData function and that does make the loading slower, so the problem seems to be here.

Thanks in advance! This has been bugging me for so long!

Here is my code:

import Navbar from "@/app/components/Navbar/Navbar";
import React from "react";
import Footer from "@/app/components/Footer/Footer";
import "./article.scss";
import NewTextArticle from "@/app/components/TextArticle/NewTextArticle";
import { fetchArticle, fetchArticles } from "@/app/supabase/fetchArticles";
import { Metadata } from "next";

export async function generateStaticParams() {
    const articleData: any = await fetchArticles();

    return articleData.map(({ id }: any) => id);
}

export async function generateMetadata({ params }: any): Promise<Metadata> {
    const articleData = await fetchArticle(params.id);

    return {
        title: articleData?.header,
        description: articleData?.sub_header,
        openGraph: {
            images: [
                {
                    url: articleData?.front_page_image,
                    alt: articleData?.image_sub_title,
                },
            ],
        },
    };
}

const Article = async ({ params }: any) => {
    const articleData = await getData(params);
    console.log(articleData);

    return (
        <>
            <div className="article-background">
                <Navbar />
                <NewTextArticle articleObject={articleData.props.articleData} content={articleData.props.articleData?.content} params={params} />
                <Footer />
            </div>
        </>
    );
};

async function getData(context: any) {
    const { id } = context;

    const articleData = await fetchArticle(id);

    return {
        props: {
            articleData,
            params: context,
        },
    };
}

export default Article;