原来这不是ssr

17 阅读1分钟

前端开发时,比如一个vue3项目,本地启动node服务器,浏览器访问本地node服务器地址,本地node服务给浏览器返回html等资源,浏览器渲染。因为本地开发的时候,其实都是node返回给浏览器html,所以,这是不是ssr? 一开始我以为其实也算,结果问了deepseek:

你的理解很接近,但这不一定是 SSR。这取决于你的 Vue 3 项目是如何构建和运行的。让我详细解释一下:

1. 两种主要情况对比

情况 A:CSR(客户端渲染)- 最常见的前端开发模式

javascript

// 这是典型的 Vue 3 CSR 开发环境
// 本地启动的是开发服务器(如 Vite dev server)

// 服务器返回的是:
<!DOCTYPE html>
<html>
  <head>
    <!-- 空壳 HTML,等待客户端填充 -->
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script> 
    <!-- 关键:浏览器下载 JS 后,由 Vue 在客户端创建 DOM -->
  </body>
</html>

特点:

  • Node 服务器只返回一个几乎空的 HTML
  • 浏览器下载 JS 后,Vue 在客户端动态创建 DOM
  • 不是 SSR,因为 HTML 初始内容是空的

情况 B:SSR(服务端渲染)- 真正的 SSR 开发环境

javascript

// 如果是 Vue SSR 开发环境
// 服务器会执行 Vue 组件,生成完整 HTML

// 服务器返回的是:
<!DOCTYPE html>
<html>
  <head>
    <title>我的页面</title>
  </head>
  <body>
    <div id="app">
      <!-- 这里已经有服务器渲染好的完整 HTML 内容 -->
      <header>导航栏</header>
      <main>页面具体内容...</main>
      <footer>页脚</footer>
    </div>
    <script type="module" src="/src/entry-client.js"></script>
  </body>
</html>

特点:

  • Node 服务器执行 Vue 代码,生成完整的 HTML
  • 浏览器收到时已有完整内容
  • 然后 Vue 在客户端接管(hydration)