Next.js因SSR接口请求导致初始加载过慢的优化方案咨询

一、先排查核心耗时点 #

首先要明确是接口本身慢还是Next.js的服务端渲染流程慢：

• 在getServerSideProps/getStaticProps里添加耗时统计，单独测试接口响应速度：

  export async function getServerSideProps(context : any) {
    const startTime = Date.now();
    const getCountriesData = await getCountries();
    console.log('接口请求耗时:', Date.now() - startTime); // 查看控制台输出
    // 避免重复解析：如果getCountries已返回JSON对象，就不用再parse
    const countriesData = typeof getCountriesData === 'string' ? JSON.parse(getCountriesData) : getCountriesData;
    return { props: { countriesData } };
  };
  

如果接口本身响应就超过5秒，优先优化后端接口（比如加缓存、优化数据库查询、用CDN加速数据），这是解决问题的根本。

二、优化SSG/ISR的使用（如果数据允许静态化） #

国家数据属于低频更新的静态数据，用getStaticProps配合**增量静态生成（ISR）**可以彻底解决加载慢的问题：

• 配置ISR后，页面会在构建时生成静态文件，用户访问直接读静态资源，后台自动定时更新数据：

  export async function getStaticProps() {
    const getCountriesData = await getCountries();
    const countriesData = typeof getCountriesData === 'string' ? JSON.parse(getCountriesData) : getCountriesData;
    return {
      props: { countriesData },
      revalidate: 86400, // 每24小时后台自动重新生成页面（可根据数据更新频率调整）
    };
  };
  

之前用getStaticProps没改善，大概率是没配置revalidate，导致每次请求都重新生成页面。

三、消除代码冗余操作 #

你的代码同时用了服务端传参和React Query的initialData，会造成不必要的请求重复：

• 如果坚持用SSR/SSG，直接把服务端获取的数据传给组件即可，无需再通过React Query包装；
• 若要保留React Query的缓存能力，配置staleTime避免重复请求：

  const { data } = useQuery('countries', getCountries, { 
    initialData: countriesData,
    staleTime: 86400000, // 24小时内认为数据是新鲜的，不发起重复请求
  });
  

四、考虑改为前端异步请求的场景 #

如果接口无法优化，或者更看重用户的即时页面体验，改为前端调用接口更合适：

• 优势：页面先渲染骨架屏/loading状态，用户不用等6秒才看到内容，体验更流畅；还能利用React Query的缓存、重试等能力；
• 修改示例：

  export default function Home() {
    const { data: countriesData, isLoading } = useQuery('countries', getCountries);
    
    // 显示加载状态，替代空白等待
    if (isLoading) return <div>加载中...</div>;
    
    return (
      <>
        <Head>
          <title>国家列表</title>
          <meta name="description" content="国家数据展示" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
        </Head> 
        <Navbar />
        <Store>
          <FilterSection />
          <CardsSection countriesData={countriesData} />
        </Store>
      </>
    );
  };
  

总结选择建议 #

• 数据静态/准静态（如国家数据）：优先用getStaticProps+ISR，这是性能最优的方案；
• 数据需要实时更新但接口可优化：先优化接口耗时，再保留SSR；
• 接口无法优化、或更看重用户体验：改为前端异步请求+loading状态。

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