什么是 Vue 的服务端渲染（SSR）？它与客户端渲染的区别是什么？

JJCTO袁龙

于 2024-09-30 14:31:49 发布

阅读量393

点赞数 15

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yuanlong12178/article/details/142656157

版权

Vue 专栏收录该内容

450 篇文章 5 订阅

订阅专栏

什么是 Vue 的服务端渲染（SSR）？它与客户端渲染的区别是什么？

在现代Web开发中，渲染应用程序的方式主要有两种：服务端渲染（SSR）和客户端渲染（CSR）。Vue.js支持这两种渲染方式，使得开发者可以根据应用的需求和特点选择合适的渲染策略。

服务端渲染（SSR）

服务端渲染是指在服务器上生成完整的HTML页面，然后将其发送给客户端。这种方式的优势在于：

更好的SEO：搜索引擎爬虫可以更容易地抓取服务端渲染的内容。
更快的首屏加载：用户在页面加载时即可看到完整的HTML内容，无需等待JavaScript的执行和DOM的构建。
减轻客户端负担：对于性能较差的设备，服务端渲染可以减少客户端的计算和渲染压力。

客户端渲染

客户端渲染是指在用户的浏览器中动态构建页面。这种方式的优势在于：

灵活的开发体验：开发者可以利用Vue的响应式和组件化特性，快速开发复杂的用户界面。
利用浏览器的优化：现代浏览器对JavaScript和CSS的优化可以提供更好的性能。
易于维护：对于单页面应用（SPA），客户端渲染可以提供更好的用户体验和更简单的状态管理。

SSR与CSR的区别

渲染位置：SSR在服务器上渲染，CSR在客户端浏览器中渲染。
首屏加载时间：SSR通常具有更快的首屏加载时间，因为HTML内容是预渲染的。
SEO：SSR对于搜索引擎优化更为友好，因为爬虫可以直接抓取到页面内容。
性能：SSR可以减轻客户端的性能负担，特别是在性能较差的设备上。

Vue的SSR实现

Vue提供了一个官方的库vue-server-renderer来实现服务端渲染。以下是一个简单的SSR示例：

1. 安装必要的包

npm install vue@next vue-server-renderer

2. 创建服务器和渲染逻辑

server.js:

import { createServer } from 'vite';
import { createApp } from './app'; // 你的Vue应用入口

async function serve() {
  const server = await createServer({
    preview: false,
    server: {
      middlewareMode: 'ssr' // 启用SSR模式
    }
  });

  await server.listen(3000);
  console.log('Server running at http://localhost:3000');
}

serve();

app.js:

import { createSSRApp } from 'vue';
import App from './App.vue'; // 你的Vue根组件

export function createApp() {
  const app = createSSRApp(App);
  return app;
}

在这个示例中，我们使用Vite和Vue 3的SSR能力来创建一个服务端渲染的应用。createSSRApp函数用于创建一个SSR应用实例。

3. 客户端入口

client.js:

import { createApp } from './app'; // 与服务端相同的应用实例

function render() {
  const app = createApp();
  app.mount('#app');
}

if (import.meta.hot) {
  import.meta.hot.accept();
  import.meta.hot.dispose(() => {
    render();
  });
}

render();