[教程]揭秘Vue.js服务端渲染SSR：核心技术实战解析与优化策略

发布于 2025-07-06 11:21:38

962

一、服务端渲染SSR简介

服务端渲染（Server-Side Rendering，SSR）是一种在服务器端生成完整HTML页面的技术。与传统的客户端渲染（Client-Side Rendering，CSR）相比，SSR将页面的渲染过程从客户端转移到服务器端，从而在服务器上完成HTML的生成，再将生成的HTML发送到客户端。Vue.js作为一款流行的前端框架，同样支持SSR，能够提供更好的首屏加载性能和SEO优化。

二、Vue.js SSR核心技术实战解析

2.1 项目搭建

创建项目目录：mkdir vue-ssr-demo
初始化项目：npm init -y

安装依赖：

npm install vue@next vue-router@4 @vue/server-renderer express
npm install -D @vitejs/plugin-vue vite webpack webpack-cli

2.2 服务器端渲染实现

创建服务器： “`javascript const express = require(‘express’); const { createSSRApp } = require(‘@vue/server-renderer’); const server = express();

server.get(‘*’, async (req, res) => {

 const app = createSSRApp({ template: `<div id="app"></div>`, data() { return { message: 'Hello, SSR!' }; }, render(h) { return h('div', [h('h1', this.message)]); } }); const html = await app.renderToString(); res.send(` <!DOCTYPE html> <html lang="en"> <head><title>Hello SSR</title></head> <body>${html}</body> </html> `);

});

server.listen(8080);

2. **客户端激活**： ```javascript // entry-client.js import { createApp } from './app'; const app = createApp(); app.mount('#app');

2.3 路由配置

安装Vue Router：
```
npm install vue-router@4
```
配置路由： “`javascript // router/index.js import { createRouter, createWebHistory } from ‘vue-router’; import Home from ‘../views/Home.vue’;

const routes = [

 { path: '/', component: Home }

];

const router = createRouter({

 history: createWebHistory(), routes

});

export default router;

3. **集成路由**： ```javascript // main.js import { createSSRApp } from '@vue/server-renderer'; import App from './App.vue'; import router from './router'; const app = createSSRApp(App); app.use(router); export default app;

三、Vue.js SSR优化策略

3.1 代码分割

安装Vue Router的代码分割插件：
```
npm install vue-router@4@next
```

配置路由懒加载：

// router/index.js
const routes = [ { path: '/', component: () => import('../views/Home.vue') }, { path: '/about', component: () => import('../views/About.vue') }
];

3.2 预渲染

使用Nuxt.js框架：
```
npx create-nuxt-app my-nuxt-app
```

配置Nuxt.js：

// nuxt.config.js
export default { ssr: true, render: { static: false }
};

3.3 缓存

使用HTTP缓存： “`javascript const express = require(‘express’); const app = express();

app.use(express.static(‘public’, {

 maxAge: '1d'

}));

app.listen(8080);

2. **使用服务端缓存**： ```javascript const express = require('express'); const app = express(); const cache = {}; app.get('*', (req, res) => { const key = req.url; if (cache[key]) { return res.send(cache[key]); } const html = `<!DOCTYPE html> <html lang="en"> <head><title>Hello SSR</title></head> <body>Hello SSR</body> </html>`; cache[key] = html; res.send(html); }); app.listen(8080);

四、总结

Vue.js服务端渲染SSR是一种提高首屏加载性能和SEO优化的重要技术。通过本文的实战解析和优化策略，开发者可以更好地理解和应用Vue.js的SSR功能，从而提升应用性能和用户体验。

一个月内的热帖推荐