文章内容输出来源：拉勾教育前端高薪训练营
SPA单页面应用
-
优点
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
-
缺点
- 需等待客户端js解析执行完，造成首屏渲染时间长
- 单页面的html是没有内容的，不利于SEO
传统服务端渲染
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传统的服务端渲染</title>
</head>
<body>
<h1>传统的服务端渲染</h1>
<h2>{{ title }}</h2>
<ul>
{{ each posts }}
<li>{{ $value.title }}</li>
{{ /each }}
</ul>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统的服务端渲染</title>
</head>
<body>
<h1>传统的服务端渲染示例</h1>
<ul>
<a href="/">Home</a>
<a href="/about">About</a>
</ul>
<h2>About 页面</h2>
</body>
</html>
data.json
{
"posts": [
{
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}
],
"title": "传统渲染"
}
index.js
const express = require('express')
const fs = require('fs')
const template = require('art-template')
const app = express()
app.get('/', (req, res) => {
// 1. 获取页面模板
const templateStr = fs.readFileSync('./index.html', 'utf-8')
// 2. 获取数据
const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
// 3. 渲染：数据 + 模板 = 最终结果
const html = template.render(templateStr, data)
// 4. 把渲染结果发送给客户端
res.send(html)
})
app.get('/about', (req, res) => {
res.end(fs.readFileSync('./about.html'))
})
app.listen(3000, () => console.log('running...'))
传统服务端在网页越来越复杂的情况下，存在很多缺点
- 前后端代码完全耦合在一起，不利于开发和维护
- 前端没有足够发挥空间
- 服务端压力大
- 用户体验一般
客户端渲染
后端负责处理数据接口，前端负责将接口数据渲染到页面中，前端不受限于后端
缺点：
- 首屏渲染慢，需要经过三次请求，页面请求=>js请求=>数据请求
- js执行渲染前，body内没有html元素，不利于SEO
同构渲染
- 通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题
- 通过客户端渲染接管页面内容交互得到更好的用户体验
- 这种方式通常称之为现代化的服务端渲染，也叫同构渲染
- 这种方式构建的应用称之为服务端渲染应用或者是同构应用
同构渲染的缺点：
开发条件有限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用
- 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
- 不能在服务端渲染期间操作DOM
- 某些代码操作需要区分运行环境
涉及构建喝部署的要求更多
| - | 客户端渲染 | 同构渲染 |
|---|---|---|
| 构建 | 仅构建客户端应用即可 | 需要构建两个端 |
| 部署 | 可以部署在任意Web服务器中 | 只能部署在Node.js Server |
更多的服务端负载
- 在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器，需要大量占用CPU资源
- 如果应用在高流量环境下使用，需要准备相应的服务器负载
- 需要更多的服务端渲染优化工作处理
tips：当需要首屏渲染速度或者SEO时建议使用服务端渲染
Vue同构渲染库——Nuxt.js
- 一个基于Vue.js生态的第三方开源服务端渲染应用框架
- 它可以帮我们轻松的使用Vue.js技术栈构建同构应用
Nuxt.js的具体使用查看官网文档
服务器部署
手动部署
- 连接到服务器
$ ssh root@106.75.12.171
- 创建或切换到项目目录
$ ## mkdir project
$ cd project
- 获取项目路径
$ pwd
$ ## /root/project
- 新建一个终端窗口使用scp上传工程包
$ scp project.zip root@{你的服务器外网ip地址}:{你的服务器工程文件路径地址}
$ ## scp project.zip root@10.0.11.222:/root/project
- 服务器端解压项目包
$ unzip project.zip
- 安装项目依赖
$ yarn install
or
$ npm i
- 启动项目
$ yarn start
or
$ npm start
此方法会一直占用命令行窗口，可使用pm2来解决
使用pm2管理启动服务
- 安装pm2
$ npm install --global pm2
- 启动服务
$ pm2 start npm -- start
$ ## pm2 list 查看应用列表
$ ## pm2 start 启动应用
$ ## pm2 stop 停止应用
$ ## pm2 reload 重载应用
$ ## pm2 restart 重启应用
$ ## pm2 delete 删除应用
使用github自动部署
常用的CI/CD服务
- Jenkins
- Gitlab CI
- GitHub Actions
- Travis CI
- Circle CI
编辑.github / workflows / main.yml 文件
新建pm2.config.json
{
"apps": [
{
"name": "RealWorld",
"script": "npm",
"args": "start"
}
]
}
提交测试
git add .
git commit -m "发布部署-测试"
git tag v0.1.0
git tag
git push origin v0.1.0
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
