一、什么是服务端渲染
咱先说说啥是服务端渲染。平常我们用的传统前端开发，一般是在浏览器里把页面渲染出来。比如说你打开一个网页，浏览器会先加载 HTML、CSS、JavaScript 文件，然后再根据这些文件把页面展示出来。但服务端渲染呢，是服务器这边就把页面给渲染好了，直接把渲染好的 HTML 发给浏览器，浏览器拿到就能直接显示。
举个例子，假如你要做一个博客网站。传统前端开发可能是这样：
// 技术栈：Javascript
// 创建一个空的 HTML 页面
const html = '<!DOCTYPE html><html><head><title>My Blog</title></head><body></body></html>';
// 在浏览器中通过 JavaScript 动态添加内容
document.body.innerHTML = '<h1>Welcome to my blog!</h1>';
而服务端渲染呢，服务器这边就把内容都弄好了：
// 技术栈：Javascript
// 服务端生成完整的 HTML 页面
const html = '<!DOCTYPE html><html><head><title>My Blog</title></head><body><h1>Welcome to my blog!</h1></body></html>';
// 直接返回给浏览器
res.send(html);
二、为什么需要服务端渲染
解决 SEO 问题
搜索引擎爬虫在抓取网页内容的时候，很多时候只看 HTML 代码。如果是传统的前端渲染，爬虫可能只能抓到一个空空的 HTML 架子，里面的内容都是通过 JavaScript 动态生成的，这样搜索引擎就很难理解页面的内容，不利于网站在搜索引擎上的排名。而服务端渲染呢，服务器返回的是完整的 HTML 页面，搜索引擎爬虫能直接抓取到页面的内容，这样网站在搜索引擎上的曝光率就会提高。
比如说你做了一个电商网站，里面有很多商品信息。如果用传统前端渲染，搜索引擎可能不知道你卖的是啥商品。但用服务端渲染，搜索引擎就能清楚地看到商品的名称、描述等信息，从而把你的网站排在更靠前的位置。
解决首屏加载慢问题
传统前端渲染需要先加载 HTML、CSS、JavaScript 文件，然后再在浏览器里执行 JavaScript 代码来渲染页面，这个过程可能会比较慢。尤其是在网络不好的情况下，用户可能要等很久才能看到页面内容。而服务端渲染直接把渲染好的 HTML 发给浏览器，浏览器可以直接显示，大大缩短了首屏加载时间。
就像你打开一个新闻网站，用传统前端渲染可能要等好几秒才能看到新闻内容，而用服务端渲染，可能瞬间就能看到新闻标题和正文。
三、Vue SSR 的核心原理
Vue SSR 的核心原理就是在服务器端把 Vue 组件渲染成 HTML 字符串，然后把这个字符串返回给浏览器。具体来说，它有以下几个步骤：
1. 创建 Vue 实例
在服务器端创建一个 Vue 实例，就像在客户端创建一样。
// 技术栈：Javascript
const Vue = require('vue');
// 创建一个 Vue 实例
const app = new Vue({
template: '<div>Hello, Vue SSR!</div>'
});
2. 渲染 Vue 实例为 HTML 字符串
使用 Vue 的 renderToString 方法把 Vue 实例渲染成 HTML 字符串。
// 技术栈：Javascript
const renderer = require('vue-server-renderer').createRenderer();
renderer.renderToString(app, (err, html) => {
if (err) {
console.error(err);
return;
}
console.log(html);
});
3. 将 HTML 字符串返回给浏览器
把渲染好的 HTML 字符串返回给浏览器，浏览器直接显示。
// 技术栈：Javascript
const express = require('express');
const app = express();
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
app.get('/', (req, res) => {
const vueApp = new Vue({
template: '<div>Hello, Vue SSR!</div>'
});
renderer.renderToString(vueApp, (err, html) => {
if (err) {
res.status(500).send('Internal Server Error');
return;
}
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR Example</title>
</head>
<body>
${html}
<script src="/client.js"></script>
</body>
</html>
`);
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
四、Vue SSR 的实现步骤
1. 初始化项目
首先，我们要创建一个新的 Vue 项目。可以使用 Vue CLI 来创建：
# 创建一个新的 Vue 项目
vue create vue-ssr-example
cd vue-ssr-example
2. 安装依赖
安装 Vue SSR 相关的依赖：
# 安装 vue-server-renderer
npm install vue-server-renderer
3. 创建服务器端代码
创建一个服务器端的入口文件，比如 server.js：
// 技术栈：Javascript
const express = require('express');
const app = express();
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
app.get('/', (req, res) => {
const vueApp = new Vue({
template: '<div>Hello, Vue SSR!</div>'
});
renderer.renderToString(vueApp, (err, html) => {
if (err) {
res.status(500).send('Internal Server Error');
return;
}
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR Example</title>
</head>
<body>
${html}
<script src="/client.js"></script>
</body>
</html>
`);
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
4. 创建客户端代码
创建一个客户端的入口文件，比如 client.js：
// 技术栈：Javascript
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
5. 构建和运行项目
使用 Webpack 来构建项目：
# 安装 Webpack 和相关加载器
npm install webpack webpack-cli vue-loader vue-template-compiler --save-dev
# 配置 Webpack
# 创建 webpack.server.config.js 和 webpack.client.config.js
# 运行构建命令
npm run build
# 启动服务器
node server.js
五、应用场景
电商网站
电商网站需要展示大量的商品信息，而且对 SEO 要求比较高。使用 Vue SSR 可以让搜索引擎更好地抓取商品信息，提高网站在搜索引擎上的排名。同时，也能缩短首屏加载时间，提升用户体验。
新闻网站
新闻网站需要及时地把新闻内容展示给用户，首屏加载速度非常重要。Vue SSR 可以直接把渲染好的新闻页面返回给浏览器，让用户更快地看到新闻内容。
企业官网
企业官网通常需要向用户展示企业的形象和产品信息，对 SEO 也有一定的要求。Vue SSR 可以帮助企业官网在搜索引擎上获得更好的排名，吸引更多的潜在客户。
六、技术优缺点
优点
- SEO 友好：服务器返回的是完整的 HTML 页面，搜索引擎爬虫能直接抓取到页面内容，有利于网站在搜索引擎上的排名。
- 首屏加载快：直接把渲染好的 HTML 发给浏览器，浏览器可以直接显示，缩短了首屏加载时间。
- 用户体验好：用户可以更快地看到页面内容，减少等待时间，提升用户体验。
缺点
- 服务器压力大：服务器需要承担渲染页面的工作，会增加服务器的压力。
- 开发复杂度高：需要同时处理服务器端和客户端的代码，开发复杂度较高。
- 调试困难：服务器端渲染的调试相对复杂，需要掌握一些特定的调试技巧。
七、注意事项
避免使用浏览器特定的 API
在服务器端渲染时，有些浏览器特定的 API 是不能使用的，比如 window、document 等。如果在代码中使用了这些 API，可能会导致服务器端渲染出错。
处理异步数据
在服务器端渲染时，需要处理好异步数据的获取。如果异步数据没有正确处理，可能会导致页面渲染不完整。
缓存策略
为了减轻服务器的压力，可以使用缓存策略。比如对一些不经常变化的页面进行缓存，下次请求时直接返回缓存的内容。
八、文章总结
Vue SSR 是一种非常有用的技术，它可以解决 SEO 和首屏加载慢的问题。通过在服务器端把 Vue 组件渲染成 HTML 字符串，然后返回给浏览器，大大提高了网站在搜索引擎上的排名和用户体验。不过，使用 Vue SSR 也有一些缺点，比如服务器压力大、开发复杂度高、调试困难等。在实际应用中，我们需要根据项目的需求和特点来选择是否使用 Vue SSR。同时，要注意避免使用浏览器特定的 API，处理好异步数据，采用合适的缓存策略，以提高项目的性能和稳定性。
评论