如何减少 next.js 中的 SSR 渲染时间答案

【问题标题】：How to reduce SSR render time in next.js如何减少 next.js 中的 SSR 渲染时间
【发布时间】：2021-11-19 13:52:06
【问题描述】：

我正在尝试减少 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}
  }
  }
}

请帮忙

【问题讨论】：

你应该使用 static generation 和 incremental static generation 而不是 SSR
如果您的 API 支持分页，您是否考虑过在 SSR 期间获取更少的产品，然后在客户端根据需要获取更多产品？
假设我获取了 20 个数据，但它似乎仍然很慢@juliomalves
如果我使用静态生成那么新的产品数据文件将如何生成？ @IshanBassi
如果即使使用较少的产品仍然很慢，那么问题可能出在 API 上？

标签： next.js server-side-rendering

【解决方案1】：

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

Next.js 博客有一个可以帮助您的示例。

这是链接：

E-commerce Next.js App Example.

阅读更多：Incremental Static Generation

【讨论】：

非常感谢，它解决了我的问题，而且我学到了一些新的东西@IshanBassi