React适用于SPA场景，如何搭建含数百篇文章的大型新闻站

你担心的“所有文章全打包进SPA导致包体积爆炸”的问题，本质是对React生态的认知还停留在早年纯客户端渲染（CSR）裸React的阶段，现在用React做内容站完全不需要走全量打包的路子，几百篇文章的新闻站属于非常轻量的场景，按下面的方案做就不会有问题：

核心：选对渲染模式，放弃纯客户端SPA思路 #

• 优先选静态站点生成（SSG）：直接用Next.js、Remix这类成熟的React全栈框架，构建阶段就会把每篇文章、列表页、分类页都渲染成独立的静态HTML文件。文章内容不管是存在本地Markdown/MDX文件里，还是存在无头CMS后台，都只会在构建时被读取，根本不会被打包进客户端JS包。用户访问的时候直接拿到预渲染好的页面，首屏速度快，搜索引擎抓取也友好。
• 如果你的站点更新频率高，不想每次发新文章都跑一次全量构建，直接开框架自带的**增量静态再生成（ISR）**功能，给页面设置好更新周期，用户访问新文章时后台会自动增量生成对应静态页面，不用重新构建整个站点，几百篇文章的体量哪怕全量构建也就几秒，完全没性能压力。

必须做的资源拆分，从根源避免包体积膨胀 #

• 路由级代码分割是基础配置：用框架自带的文件路由系统就行，不要手动把所有页面组件全引入到根组件打包。每个文章详情页、列表页、分类页的JS、CSS资源都会被自动拆成独立的包，用户访问首页时只加载首页相关的代码，点进具体文章才会加载对应文章页的资源，首屏包体积很容易压到几百KB以内。
• 文章数据按需拉取：不要把所有文章内容硬编码到前端代码里，要么存本地Markdown文件构建时静态读取，要么对接CMS后台，用户进入对应文章路由时才拉取单篇文章的内容，永远不会提前加载全量文章数据。
• 媒体资源懒加载：文章里的图片、封面图统一用框架自带的图片优化组件，自动做格式压缩、尺寸适配，视口外的资源默认不加载，哪怕每篇文章都带多图也不会拖慢页面加载速度。
• 列表做分页/无限滚动：文章列表每次只加载10-20篇的摘要内容，用户翻页或者滚动到对应位置时再加载下一批，不要一次性把几百篇文章的列表全拉到前端。

体验优化细节 #

• 开路由预加载：框架默认支持鼠标悬停在链接上时，提前预拉取目标页面的资源和数据，用户实际点跳转时几乎是秒开，交互体验和纯SPA没有区别，还解决了纯SPA首屏白屏、SEO差的问题。
• 公共资源单独抽离：导航、页脚这类全站通用的组件会被打包成公共包，用户跳转页面时不会重复加载这部分资源。

补充个常见误区：不要拿 create-react-app 搭的纯客户端React项目的思路套所有React应用，现在React生态做内容、电商、企业站的方案已经非常成熟，百篇量级的新闻站根本不存在技术瓶颈，只要不硬写无任何拆分的纯客户端渲染项目，完全不会遇到你担心的全量打包问题。

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