什么是 Vue 的服务端渲染（SSR）？它与客户端渲染的区别是什么？
在现代 Web 开发中，渲染是指将数据转换为用户可以看到的界面。主要有两种渲染方式：服务端渲染（SSR）和客户端渲染（CSR）。Vue.js 支持这两种方式，开发者可以根据项目需求选择合适的渲染策略。
服务端渲染（SSR）
服务端渲染是指在服务器端生成完整的 HTML 页面，然后将该页面发送给客户端。在这种模式下，HTML 是由服务器生成的，浏览器收到 HTML 后直接显示内容，不需要依赖 JavaScript 完成页面的初始渲染。
SSR 的优势：
- 更好的 SEO：搜索引擎爬虫更容易抓取 SSR 页面中的内容，因为它们直接获取到 HTML 页面，尤其对于内容驱动的网站，SSR 提供了极大的 SEO 优势。
- 更快的首屏加载：用户首次访问时，浏览器会立即显示服务器预生成的 HTML 内容，不必等待 JavaScript 加载和执行后再渲染页面，首屏加载时间更快。
- 减轻客户端负担：对于性能较弱的设备，SSR 可以减少客户端的计算和渲染压力，提高用户体验。
客户端渲染（CSR）
客户端渲染是指在浏览器中动态生成和构建页面结构。页面的初始加载可能只包含少量 HTML，核心逻辑通过 JavaScript 运行，构建页面内容并渲染给用户。
CSR 的优势：
- 开发体验优越：开发者可以利用 Vue 的响应式和组件化特性，快速开发复杂的交互式用户界面。
- 浏览器优化：现代浏览器对 JavaScript 和 CSS 有很多优化策略，使得客户端渲染能够提供良好的性能。
- 单页面应用（SPA）体验：CSR 允许用户享受无刷新、动态更新页面的体验，更适合交互复杂的单页面应用。
SSR 与 CSR 的区别
| 比较项 | 服务端渲染（SSR） | 客户端渲染（CSR） |
|---|---|---|
| 渲染位置 | 服务器上生成 HTML，发送给客户端 | 客户端通过 JavaScript 构建页面 |
| 首屏加载时间 | 快，服务器直接生成完整 HTML | 较慢，需等待 JavaScript 执行 |
| SEO | 良好，搜索引擎可以直接抓取 HTML 内容 | 需要特殊处理，SEO 较差 |
| 客户端负担 | 低，服务器处理大部分渲染 | 高，所有渲染在客户端完成 |
| 动态交互 | 动态交互通常需要额外的客户端处理逻辑 | SPA 体验，支持复杂的动态交互 |
Vue 的 SSR 实现
Vue 提供了一个官方库 vue-server-renderer 来实现服务端渲染。它通过在服务器上运行 Vue 代码，生成静态的 HTML 页面，并将其发送给客户端。在客户端，Vue 负责“激活”这些静态内容，使它们变为可交互的 Vue 组件。
简单的 SSR 示例
- 安装依赖包
npm install vue@next vue-server-renderer
- 服务器端代码
// server.js
import { createServer } from 'vite';
import { createApp } from './app'; // Vue 应用的入口文件
async function serve() {
const server = await createServer({
preview: false,
server: {
middlewareMode: 'ssr' // 启用服务端渲染模式
}
});
await server.listen(3000);
console.log('Server running at http://localhost:3000');
}
serve();
- Vue 应用创建
// app.js
import { createSSRApp } from 'vue';
import App from './App.vue'; // Vue 的根组件
export function createApp() {
const app = createSSRApp(App);
return app;
}
- 客户端代码
// client.js
import { createApp } from './app'; // 与服务器端相同的应用实例
function render() {
const app = createApp();
app.mount('#app');
}
render();
运行原理
- 服务端使用
createSSRApp渲染 Vue 应用，将生成的 HTML 直接发送给客户端。 - 客户端通过
createApp函数激活页面，使得 Vue 应用可以正常交互。
总结
Vue 的服务端渲染（SSR） 提供了一种在服务器上预渲染 HTML 的方式，使得应用拥有更好的首屏加载速度和 SEO 表现。相较于 客户端渲染（CSR），SSR 更适合那些需要优化首屏加载时间和搜索引擎优化的场景。Vue 的 SSR 实现可以通过 vue-server-renderer 库和工具轻松搭建，提升应用的性能和用户体验。
最后，开发者可以根据应用的需求选择 SSR 或 CSR，甚至结合两者的优点（如使用 Nuxt.js 提供的混合渲染方式），以达到最佳的开发和用户体验。