CODEWITHSUNDEEP
next.jsserver-side-rendering
Pooja
Pooja

Reputation: 613

How to reduce SSR render time in next.js

I am trying to reduce the load time that SSR is taking right now, So, I am building a product page and single product description page, but this time what is happending whenever I click on specific category, An API call is made and get the data and render that data, But Suppose I have 1000 product then It will take a lot of time to fetch and render data.

How can I reduce that time and user don't have to wait long enough for the product loading.

Current Code :

export async function getServerSideProps(context) {
  const { query } = context
  const { id, categoryId } = query

  var json ={
    _id : id
  }
  try{
    const respones = await fetch(Constants.getProducts, {
      method: 'POST',
      headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
      },
      
      body: JSON.stringify(json),
      });
      const result = await respones.json();
      return{
          props : {result : result.doc[0], categoryId : categoryId , status : 200}
      }
  } catch(e){
    return{
      props : {result : result, categoryId : categoryId, status : 404}
  }
  }
}

Plz help

Upvotes: 0

Views: 3965

Answers (1)

Ishan Bassi
Ishan Bassi

Reputation: 562

You should use static generation with getStaticProps and use Incremental Static generation for new products which are being added .

Next.js blog has an example that will help you.

Here is the Link:

E-commerce Next.js App Example.

Read More about : Incremental Static Generation

Upvotes: 1

Related Questions