What would be the ideal fetching approach for a large NextJS Blog page for great performance and SEO?

I'm working on a personal portfolio / blog page using NextJS 12 and Strapi as my CMS. The website's logic is going to be kind of similar to NextJS' Blog template ( Github repo link: https://github.com/leerob/leerob.io).

My /blog section displays all the blog posts and is utilizing NextJS' Incremental Static Regeneration to fetch all the posts.

export async function getStaticProps() {
    const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/posts?populate=*`);
    
    const posts = await res.json();

    return {
        props: {
            posts,
        },
        // Next.js will attempt to re-generate the page:
        // - When a request comes in
        // - At most once every 60 seconds
        revalidate: 60, // In seconds
    };
}

I'm trying to make my blog as future-proof as possible just to test a bit myself and see what solution fits the best for every case. I'd also like to mention that in /blog i've implemented a search functionality that filters the array of posts depending on the input.

In order to stress things a little bit, I generated hundreds of random posts from Strapi. That said, I only display a couple of them at the beginning, just to not fill the DOM with all these elements at once, and give the abillity to the user to load more posts with a button ( example below).

But what I realized was that the fetch request that gets all the posts became somewhat large (~1-2mb ), to a level that even NextJS gave me the following warning:

"Warning: data for page "/blog" is 1.5 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance. See more info here: https://nextjs.org/docs/messages/large-page-data".

Does that possibly mean that getStaticProps is a bad choice for that case? If so , what would be the ideal fetching approach for a large NextJS Blog page for great performance and SEO?

I'm considering switching to Server Side Rendering-pagination for /blog and getStaticPaths for /blog/[slug] to maintain great SEO performance compared to Client Side Rendering.

I tried Incremental Static Regeneration but that (possibly?) hurts the performance of large scale applications since the fetch request size increases.

As you have mentioned that the blog page is large here are few things that you may want to do here.

1. Instead of populate=* in your API call only fetch required fields as body or some other large fields may not be required in this page. Please refer here: https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html#field-selection

2. Please make sure you are using next.js Image component for images. It supports lazy loading.

3. As you are implementing search you may want to use https://market.strapi.io/plugins/strapi-plugin-meilisearch along with a Meilisearch instance. This is an article for that by Meilisearch team (https://blog.meilisearch.com/strapi-v4-plugin-meilisearch/) This may not be required but if the number of blogs is going to be in hundreds or thousands I highly recommend adding a full-text search like this. For 100-200 posts filtering array should also work fine.

4. For Seo using a official strapi plugin https://market.strapi.io/plugins/@strapi-plugin-seo makes things easier.