Web前端开发技术

Appearance

SSR与同构 ​

元信息 ​

  • 目标：理解 SSR 回归的动因——SPA 赢了切换体验、输了首屏与 SEO；掌握同构机制：同一套组件代码服务端 renderToString 生成首屏、客户端水合（hydration）接管交互
  • 关键概念：SSR、同构、水合、renderToString、首屏、SEO
  • 关联阶段：cp4
  • 常见误区：以为 SSR 是开倒车回到服务端模板时代（它是按页面/组件在两端之间重新分配渲染时机）；以为同构要写两套代码（同一套组件代码在两端各跑一遍）；以为水合只是浏览器再渲染一次（它是激活服务端送来的静态 HTML、补绑事件与状态的过程）

SSR 的回归：渲染到底发生在哪一端？ ​

单页应用把渲染搬到了客户端，换来体验、输掉了首屏与 SEO；SSR 的回归不是开倒车，而是按页面/按组件在两端之间重新分配渲染时机。

同构（Isomorphic/Universal） ​

同一套组件代码，既在服务端跑一遍（生成首屏 HTML），又在客户端跑一遍（接管交互，即"水合 hydration"）。React/Next.js、Vue/Nuxt 均属此路线。

  • 服务端：renderToString() 把组件树变成 HTML 字符串直接下发——爬虫与首屏都受益
  • 客户端：同一段代码重新执行，"激活"服务端送来的静态 HTML，绑定事件与状态
  • 收益归-单页应用：切换体验仍在；首屏与 SEO 回补

六种渲染模式（CSR/SSR/SSG/ISR/流式/岛屿）的完整对照表见前端架构。

素材 ​