如何使用Vue或React构建服务端渲染的多页应用（MPA）

你要实现的「访问不同路径触发服务端重新渲染、返回完整HTML」的MPA效果，不需要脱离现有React/Vue技术栈，核心是抛弃SPA模式下客户端路由全局接管的逻辑，按路由拆分服务端渲染入口即可，具体落地方式如下：

核心逻辑差异 #

你之前写的CSR SPA，服务端只返回一个带根节点的空HTML壳，所有路由匹配、页面渲染、跳转逻辑全在客户端执行；SSR模式的MPA逻辑完全不同：

• 服务端为每个业务路径（/home、/contact等）单独配置页面组件的匹配规则，收到对应路径的请求时，直接将匹配到的页面组件渲染为完整HTML字符串，拼接通用头部、尾部模板后返回给浏览器
• 客户端不需要加载全量路由配置，仅对当前返回的HTML做交互逻辑绑定（即水合过程）
• 页面跳转走浏览器原生跳转逻辑，不做客户端路由拦截，跳转新路径时会重新向服务端发起请求，拿到新页面的完整渲染结果，完全符合MPA的行为特征

Vue 技术栈落地方式 #

• 自定义轻量实现：直接引入Vue服务端渲染官方基础包，在Node服务层（Express/Koa等）逐路由配置匹配规则：请求/home时引入Home.vue组件，通过renderToString方法渲染为HTML片段插入通用模板返回；请求/contact时同理处理。构建阶段给每个页面单独打包客户端水合脚本，不要把所有页面的业务代码打进同一个客户端bundle。
• 工程化场景：直接基于Nuxt搭建，关闭默认的客户端路由预加载、无刷新跳转能力，页面跳转不要用内置的<NuxtLink>/<RouterLink>组件，统一用原生<a>标签。框架会自动处理每个页面的服务端渲染逻辑、资源拆分、构建配置，不需要手动维护SSR编译链路。

React 技术栈落地方式 #

• 自定义轻量实现：用react-dom/server提供的renderToString/renderToPipeableStreamAPI，在Node服务层逐路由做组件匹配，将匹配到的页面组件渲染为HTML返回；客户端用react-dom/client的hydrateRootAPI仅对当前页面的根节点做水合，不要引入React Router的BrowserRouter全局接管路由。
• 工程化场景：基于Next.js的Pages Router模式搭建，关闭客户端侧无刷新导航配置，页面跳转统一用原生<a>标签替代内置的<Link>组件，框架会自动完成逐页服务端渲染、资源按需加载、构建优化等工作。

实操避坑要点 #

• 不要在这类MPA项目中全局引入全量客户端路由库，避免路由逻辑被客户端接管，退化为SPA模式
• 每个页面的客户端水合脚本必须单独拆分打包，不要把所有页面的JS资源全量加载，否则会失去MPA逐页加载的性能优势
• 如果页面没有复杂客户端交互，可以跳过水合步骤，服务端直接返回纯静态HTML，加载速度会更快

学习路径参考 #

• 第一步先过一遍React/Vue官方文档中服务端渲染的基础章节，重点掌握服务端渲染方法、水合这两个核心API的用法，不用一开始就上Nuxt/Next这类上层框架：可以自己写个极简Demo，用Express起服务，访问/a返回A组件渲染的HTML，访问/b返回B组件渲染的HTML，先把核心流程跑通
• 核心逻辑跑通后，再去熟悉Nuxt/Next的多页模式配置，这类框架已经把编译、资源拆分、缓存、异常处理等重复工作封装完成，生产环境直接使用即可，不需要手动从零搭SSR工程
• 不需要特意找专门讲解「React/Vue开发MPA」的特殊教程，本质就是把单入口SSR的路由逻辑从客户端侧挪到服务端侧，去掉客户端路由全局接管的逻辑即可，用到的所有核心API和常规SSR开发的知识点完全通用

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