NextJS大型博客页面的理想数据获取方案：兼顾性能与SEO

我正在使用NextJS 12和Strapi作为CMS搭建个人作品集/博客网站，逻辑与NextJS博客模板类似。我的/blog页面采用NextJS的Incremental Static Regeneration（ISR）获取所有博文，同时实现了基于输入过滤博文的搜索功能，以及初始仅展示少量博文、点击按钮加载更多的功能。

为测试极限情况，我从Strapi生成了数百篇随机博文，此时获取所有博文的请求数据量达到1-2MB，触发了NextJS的警告：

Warning: data for page "/blog" is 1.5 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

我想知道getStaticProps是否不再适合该场景？若如此，兼顾高性能与SEO的NextJS大型博客页面理想数据获取方案是什么？我考虑切换为Server Side Rendering（SSR）分页处理/blog页面，同时用getStaticPaths处理/blog/[slug]详情页以保障SEO，但不确定ISR是否会影响大规模应用的性能。

• getStaticProps是否还适用？
  确实不再适合当前场景。getStaticProps会把所有获取到的数据打包进页面的静态资源中，当数据量超过128KB时，不仅会触发NextJS的性能警告，还会导致页面初始加载变慢——用户打开/blog页面时需要下载完整的1-2MB数据，哪怕只展示前几篇博文，这完全是资源浪费，同时也会影响首屏加载速度和用户体验。

• 兼顾高性能与SEO的理想方案
  你的思路方向是对的，可以按以下方式优化：

  1. 博客列表页（/blog）：采用SSR分页 + 客户端加载更多
     • 用getServerSideProps实现服务端分页，每次仅返回当前页需要的博文数据（比如每页10-20篇），这样初始数据量会控制在几十KB以内，完全符合性能要求。
     • 保留客户端的搜索和加载更多功能：搜索时直接请求Strapi的过滤接口，加载更多时再向服务端请求下一页的数据，避免一次性拉取全部内容。
     • 这种方式既保证了首屏的SEO（服务端渲染出初始列表内容，搜索引擎能正常抓取），又控制了数据传输量，大幅提升加载性能。
  2. 博客详情页（/blog/[slug]）：继续用ISR（getStaticPaths + getStaticProps）
     • 详情页单篇内容数据量小，ISR可以让页面静态化存储在CDN上，访问速度极快，同时支持定时刷新或按需刷新内容，完全不影响SEO——搜索引擎能抓取到静态化的页面内容，性能也有保障。
  3. 关于ISR在大规模场景的性能
     ISR本身适合大规模内容场景，但前提是不要在单个页面中打包过多数据。比如如果你的博客列表页用ISR但只预渲染前20篇，剩余内容通过客户端异步加载，其实也可行，但相比SSR分页，ISR的列表页数据更新需要等待页面重新生成，而SSR可以实时获取最新的分页数据。如果博客更新频率不高，也可以考虑ISR分页（比如预先生成前几页的静态页面），但SSR分页在灵活性和实时性上更优。

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