CODEWITHSUNDEEP
reactjsnext.jsserver-side-renderingincremental-static-regeneration
Fanourios Chatziathanasiou
Fanourios Chatziathanasiou

Reputation: 3

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.

enter image description here

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).

enter image description here

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.

Upvotes: 0

Views: 1291

Answers (1)

Binabh Devkota
Binabh Devkota

Reputation: 397

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.

Upvotes: 0

Related Questions