SSR 和 SSG 到底该怎么选？项目上线后首屏还是慢

百里淑怡提问于 2026-03-30 13:03:12 阅读 5

优化

我们用 Next.js 做了个内容型网站，现在纠结该用 SSR 还是 SSG。试过 getStaticProps 静态生成，但数据更新频繁，每次都要重新构建；换成 getServerSideProps 又发现首屏加载变慢了，TTFB 很高。

有没有什么折中的方案？比如部分页面 SSG + 部分 ISR？或者我是不是哪里配置错了？

// next.config.js 里开了 experimental.optimizeImages
// 但 Lighthouse 还是报「减少 JavaScript 执行时间」
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

我来解答赞 2 收藏

反馈

1 条解答

迷人的建英 Lv1

我之前也碰到过类似情况，SSR和SSG确实让人纠结。你的问题其实有几个方向可以优化。

首先建议试试ISR（增量静态再生），它结合了SSG和SSR的优点。在 getStaticProps 里加个 revalidate 参数，比如设成60秒，这样页面会定期更新数据，不用每次都重新构建。

export async function getStaticProps() {

  const res = await fetch('https://api.example.com/data');

  const data = await res.json();

  return { 

    props: { data },

    revalidate: 60

  };

}

TTFB高的问题，可能跟API接口有关。检查下API响应时间，或者考虑用CDN缓存。你提到的 optimizeImages 只对图片有效，JavaScript执行时间长可能是某些库的问题。

如果必须用SSR，可以把一些公共的依赖提取出来，减少每次请求的加载量。另外可以看看是不是有太多不必要的hydration操作。

总之混合模式是个好选择：首页和热门内容用SSG+ISR，后台管理等动态性强的部分用SSR。这样既能保证性能，又能及时更新数据。折腾这些配置确实挺累人的，但慢慢调总会找到最佳方案的。

2026-03-30 13:04