SSR（Server-Side Rendering）即服务端渲染，是指在服务器端将Vue组件渲染成HTML字符串，然后将其发送到客户端。与传统的客户端渲染（CSR）不同，SSR在服务器端生成完整的HTML页面，客户端接收到HTML后可以直接显示，而不需要等待JavaScript加载和执行。
Vue SSR的基本原理是将Vue组件在服务器端渲染成HTML字符串，然后将该字符串发送到客户端。客户端接收到HTML后，Vue会将其“激活”，即将静态HTML转换为动态的Vue组件。
首先，我们需要搭建一个支持SSR的Vue项目环境。可以使用Vue CLI来创建一个新的Vue项目，并安装vue-server-renderer插件。
vue create ssr-demo cd ssr-demo npm install vue-server-renderer --save 在服务器端，我们需要创建一个Vue实例，并将其渲染成HTML字符串。
// server.js const Vue = require('vue'); const renderer = require('vue-server-renderer').createRenderer(); const app = new Vue({ template: `<div>Hello, SSR!</div>` }); renderer.renderToString(app, (err, html) => { if (err) throw err; console.log(html); }); 接下来，我们需要编写一个简单的HTTP服务器，将Vue实例渲染的HTML字符串发送到客户端。
// server.js const http = require('http'); const Vue = require('vue'); const renderer = require('vue-server-renderer').createRenderer(); const app = new Vue({ template: `<div>Hello, SSR!</div>` }); const server = http.createServer((req, res) => { renderer.renderToString(app, (err, html) => { if (err) { res.statusCode = 500; res.end('Internal Server Error'); return; } res.end(` <!DOCTYPE html> <html lang="en"> <head><title>SSR Demo</title></head> <body>${html}</body> </html> `); }); }); server.listen(3000, () => { console.log('Server is running on port 3000'); }); 在客户端，我们需要将服务器端渲染的HTML“激活”，即将静态HTML转换为动态的Vue组件。
// client.js import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); 在SSR中，数据预取是一个重要的环节。我们需要在服务器端获取数据，并将其注入到Vue实例中，以便在客户端渲染时使用。
// server.js const http = require('http'); const Vue = require('vue'); const renderer = require('vue-server-renderer').createRenderer(); const app = new Vue({ data: { message: 'Hello, SSR!' }, template: `<div>{{ message }}</div>` }); const server = http.createServer((req, res) => { renderer.renderToString(app, (err, html) => { if (err) { res.statusCode = 500; res.end('Internal Server Error'); return; } res.end(` <!DOCTYPE html> <html lang="en"> <head><title>SSR Demo</title></head> <body>${html}</body> </html> `); }); }); server.listen(3000, () => { console.log('Server is running on port 3000'); }); 在SSR中，路由和状态管理也是需要考虑的问题。我们可以使用vue-router和vuex来处理路由和状态管理。
// router.js import Vue from 'vue'; import Router from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(Router); export function createRouter() { return new Router({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }); } // store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export function createStore() { return new Vuex.Store({ state: { message: 'Hello, SSR!' }, mutations: { setMessage(state, message) { state.message = message; } }, actions: { fetchMessage({ commit }) { return new Promise(resolve => { setTimeout(() => { commit('setMessage', 'Fetched Message'); resolve(); }, 1000); }); } } }); } 为了减少服务器端的渲染压力，我们可以使用缓存策略来缓存已经渲染的HTML页面。
// server.js const http = require('http'); const Vue = require('vue'); const renderer = require('vue-server-renderer').createRenderer(); const LRU = require('lru-cache'); const cache = new LRU({ max: 100, maxAge: 1000 * 60 * 60 // 1 hour }); const app = new Vue({ data: { message: 'Hello, SSR!' }, template: `<div>{{ message }}</div>` }); const server = http.createServer((req, res) => { const cachedHtml = cache.get(req.url); if (cachedHtml) { res.end(cachedHtml); return; } renderer.renderToString(app, (err, html) => { if (err) { res.statusCode = 500; res.end('Internal Server Error'); return; } const fullHtml = ` <!DOCTYPE html> <html lang="en"> <head><title>SSR Demo</title></head> <body>${html}</body> </html> `; cache.set(req.url, fullHtml); res.end(fullHtml); }); }); server.listen(3000, () => { console.log('Server is running on port 3000'); }); 为了减少客户端加载的JavaScript文件大小，我们可以使用代码分割技术，将代码分割成多个小块，按需加载。
// router.js import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export function createRouter() { return new Router({ mode: 'history', routes: [ { path: '/', component: () => import('./components/Home.vue') }, { path: '/about', component: () => import('./components/About.vue') } ] }); } 为了监控SSR的性能，我们可以使用一些性能监控工具，如Lighthouse、Web Vitals等。
// server.js const http = require('http'); const Vue = require('vue'); const renderer = require('vue-server-renderer').createRenderer(); const app = new Vue({ data: { message: 'Hello, SSR!' }, template: `<div>{{ message }}</div>` }); const server = http.createServer((req, res) => { const start = Date.now(); renderer.renderToString(app, (err, html) => { if (err) { res.statusCode = 500; res.end('Internal Server Error'); return; } const end = Date.now(); console.log(`Render time: ${end - start}ms`); res.end(` <!DOCTYPE html> <html lang="en"> <head><title>SSR Demo</title></head> <body>${html}</body> </html> `); }); }); server.listen(3000, () => { console.log('Server is running on port 3000'); }); SSR可以解决大部分SEO问题，但在某些情况下，仍然需要手动优化SEO。例如，可以使用vue-meta插件来动态设置页面的meta标签。
// main.js import Vue from 'vue'; import Meta from 'vue-meta'; Vue.use(Meta); new Vue({ el: '#app', render: h => h(App) }); // App.vue <template> <div> <h1>{{ title }}</h1> <p>{{ description }}</p> </div> </template> <script> export default { metaInfo: { title: 'SSR Demo', meta: [ { name: 'description', content: 'This is a demo of SSR with Vue.js' } ] } } </script> 虽然SSR可以加快首屏加载速度，但在某些情况下，仍然需要优化首屏加载。例如，可以使用preload和prefetch来预加载关键资源。
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <title>SSR Demo</title> <link rel="preload" href="/static/js/main.js" as="script"> <link rel="prefetch" href="/static/js/about.js"> </head> <body> <div id="app"></div> <script src="/static/js/main.js"></script> </body> </html> 在SSR中，服务器端和客户端的数据同步是一个常见问题。我们可以使用vuex来管理状态，并在服务器端和客户端之间同步数据。
// store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export function createStore() { return new Vuex.Store({ state: { message: 'Hello, SSR!' }, mutations: { setMessage(state, message) { state.message = message; } }, actions: { fetchMessage({ commit }) { return new Promise(resolve => { setTimeout(() => { commit('setMessage', 'Fetched Message'); resolve(); }, 1000); }); } } }); } // server.js const http = require('http'); const Vue = require('vue'); const renderer = require('vue-server-renderer').createRenderer(); const createStore = require('./store').createStore; const app = new Vue({ store: createStore(), template: `<div>{{ $store.state.message }}</div>` }); const server = http.createServer((req, res) => { app.$store.dispatch('fetchMessage').then(() => { renderer.renderToString(app, (err, html) => { if (err) { res.statusCode = 500; res.end('Internal Server Error'); return; } res.end(` <!DOCTYPE html> <html lang="en"> <head><title>SSR Demo</title></head> <body>${html}</body> </html> `); }); }); }); server.listen(3000, () => { console.log('Server is running on port 3000'); }); SSR服务端渲染在Vue中的应用可以显著提升SEO效果和首屏加载速度，但同时也带来了服务器压力增加和开发复杂度提升的问题。通过合理的优化策略和解决方案，我们可以在保证性能的同时，充分利用SSR的优势。希望本文能帮助你更好地理解和应用Vue SSR。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
