如何在 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 博客中有一个示例可以帮助您。

这里是 Link:

E-commerce Next.js App Example.

阅读更多关于：Incremental Static Generation

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

How to reduce SSR render time in next.js

server-side-rendering

next.js