NextJS dev server响应慢 本地与生产环境请求耗时差异排查

NextJS项目在localhost本地开发环境与线上生产环境的数据请求响应时间是否存在差异？
当前搭建对接GraphCMS的NextJS项目，使用GraphQL/graphql-request实现数据拉取：首次启动本地dev server加载完首页后，点击导航跳转至about页面时，数据拉取、页面切换总耗时达2秒。Chrome DevTools网络面板显示对应请求的.json文件初始状态为(pending)，内容下载完成后状态切换为200，截图如下：

查看请求瀑布流详情，Waiting for server response（等待服务器响应）耗时1.86s，内容下载仅耗时0.46ms；本次请求返回的json文件大小仅5.2kB，不属于大体积数据请求。需要确认该等待响应耗时过长是本地dev server的固有特性，还是拉取数据的源端GraphCMS服务器导致的问题。

客户端与查询配置（存放于/lib目录） #

// /lib/client.js
import { GraphQLClient } from 'graphql-request'

export const graphcmsClient = () =>
  new GraphQLClient(process.env.NEXT_PUBLIC_GRAPHCMS_URL, {
    headers: {
      authorization: `Bearer ${process.env.GRAPHCMS_TOKEN}`,
    },
  })

// ./lib/queries.js 查询示例
import { gql } from 'graphql-request'
    
const blogPageQuery = gql`
  fragment BlogPostFields on BlogPost {
    id
    category
    content
    coverImage {
      id
      height
      url
      width
    }
    excerpt
    published
    slug
    title
   }
  `

getStaticProps 数据拉取示例 #

export async function getStaticProps({ params, preview = false }) {
  const client = graphcmsClient(preview)
  const collectionCards = await getAllCollections()

  const { page, navigation } = await client.request(pageQuery, {
    slug: params.slug
  })

  if (!page) {
    return {
      notFound: true
    }
  }

  const parsedPageData = await parsePageData(page)

  return {
    props: {
      page: parsedPageData,
      navigation,
      collectionCards,
      preview
    },
    revalidate: 60
  }
}

• 本地开发环境与生产环境的请求响应时间存在显著差异，观测到的1.86s等待响应耗时，基本是本地dev server的固有特性，并非GraphCMS源站接口导致。
• 核心原因：
  • Next.js 本地开发服务默认不会做代码压缩、预编译优化，每次路由跳转触发对应数据请求时，服务端需要实时编译目标页面代码、执行数据拉取逻辑、序列化返回props，冷启动阶段单请求处理耗时普遍在1~3s区间，属于正常表现。
  • 「等待服务器响应占总耗时99%以上、内容下载仅0.46ms、返回数据仅5.2kB」的特征，完全符合本地dev server实时编译处理的耗时分布，和源站接口响应速度没有关系。
  • 生产环境执行next build后，配置了getStaticProps的页面会在构建阶段提前预渲染生成静态资源，配置的revalidate:60 ISR重验证逻辑会在后台静默执行，不会阻塞前端用户请求，对应路由的.json数据请求响应耗时通常会降到几十毫秒级别。
• 验证方法：本地执行npm run build（或yarn build）完成生产构建后，运行npm run start启动本地生产模拟服务，再访问对应路由测试响应速度，即可看到耗时大幅下降。如果此时仍然存在秒级等待，再排查GraphCMS接口的连通性问题即可。

内容的提问来源于stack exchange，提问作者RobbieC