服务端渲染 ｜ 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
服务端渲染 vs 客户端渲染
客户端渲染(CSR)
概念
在客户端渲染模式下，服务器会把需要渲染的静态文件给客户端，客户端拿到静态文件后，运行其中包含的JS脚本，根据JS运行结果，生成响应的DOM，然后进行界面渲染
优缺点
- 优点：网络传输数据量小、减少了服务器的压力、前后端分离、局部刷新，无需每次请求完整页面、交互好可实现各种效果
- 缺点：不利于SEO、爬虫看不到完整的程序源码、首屏渲染慢（渲染前需要下载一堆js和css等）
服务端渲染(SSR)
概念
服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码
优缺点
- 优点：首屏渲染快、利于SEO、可以生成缓存片段，生成静态化文件、节能
- 缺点：用户体验较差、不容易维护，通常前端改了部分html或者css，后端也需要修改
解决的问题
简单来说就两点：
- 首屏加载快相比于加载单页应用，我只需要加载当前页面的内容，而不需要像 React 或者 Vue 一样加载全部的 js 文件
- SEO 优化对于单页应用，搜索引擎并不能收录到 ajax 爬取数据之后然后再动态 js 渲染出来的页面
什么时候使用
- 搜索框（SEO）
- 首屏加载（减少白屏时间）
- 项目路由的搭建
服务端渲染小案例
生成一个node项目
npm init -y
安装 express
npm install express --save
服务端渲染代码
// app.js
const express = require('express')
const app = express()
const port = 3000
// 当路径为跟路径,返回完整的html片段
app.get('/', (req, res) => res.send(`
<html>
<body>
<h1>hi,hello</h1>
</body>
</html>
`))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
运行查看效果
node app.js
打开浏览器
http://localhost:3000
