首先了解一下SSR是什么
客户端渲染：浏览器加载js文件后，通过js的执行补充页面内容。
此处以vue为例作为演示。
我们新建一个vue项目，运行并打开项目，查看网页源代码
<html>
<head>
...
</head>
<body>
<noscript>
...
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
可以发现，浏览器得到的body标签中并没有我们想要展示的内容，其实页面的内容是通过js代码的执行来加载的， 而对于服务器来讲并没有html文件，只是一个对应HTML内容的字符串而已，所以爬虫是不会加载和执行js代码的，这对SEO很不友好
服务端渲染：服务器在返回html前，对html字符串进行处理，使返回的内容包含SEO所需内容，这样爬虫就可以爬取到我们页面中的内容了。
此处以nodejs为例解析服务器返回页面的过程
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SSR解析</title>
</head>
<body>
<div>姓名：苦舟</div>
</body>
</html>
// index.js
// 此处引入node核心模块，如不理解请参阅相关文档
const http = require('http');
const fs = require('fs');
const server = http.createServer();
server.on('request', (res, req) => {
// 读取index.html得到相关信息，对应api可参阅https://nodejs.org/dist/latest-v10.x/docs/api/fs.html
fs.readFile('./index.html', (error, data) => {
if (error) {
req.end('server error');
return;
}
const html = data.toString();
req.end(html);
})
})
server.listen(3000);
使用node运行index.js并访问http://127.0.0.1:3000可得到如下结果
到这里我们已经可以通过url访问到index.html，不过只是静态页面，接下来我们为它添加动态数据
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 这里我们采用{{}}作为演示 -->
<title>{{title}}</title>
</head>
<body>
<div>姓名：{{name}}</div>
<div>年龄：{{age}}</div>
</body>
</html>
此时访问http://127.0.0.1:3000将得到如下结果
我们看到浏览器原样解析了我们的代码，所以我们要在服务器返回html字符串之前对html字符串进行处理，使之成为我们想要的内容
// index.js
// 此处引入node核心模块，如不理解请参阅相关文档
const http = require('http');
const fs = require('fs');
const server = http.createServer();
server.on('request', (res, req) => {
// 读取index.html得到相关信息，对应api可参阅https://nodejs.org/dist/latest-v10.x/docs/api/fs.html
fs.readFile('./index.html', (error, data) => {
if (error) {
req.end('server error');
return;
}
// 要对值进行设置 cont -> let
let html = data.toString();
const info = {
title: '了解SSR原理',
name: '苦舟',
age: 18
}
html = html.replace(`{{title}}`, info.title).replace(`{{name}}`, info.name).replace(`{{age}}`, info.age);
req.end(html);
})
})
server.listen(3000);
重启node并刷新浏览器，此时浏览器显示内容
到这里我们已经对服务端渲染有了一定的了解。 小白第一次发文章，很激动，很紧张，可能写的并不是很清晰，望谅解，如发现错误，请各位大神指出，我会在看到的第一时间改正，以免误导大家。
