如何在next.js中减少SSR渲染时间

Question

我试图减少SSR现在占用的加载时间，所以，我正在构建一个产品页面和单个产品描述页面，但是这一次，每当我单击特定的类别时，就会发生什么，发出API调用，获取数据并呈现数据，但是假设我有1000个产品，那么获取和呈现数据将需要很长时间。

我如何减少时间和用户不必等待足够长的产品加载。

现行法典：

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}
  }
  }
}

请帮助

Answer 1

您应该将静态生成与getStaticProps一起使用，并对正在添加的新产品使用增量静态生成。

Next.js博客有一个可以帮助你的例子。

以下是链接：

电子商务Next.js应用程序示例。

阅读更多信息：增量静态生成