服务端渲染和客户端渲染以及服务器部署
2024-05-14 08:17:38
文章内容输出来源：拉勾教育前端高薪训练营
SPA单页面应用
优点
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
缺点
- 需等待客户端js解析执行完，造成首屏渲染时间长
- 单页面的html是没有内容的，不利于SEO
传统服务端渲染
#mermaid-svg-FSLn5FPdG5NoLblL .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-FSLn5FPdG5NoLblL .label text{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .node rect,#mermaid-svg-FSLn5FPdG5NoLblL .node circle,#mermaid-svg-FSLn5FPdG5NoLblL .node ellipse,#mermaid-svg-FSLn5FPdG5NoLblL .node polygon,#mermaid-svg-FSLn5FPdG5NoLblL .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-FSLn5FPdG5NoLblL .node .label{text-align:center;fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .node.clickable{cursor:pointer}#mermaid-svg-FSLn5FPdG5NoLblL .arrowheadPath{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-FSLn5FPdG5NoLblL .flowchart-link{stroke:#333;fill:none}#mermaid-svg-FSLn5FPdG5NoLblL .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-FSLn5FPdG5NoLblL .edgeLabel rect{opacity:0.9}#mermaid-svg-FSLn5FPdG5NoLblL .edgeLabel span{color:#333}#mermaid-svg-FSLn5FPdG5NoLblL .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-FSLn5FPdG5NoLblL .cluster text{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-FSLn5FPdG5NoLblL .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-FSLn5FPdG5NoLblL text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-FSLn5FPdG5NoLblL .actor-line{stroke:grey}#mermaid-svg-FSLn5FPdG5NoLblL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-FSLn5FPdG5NoLblL .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-FSLn5FPdG5NoLblL #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-FSLn5FPdG5NoLblL .sequenceNumber{fill:#fff}#mermaid-svg-FSLn5FPdG5NoLblL #sequencenumber{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL #crosshead path{fill:#333;stroke:#333}#mermaid-svg-FSLn5FPdG5NoLblL .messageText{fill:#333;stroke:#333}#mermaid-svg-FSLn5FPdG5NoLblL .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-FSLn5FPdG5NoLblL .labelText,#mermaid-svg-FSLn5FPdG5NoLblL .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-FSLn5FPdG5NoLblL .loopText,#mermaid-svg-FSLn5FPdG5NoLblL .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-FSLn5FPdG5NoLblL .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-FSLn5FPdG5NoLblL .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-FSLn5FPdG5NoLblL .noteText,#mermaid-svg-FSLn5FPdG5NoLblL .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-FSLn5FPdG5NoLblL .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-FSLn5FPdG5NoLblL .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-FSLn5FPdG5NoLblL .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-FSLn5FPdG5NoLblL .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .section{stroke:none;opacity:0.2}#mermaid-svg-FSLn5FPdG5NoLblL .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-FSLn5FPdG5NoLblL .section2{fill:#fff400}#mermaid-svg-FSLn5FPdG5NoLblL .section1,#mermaid-svg-FSLn5FPdG5NoLblL .section3{fill:#fff;opacity:0.2}#mermaid-svg-FSLn5FPdG5NoLblL .sectionTitle0{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .sectionTitle1{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .sectionTitle2{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .sectionTitle3{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-FSLn5FPdG5NoLblL .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .grid path{stroke-width:0}#mermaid-svg-FSLn5FPdG5NoLblL .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-FSLn5FPdG5NoLblL .task{stroke-width:2}#mermaid-svg-FSLn5FPdG5NoLblL .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .taskText:not([font-size]){font-size:11px}#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-FSLn5FPdG5NoLblL .task.clickable{cursor:pointer}#mermaid-svg-FSLn5FPdG5NoLblL .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-FSLn5FPdG5NoLblL .taskText0,#mermaid-svg-FSLn5FPdG5NoLblL .taskText1,#mermaid-svg-FSLn5FPdG5NoLblL .taskText2,#mermaid-svg-FSLn5FPdG5NoLblL .taskText3{fill:#fff}#mermaid-svg-FSLn5FPdG5NoLblL .task0,#mermaid-svg-FSLn5FPdG5NoLblL .task1,#mermaid-svg-FSLn5FPdG5NoLblL .task2,#mermaid-svg-FSLn5FPdG5NoLblL .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutside0,#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutside2{fill:#000}#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutside1,#mermaid-svg-FSLn5FPdG5NoLblL .taskTextOutside3{fill:#000}#mermaid-svg-FSLn5FPdG5NoLblL .active0,#mermaid-svg-FSLn5FPdG5NoLblL .active1,#mermaid-svg-FSLn5FPdG5NoLblL .active2,#mermaid-svg-FSLn5FPdG5NoLblL .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-FSLn5FPdG5NoLblL .activeText0,#mermaid-svg-FSLn5FPdG5NoLblL .activeText1,#mermaid-svg-FSLn5FPdG5NoLblL .activeText2,#mermaid-svg-FSLn5FPdG5NoLblL .activeText3{fill:#000 !important}#mermaid-svg-FSLn5FPdG5NoLblL .done0,#mermaid-svg-FSLn5FPdG5NoLblL .done1,#mermaid-svg-FSLn5FPdG5NoLblL .done2,#mermaid-svg-FSLn5FPdG5NoLblL .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-FSLn5FPdG5NoLblL .doneText0,#mermaid-svg-FSLn5FPdG5NoLblL .doneText1,#mermaid-svg-FSLn5FPdG5NoLblL .doneText2,#mermaid-svg-FSLn5FPdG5NoLblL .doneText3{fill:#000 !important}#mermaid-svg-FSLn5FPdG5NoLblL .crit0,#mermaid-svg-FSLn5FPdG5NoLblL .crit1,#mermaid-svg-FSLn5FPdG5NoLblL .crit2,#mermaid-svg-FSLn5FPdG5NoLblL .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-FSLn5FPdG5NoLblL .activeCrit0,#mermaid-svg-FSLn5FPdG5NoLblL .activeCrit1,#mermaid-svg-FSLn5FPdG5NoLblL .activeCrit2,#mermaid-svg-FSLn5FPdG5NoLblL .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-FSLn5FPdG5NoLblL .doneCrit0,#mermaid-svg-FSLn5FPdG5NoLblL .doneCrit1,#mermaid-svg-FSLn5FPdG5NoLblL .doneCrit2,#mermaid-svg-FSLn5FPdG5NoLblL .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-FSLn5FPdG5NoLblL .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-FSLn5FPdG5NoLblL .milestoneText{font-style:italic}#mermaid-svg-FSLn5FPdG5NoLblL .doneCritText0,#mermaid-svg-FSLn5FPdG5NoLblL .doneCritText1,#mermaid-svg-FSLn5FPdG5NoLblL .doneCritText2,#mermaid-svg-FSLn5FPdG5NoLblL .doneCritText3{fill:#000 !important}#mermaid-svg-FSLn5FPdG5NoLblL .activeCritText0,#mermaid-svg-FSLn5FPdG5NoLblL .activeCritText1,#mermaid-svg-FSLn5FPdG5NoLblL .activeCritText2,#mermaid-svg-FSLn5FPdG5NoLblL .activeCritText3{fill:#000 !important}#mermaid-svg-FSLn5FPdG5NoLblL .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-FSLn5FPdG5NoLblL g.classGroup text .title{font-weight:bolder}#mermaid-svg-FSLn5FPdG5NoLblL g.clickable{cursor:pointer}#mermaid-svg-FSLn5FPdG5NoLblL g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-FSLn5FPdG5NoLblL g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-FSLn5FPdG5NoLblL .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-FSLn5FPdG5NoLblL .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-FSLn5FPdG5NoLblL .dashed-line{stroke-dasharray:3}#mermaid-svg-FSLn5FPdG5NoLblL #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL .commit-id,#mermaid-svg-FSLn5FPdG5NoLblL .commit-msg,#mermaid-svg-FSLn5FPdG5NoLblL .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-FSLn5FPdG5NoLblL g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-FSLn5FPdG5NoLblL g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-FSLn5FPdG5NoLblL g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-FSLn5FPdG5NoLblL .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-FSLn5FPdG5NoLblL .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-FSLn5FPdG5NoLblL .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-FSLn5FPdG5NoLblL .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-FSLn5FPdG5NoLblL .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-FSLn5FPdG5NoLblL .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-FSLn5FPdG5NoLblL .edgeLabel text{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-FSLn5FPdG5NoLblL .node circle.state-start{fill:black;stroke:black}#mermaid-svg-FSLn5FPdG5NoLblL .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-FSLn5FPdG5NoLblL #statediagram-barbEnd{fill:#9370db}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-state .divider{stroke:#9370db}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-FSLn5FPdG5NoLblL .note-edge{stroke-dasharray:5}#mermaid-svg-FSLn5FPdG5NoLblL .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-FSLn5FPdG5NoLblL .error-icon{fill:#522}#mermaid-svg-FSLn5FPdG5NoLblL .error-text{fill:#522;stroke:#522}#mermaid-svg-FSLn5FPdG5NoLblL .edge-thickness-normal{stroke-width:2px}#mermaid-svg-FSLn5FPdG5NoLblL .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-FSLn5FPdG5NoLblL .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-FSLn5FPdG5NoLblL .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-FSLn5FPdG5NoLblL .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-FSLn5FPdG5NoLblL .marker{fill:#333}#mermaid-svg-FSLn5FPdG5NoLblL .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-FSLn5FPdG5NoLblL {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端数据库1、请求一个地址2、查询页面所需数据3、返回数据4、将数据结合页面模板渲染成HTML5、返回HTML客户端服务端数据库
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
#mermaid-svg-nQ5txTgL3W86oytV .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-nQ5txTgL3W86oytV .label text{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .node rect,#mermaid-svg-nQ5txTgL3W86oytV .node circle,#mermaid-svg-nQ5txTgL3W86oytV .node ellipse,#mermaid-svg-nQ5txTgL3W86oytV .node polygon,#mermaid-svg-nQ5txTgL3W86oytV .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-nQ5txTgL3W86oytV .node .label{text-align:center;fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .node.clickable{cursor:pointer}#mermaid-svg-nQ5txTgL3W86oytV .arrowheadPath{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-nQ5txTgL3W86oytV .flowchart-link{stroke:#333;fill:none}#mermaid-svg-nQ5txTgL3W86oytV .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-nQ5txTgL3W86oytV .edgeLabel rect{opacity:0.9}#mermaid-svg-nQ5txTgL3W86oytV .edgeLabel span{color:#333}#mermaid-svg-nQ5txTgL3W86oytV .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-nQ5txTgL3W86oytV .cluster text{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-nQ5txTgL3W86oytV .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-nQ5txTgL3W86oytV text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-nQ5txTgL3W86oytV .actor-line{stroke:grey}#mermaid-svg-nQ5txTgL3W86oytV .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-nQ5txTgL3W86oytV .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-nQ5txTgL3W86oytV #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-nQ5txTgL3W86oytV .sequenceNumber{fill:#fff}#mermaid-svg-nQ5txTgL3W86oytV #sequencenumber{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV #crosshead path{fill:#333;stroke:#333}#mermaid-svg-nQ5txTgL3W86oytV .messageText{fill:#333;stroke:#333}#mermaid-svg-nQ5txTgL3W86oytV .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-nQ5txTgL3W86oytV .labelText,#mermaid-svg-nQ5txTgL3W86oytV .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-nQ5txTgL3W86oytV .loopText,#mermaid-svg-nQ5txTgL3W86oytV .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-nQ5txTgL3W86oytV .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-nQ5txTgL3W86oytV .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-nQ5txTgL3W86oytV .noteText,#mermaid-svg-nQ5txTgL3W86oytV .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-nQ5txTgL3W86oytV .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-nQ5txTgL3W86oytV .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-nQ5txTgL3W86oytV .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-nQ5txTgL3W86oytV .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .section{stroke:none;opacity:0.2}#mermaid-svg-nQ5txTgL3W86oytV .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-nQ5txTgL3W86oytV .section2{fill:#fff400}#mermaid-svg-nQ5txTgL3W86oytV .section1,#mermaid-svg-nQ5txTgL3W86oytV .section3{fill:#fff;opacity:0.2}#mermaid-svg-nQ5txTgL3W86oytV .sectionTitle0{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .sectionTitle1{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .sectionTitle2{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .sectionTitle3{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-nQ5txTgL3W86oytV .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .grid path{stroke-width:0}#mermaid-svg-nQ5txTgL3W86oytV .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-nQ5txTgL3W86oytV .task{stroke-width:2}#mermaid-svg-nQ5txTgL3W86oytV .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .taskText:not([font-size]){font-size:11px}#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-nQ5txTgL3W86oytV .task.clickable{cursor:pointer}#mermaid-svg-nQ5txTgL3W86oytV .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-nQ5txTgL3W86oytV .taskText0,#mermaid-svg-nQ5txTgL3W86oytV .taskText1,#mermaid-svg-nQ5txTgL3W86oytV .taskText2,#mermaid-svg-nQ5txTgL3W86oytV .taskText3{fill:#fff}#mermaid-svg-nQ5txTgL3W86oytV .task0,#mermaid-svg-nQ5txTgL3W86oytV .task1,#mermaid-svg-nQ5txTgL3W86oytV .task2,#mermaid-svg-nQ5txTgL3W86oytV .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutside0,#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutside2{fill:#000}#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutside1,#mermaid-svg-nQ5txTgL3W86oytV .taskTextOutside3{fill:#000}#mermaid-svg-nQ5txTgL3W86oytV .active0,#mermaid-svg-nQ5txTgL3W86oytV .active1,#mermaid-svg-nQ5txTgL3W86oytV .active2,#mermaid-svg-nQ5txTgL3W86oytV .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-nQ5txTgL3W86oytV .activeText0,#mermaid-svg-nQ5txTgL3W86oytV .activeText1,#mermaid-svg-nQ5txTgL3W86oytV .activeText2,#mermaid-svg-nQ5txTgL3W86oytV .activeText3{fill:#000 !important}#mermaid-svg-nQ5txTgL3W86oytV .done0,#mermaid-svg-nQ5txTgL3W86oytV .done1,#mermaid-svg-nQ5txTgL3W86oytV .done2,#mermaid-svg-nQ5txTgL3W86oytV .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-nQ5txTgL3W86oytV .doneText0,#mermaid-svg-nQ5txTgL3W86oytV .doneText1,#mermaid-svg-nQ5txTgL3W86oytV .doneText2,#mermaid-svg-nQ5txTgL3W86oytV .doneText3{fill:#000 !important}#mermaid-svg-nQ5txTgL3W86oytV .crit0,#mermaid-svg-nQ5txTgL3W86oytV .crit1,#mermaid-svg-nQ5txTgL3W86oytV .crit2,#mermaid-svg-nQ5txTgL3W86oytV .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-nQ5txTgL3W86oytV .activeCrit0,#mermaid-svg-nQ5txTgL3W86oytV .activeCrit1,#mermaid-svg-nQ5txTgL3W86oytV .activeCrit2,#mermaid-svg-nQ5txTgL3W86oytV .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-nQ5txTgL3W86oytV .doneCrit0,#mermaid-svg-nQ5txTgL3W86oytV .doneCrit1,#mermaid-svg-nQ5txTgL3W86oytV .doneCrit2,#mermaid-svg-nQ5txTgL3W86oytV .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-nQ5txTgL3W86oytV .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-nQ5txTgL3W86oytV .milestoneText{font-style:italic}#mermaid-svg-nQ5txTgL3W86oytV .doneCritText0,#mermaid-svg-nQ5txTgL3W86oytV .doneCritText1,#mermaid-svg-nQ5txTgL3W86oytV .doneCritText2,#mermaid-svg-nQ5txTgL3W86oytV .doneCritText3{fill:#000 !important}#mermaid-svg-nQ5txTgL3W86oytV .activeCritText0,#mermaid-svg-nQ5txTgL3W86oytV .activeCritText1,#mermaid-svg-nQ5txTgL3W86oytV .activeCritText2,#mermaid-svg-nQ5txTgL3W86oytV .activeCritText3{fill:#000 !important}#mermaid-svg-nQ5txTgL3W86oytV .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-nQ5txTgL3W86oytV g.classGroup text .title{font-weight:bolder}#mermaid-svg-nQ5txTgL3W86oytV g.clickable{cursor:pointer}#mermaid-svg-nQ5txTgL3W86oytV g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-nQ5txTgL3W86oytV g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-nQ5txTgL3W86oytV .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-nQ5txTgL3W86oytV .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-nQ5txTgL3W86oytV .dashed-line{stroke-dasharray:3}#mermaid-svg-nQ5txTgL3W86oytV #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV .commit-id,#mermaid-svg-nQ5txTgL3W86oytV .commit-msg,#mermaid-svg-nQ5txTgL3W86oytV .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-nQ5txTgL3W86oytV g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-nQ5txTgL3W86oytV g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-nQ5txTgL3W86oytV g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-nQ5txTgL3W86oytV .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-nQ5txTgL3W86oytV .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-nQ5txTgL3W86oytV .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-nQ5txTgL3W86oytV .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-nQ5txTgL3W86oytV .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-nQ5txTgL3W86oytV .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-nQ5txTgL3W86oytV .edgeLabel text{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-nQ5txTgL3W86oytV .node circle.state-start{fill:black;stroke:black}#mermaid-svg-nQ5txTgL3W86oytV .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-nQ5txTgL3W86oytV #statediagram-barbEnd{fill:#9370db}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-state .divider{stroke:#9370db}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-nQ5txTgL3W86oytV .note-edge{stroke-dasharray:5}#mermaid-svg-nQ5txTgL3W86oytV .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-nQ5txTgL3W86oytV .error-icon{fill:#522}#mermaid-svg-nQ5txTgL3W86oytV .error-text{fill:#522;stroke:#522}#mermaid-svg-nQ5txTgL3W86oytV .edge-thickness-normal{stroke-width:2px}#mermaid-svg-nQ5txTgL3W86oytV .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-nQ5txTgL3W86oytV .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-nQ5txTgL3W86oytV .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-nQ5txTgL3W86oytV .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-nQ5txTgL3W86oytV .marker{fill:#333}#mermaid-svg-nQ5txTgL3W86oytV .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-nQ5txTgL3W86oytV {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端数据库1、请求一个地址2、返回空白HTML3、Ajax请求数据4、查询获取数据5、返回数据6、返回数据7、动态渲染页面客户端服务端数据库
同构渲染
- 通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题
- 通过客户端渲染接管页面内容交互得到更好的用户体验
- 这种方式通常称之为现代化的服务端渲染，也叫同构渲染
- 这种方式构建的应用称之为服务端渲染应用或者是同构应用
同构渲染的缺点：
开发条件有限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用
- 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
- 不能在服务端渲染期间操作DOM
- 某些代码操作需要区分运行环境
涉及构建喝部署的要求更多
| - | 客户端渲染 | 同构渲染 |
|---|---|---|
| 构建 | 仅构建客户端应用即可 | 需要构建两个端 |
| 部署 | 可以部署在任意Web服务器中 | 只能部署在Node.js Server |
更多的服务端负载
- 在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器，需要大量占用CPU资源
- 如果应用在高流量环境下使用，需要准备相应的服务器负载
- 需要更多的服务端渲染优化工作处理
#mermaid-svg-sCtx9RHDxvMO0USL .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-sCtx9RHDxvMO0USL .label text{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .node rect,#mermaid-svg-sCtx9RHDxvMO0USL .node circle,#mermaid-svg-sCtx9RHDxvMO0USL .node ellipse,#mermaid-svg-sCtx9RHDxvMO0USL .node polygon,#mermaid-svg-sCtx9RHDxvMO0USL .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-sCtx9RHDxvMO0USL .node .label{text-align:center;fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .node.clickable{cursor:pointer}#mermaid-svg-sCtx9RHDxvMO0USL .arrowheadPath{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-sCtx9RHDxvMO0USL .flowchart-link{stroke:#333;fill:none}#mermaid-svg-sCtx9RHDxvMO0USL .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-sCtx9RHDxvMO0USL .edgeLabel rect{opacity:0.9}#mermaid-svg-sCtx9RHDxvMO0USL .edgeLabel span{color:#333}#mermaid-svg-sCtx9RHDxvMO0USL .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-sCtx9RHDxvMO0USL .cluster text{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-sCtx9RHDxvMO0USL .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-sCtx9RHDxvMO0USL text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-sCtx9RHDxvMO0USL .actor-line{stroke:grey}#mermaid-svg-sCtx9RHDxvMO0USL .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-sCtx9RHDxvMO0USL .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-sCtx9RHDxvMO0USL #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-sCtx9RHDxvMO0USL .sequenceNumber{fill:#fff}#mermaid-svg-sCtx9RHDxvMO0USL #sequencenumber{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL #crosshead path{fill:#333;stroke:#333}#mermaid-svg-sCtx9RHDxvMO0USL .messageText{fill:#333;stroke:#333}#mermaid-svg-sCtx9RHDxvMO0USL .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-sCtx9RHDxvMO0USL .labelText,#mermaid-svg-sCtx9RHDxvMO0USL .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-sCtx9RHDxvMO0USL .loopText,#mermaid-svg-sCtx9RHDxvMO0USL .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-sCtx9RHDxvMO0USL .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-sCtx9RHDxvMO0USL .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-sCtx9RHDxvMO0USL .noteText,#mermaid-svg-sCtx9RHDxvMO0USL .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-sCtx9RHDxvMO0USL .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-sCtx9RHDxvMO0USL .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-sCtx9RHDxvMO0USL .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-sCtx9RHDxvMO0USL .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .section{stroke:none;opacity:0.2}#mermaid-svg-sCtx9RHDxvMO0USL .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-sCtx9RHDxvMO0USL .section2{fill:#fff400}#mermaid-svg-sCtx9RHDxvMO0USL .section1,#mermaid-svg-sCtx9RHDxvMO0USL .section3{fill:#fff;opacity:0.2}#mermaid-svg-sCtx9RHDxvMO0USL .sectionTitle0{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .sectionTitle1{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .sectionTitle2{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .sectionTitle3{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-sCtx9RHDxvMO0USL .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .grid path{stroke-width:0}#mermaid-svg-sCtx9RHDxvMO0USL .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-sCtx9RHDxvMO0USL .task{stroke-width:2}#mermaid-svg-sCtx9RHDxvMO0USL .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .taskText:not([font-size]){font-size:11px}#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-sCtx9RHDxvMO0USL .task.clickable{cursor:pointer}#mermaid-svg-sCtx9RHDxvMO0USL .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-sCtx9RHDxvMO0USL .taskText0,#mermaid-svg-sCtx9RHDxvMO0USL .taskText1,#mermaid-svg-sCtx9RHDxvMO0USL .taskText2,#mermaid-svg-sCtx9RHDxvMO0USL .taskText3{fill:#fff}#mermaid-svg-sCtx9RHDxvMO0USL .task0,#mermaid-svg-sCtx9RHDxvMO0USL .task1,#mermaid-svg-sCtx9RHDxvMO0USL .task2,#mermaid-svg-sCtx9RHDxvMO0USL .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutside0,#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutside2{fill:#000}#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutside1,#mermaid-svg-sCtx9RHDxvMO0USL .taskTextOutside3{fill:#000}#mermaid-svg-sCtx9RHDxvMO0USL .active0,#mermaid-svg-sCtx9RHDxvMO0USL .active1,#mermaid-svg-sCtx9RHDxvMO0USL .active2,#mermaid-svg-sCtx9RHDxvMO0USL .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-sCtx9RHDxvMO0USL .activeText0,#mermaid-svg-sCtx9RHDxvMO0USL .activeText1,#mermaid-svg-sCtx9RHDxvMO0USL .activeText2,#mermaid-svg-sCtx9RHDxvMO0USL .activeText3{fill:#000 !important}#mermaid-svg-sCtx9RHDxvMO0USL .done0,#mermaid-svg-sCtx9RHDxvMO0USL .done1,#mermaid-svg-sCtx9RHDxvMO0USL .done2,#mermaid-svg-sCtx9RHDxvMO0USL .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-sCtx9RHDxvMO0USL .doneText0,#mermaid-svg-sCtx9RHDxvMO0USL .doneText1,#mermaid-svg-sCtx9RHDxvMO0USL .doneText2,#mermaid-svg-sCtx9RHDxvMO0USL .doneText3{fill:#000 !important}#mermaid-svg-sCtx9RHDxvMO0USL .crit0,#mermaid-svg-sCtx9RHDxvMO0USL .crit1,#mermaid-svg-sCtx9RHDxvMO0USL .crit2,#mermaid-svg-sCtx9RHDxvMO0USL .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-sCtx9RHDxvMO0USL .activeCrit0,#mermaid-svg-sCtx9RHDxvMO0USL .activeCrit1,#mermaid-svg-sCtx9RHDxvMO0USL .activeCrit2,#mermaid-svg-sCtx9RHDxvMO0USL .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-sCtx9RHDxvMO0USL .doneCrit0,#mermaid-svg-sCtx9RHDxvMO0USL .doneCrit1,#mermaid-svg-sCtx9RHDxvMO0USL .doneCrit2,#mermaid-svg-sCtx9RHDxvMO0USL .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-sCtx9RHDxvMO0USL .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-sCtx9RHDxvMO0USL .milestoneText{font-style:italic}#mermaid-svg-sCtx9RHDxvMO0USL .doneCritText0,#mermaid-svg-sCtx9RHDxvMO0USL .doneCritText1,#mermaid-svg-sCtx9RHDxvMO0USL .doneCritText2,#mermaid-svg-sCtx9RHDxvMO0USL .doneCritText3{fill:#000 !important}#mermaid-svg-sCtx9RHDxvMO0USL .activeCritText0,#mermaid-svg-sCtx9RHDxvMO0USL .activeCritText1,#mermaid-svg-sCtx9RHDxvMO0USL .activeCritText2,#mermaid-svg-sCtx9RHDxvMO0USL .activeCritText3{fill:#000 !important}#mermaid-svg-sCtx9RHDxvMO0USL .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-sCtx9RHDxvMO0USL g.classGroup text .title{font-weight:bolder}#mermaid-svg-sCtx9RHDxvMO0USL g.clickable{cursor:pointer}#mermaid-svg-sCtx9RHDxvMO0USL g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-sCtx9RHDxvMO0USL g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-sCtx9RHDxvMO0USL .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-sCtx9RHDxvMO0USL .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-sCtx9RHDxvMO0USL .dashed-line{stroke-dasharray:3}#mermaid-svg-sCtx9RHDxvMO0USL #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL .commit-id,#mermaid-svg-sCtx9RHDxvMO0USL .commit-msg,#mermaid-svg-sCtx9RHDxvMO0USL .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-sCtx9RHDxvMO0USL g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-sCtx9RHDxvMO0USL g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-sCtx9RHDxvMO0USL g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-sCtx9RHDxvMO0USL .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-sCtx9RHDxvMO0USL .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-sCtx9RHDxvMO0USL .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-sCtx9RHDxvMO0USL .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-sCtx9RHDxvMO0USL .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-sCtx9RHDxvMO0USL .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-sCtx9RHDxvMO0USL .edgeLabel text{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-sCtx9RHDxvMO0USL .node circle.state-start{fill:black;stroke:black}#mermaid-svg-sCtx9RHDxvMO0USL .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-sCtx9RHDxvMO0USL #statediagram-barbEnd{fill:#9370db}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-state .divider{stroke:#9370db}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-sCtx9RHDxvMO0USL .note-edge{stroke-dasharray:5}#mermaid-svg-sCtx9RHDxvMO0USL .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-sCtx9RHDxvMO0USL .error-icon{fill:#522}#mermaid-svg-sCtx9RHDxvMO0USL .error-text{fill:#522;stroke:#522}#mermaid-svg-sCtx9RHDxvMO0USL .edge-thickness-normal{stroke-width:2px}#mermaid-svg-sCtx9RHDxvMO0USL .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-sCtx9RHDxvMO0USL .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-sCtx9RHDxvMO0USL .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-sCtx9RHDxvMO0USL .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-sCtx9RHDxvMO0USL .marker{fill:#333}#mermaid-svg-sCtx9RHDxvMO0USL .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-sCtx9RHDxvMO0USL {color: rgba(0, 0, 0, 0.75);font: ;}客户端服务端接口服务1、请求一个地址2、查询页面所需数据3、返回数据4、渲染页面以及生成客户端SPA脚本5、返回HTML（渲染好的页面内容+客户端SPA脚本）6、呈现服务端返回的HTML7、通过页面中的脚本激活为SPA应用8、之后的页面交互都是客户端渲染客户端服务端接口服务
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
#mermaid-svg-04XBK4Zj3LLAhqJY .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .label text{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .node rect,#mermaid-svg-04XBK4Zj3LLAhqJY .node circle,#mermaid-svg-04XBK4Zj3LLAhqJY .node ellipse,#mermaid-svg-04XBK4Zj3LLAhqJY .node polygon,#mermaid-svg-04XBK4Zj3LLAhqJY .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-04XBK4Zj3LLAhqJY .node .label{text-align:center;fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .node.clickable{cursor:pointer}#mermaid-svg-04XBK4Zj3LLAhqJY .arrowheadPath{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-04XBK4Zj3LLAhqJY .flowchart-link{stroke:#333;fill:none}#mermaid-svg-04XBK4Zj3LLAhqJY .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-04XBK4Zj3LLAhqJY .edgeLabel rect{opacity:0.9}#mermaid-svg-04XBK4Zj3LLAhqJY .edgeLabel span{color:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-04XBK4Zj3LLAhqJY .cluster text{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-04XBK4Zj3LLAhqJY .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-04XBK4Zj3LLAhqJY text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-04XBK4Zj3LLAhqJY .actor-line{stroke:grey}#mermaid-svg-04XBK4Zj3LLAhqJY .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-04XBK4Zj3LLAhqJY #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .sequenceNumber{fill:#fff}#mermaid-svg-04XBK4Zj3LLAhqJY #sequencenumber{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY #crosshead path{fill:#333;stroke:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .messageText{fill:#333;stroke:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-04XBK4Zj3LLAhqJY .labelText,#mermaid-svg-04XBK4Zj3LLAhqJY .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-04XBK4Zj3LLAhqJY .loopText,#mermaid-svg-04XBK4Zj3LLAhqJY .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-04XBK4Zj3LLAhqJY .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-04XBK4Zj3LLAhqJY .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-04XBK4Zj3LLAhqJY .noteText,#mermaid-svg-04XBK4Zj3LLAhqJY .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-04XBK4Zj3LLAhqJY .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-04XBK4Zj3LLAhqJY .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-04XBK4Zj3LLAhqJY .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-04XBK4Zj3LLAhqJY .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .section{stroke:none;opacity:0.2}#mermaid-svg-04XBK4Zj3LLAhqJY .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-04XBK4Zj3LLAhqJY .section2{fill:#fff400}#mermaid-svg-04XBK4Zj3LLAhqJY .section1,#mermaid-svg-04XBK4Zj3LLAhqJY .section3{fill:#fff;opacity:0.2}#mermaid-svg-04XBK4Zj3LLAhqJY .sectionTitle0{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .sectionTitle1{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .sectionTitle2{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .sectionTitle3{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-04XBK4Zj3LLAhqJY .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .grid path{stroke-width:0}#mermaid-svg-04XBK4Zj3LLAhqJY .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-04XBK4Zj3LLAhqJY .task{stroke-width:2}#mermaid-svg-04XBK4Zj3LLAhqJY .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .taskText:not([font-size]){font-size:11px}#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-04XBK4Zj3LLAhqJY .task.clickable{cursor:pointer}#mermaid-svg-04XBK4Zj3LLAhqJY .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-04XBK4Zj3LLAhqJY .taskText0,#mermaid-svg-04XBK4Zj3LLAhqJY .taskText1,#mermaid-svg-04XBK4Zj3LLAhqJY .taskText2,#mermaid-svg-04XBK4Zj3LLAhqJY .taskText3{fill:#fff}#mermaid-svg-04XBK4Zj3LLAhqJY .task0,#mermaid-svg-04XBK4Zj3LLAhqJY .task1,#mermaid-svg-04XBK4Zj3LLAhqJY .task2,#mermaid-svg-04XBK4Zj3LLAhqJY .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutside0,#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutside2{fill:#000}#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutside1,#mermaid-svg-04XBK4Zj3LLAhqJY .taskTextOutside3{fill:#000}#mermaid-svg-04XBK4Zj3LLAhqJY .active0,#mermaid-svg-04XBK4Zj3LLAhqJY .active1,#mermaid-svg-04XBK4Zj3LLAhqJY .active2,#mermaid-svg-04XBK4Zj3LLAhqJY .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-04XBK4Zj3LLAhqJY .activeText0,#mermaid-svg-04XBK4Zj3LLAhqJY .activeText1,#mermaid-svg-04XBK4Zj3LLAhqJY .activeText2,#mermaid-svg-04XBK4Zj3LLAhqJY .activeText3{fill:#000 !important}#mermaid-svg-04XBK4Zj3LLAhqJY .done0,#mermaid-svg-04XBK4Zj3LLAhqJY .done1,#mermaid-svg-04XBK4Zj3LLAhqJY .done2,#mermaid-svg-04XBK4Zj3LLAhqJY .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-04XBK4Zj3LLAhqJY .doneText0,#mermaid-svg-04XBK4Zj3LLAhqJY .doneText1,#mermaid-svg-04XBK4Zj3LLAhqJY .doneText2,#mermaid-svg-04XBK4Zj3LLAhqJY .doneText3{fill:#000 !important}#mermaid-svg-04XBK4Zj3LLAhqJY .crit0,#mermaid-svg-04XBK4Zj3LLAhqJY .crit1,#mermaid-svg-04XBK4Zj3LLAhqJY .crit2,#mermaid-svg-04XBK4Zj3LLAhqJY .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-04XBK4Zj3LLAhqJY .activeCrit0,#mermaid-svg-04XBK4Zj3LLAhqJY .activeCrit1,#mermaid-svg-04XBK4Zj3LLAhqJY .activeCrit2,#mermaid-svg-04XBK4Zj3LLAhqJY .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-04XBK4Zj3LLAhqJY .doneCrit0,#mermaid-svg-04XBK4Zj3LLAhqJY .doneCrit1,#mermaid-svg-04XBK4Zj3LLAhqJY .doneCrit2,#mermaid-svg-04XBK4Zj3LLAhqJY .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-04XBK4Zj3LLAhqJY .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-04XBK4Zj3LLAhqJY .milestoneText{font-style:italic}#mermaid-svg-04XBK4Zj3LLAhqJY .doneCritText0,#mermaid-svg-04XBK4Zj3LLAhqJY .doneCritText1,#mermaid-svg-04XBK4Zj3LLAhqJY .doneCritText2,#mermaid-svg-04XBK4Zj3LLAhqJY .doneCritText3{fill:#000 !important}#mermaid-svg-04XBK4Zj3LLAhqJY .activeCritText0,#mermaid-svg-04XBK4Zj3LLAhqJY .activeCritText1,#mermaid-svg-04XBK4Zj3LLAhqJY .activeCritText2,#mermaid-svg-04XBK4Zj3LLAhqJY .activeCritText3{fill:#000 !important}#mermaid-svg-04XBK4Zj3LLAhqJY .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-04XBK4Zj3LLAhqJY g.classGroup text .title{font-weight:bolder}#mermaid-svg-04XBK4Zj3LLAhqJY g.clickable{cursor:pointer}#mermaid-svg-04XBK4Zj3LLAhqJY g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-04XBK4Zj3LLAhqJY g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-04XBK4Zj3LLAhqJY .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-04XBK4Zj3LLAhqJY .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-04XBK4Zj3LLAhqJY .dashed-line{stroke-dasharray:3}#mermaid-svg-04XBK4Zj3LLAhqJY #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY .commit-id,#mermaid-svg-04XBK4Zj3LLAhqJY .commit-msg,#mermaid-svg-04XBK4Zj3LLAhqJY .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-04XBK4Zj3LLAhqJY g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-04XBK4Zj3LLAhqJY g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-04XBK4Zj3LLAhqJY g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-04XBK4Zj3LLAhqJY .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-04XBK4Zj3LLAhqJY .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-04XBK4Zj3LLAhqJY .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-04XBK4Zj3LLAhqJY .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-04XBK4Zj3LLAhqJY .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-04XBK4Zj3LLAhqJY .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-04XBK4Zj3LLAhqJY .edgeLabel text{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-04XBK4Zj3LLAhqJY .node circle.state-start{fill:black;stroke:black}#mermaid-svg-04XBK4Zj3LLAhqJY .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-04XBK4Zj3LLAhqJY #statediagram-barbEnd{fill:#9370db}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-state .divider{stroke:#9370db}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-04XBK4Zj3LLAhqJY .note-edge{stroke-dasharray:5}#mermaid-svg-04XBK4Zj3LLAhqJY .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-04XBK4Zj3LLAhqJY .error-icon{fill:#522}#mermaid-svg-04XBK4Zj3LLAhqJY .error-text{fill:#522;stroke:#522}#mermaid-svg-04XBK4Zj3LLAhqJY .edge-thickness-normal{stroke-width:2px}#mermaid-svg-04XBK4Zj3LLAhqJY .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-04XBK4Zj3LLAhqJY .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-04XBK4Zj3LLAhqJY .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-04XBK4Zj3LLAhqJY .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-04XBK4Zj3LLAhqJY .marker{fill:#333}#mermaid-svg-04XBK4Zj3LLAhqJY .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-04XBK4Zj3LLAhqJY {color: rgba(0, 0, 0, 0.75);font: ;}用户本地git远程仓库CI/CD服务WEB服务器源代码git push源代码git clonerelease（v3.0 v2.0 v1.0...）源代码拉取最新代码、编译构建、打包release、发布release、把release部署到服务器发布release发布到服务器用户本地git远程仓库CI/CD服务WEB服务器
编辑.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
服务端渲染和客户端渲染以及服务器部署相关推荐
- 服务端渲染vs客户端渲染到前后端同构
关于服务端渲染与客户端渲染的优劣,互联网上已经有过很多的文章进行过分析,在这里我谈一下我个人的见解. 首先,还是来老生常谈一下关于两种渲染方式的主要优劣: 服务端渲染(仅列出当下最突出的优劣): 优: ...
- 服务端渲染和客户端渲染区别？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application) 单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: ...
- 【SSR和CSR】服务端渲染和客户端渲染区别？如何快速分辨页面是SSR还是CSR？
首先,介绍一下 SPA.SEO.SSR 三者的区别 SPA(single page application)单页面应用,是前后端分离时提出的一种解决方案. 优点:页面之间切换快:减少了服务器压力: 缺 ...
- 服务端渲染与客户端渲染详解（vue）
1.客户端请求 (1)用户在浏览器输入请求的地址例如:172.0.0.1:8080 到服务器 服务器接受到客户端的请求拿到一个没有被数据渲染的空页面 (2)客户端拿到服务端的空字符串页面,然后从上往下 ...
- 如何快速判断页面是服务端渲染还是客户端渲染
什么是服务器端渲染和客户端渲染? 互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的.简单的页面,这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件,浏览器拿到这个html文 ...
- 服务端渲染or客户端渲染
其实,服务端渲染不是一个新鲜的事情. 最开始的时候,其实网站都是服务端渲染的,后来是出现SPA框架进行客户端渲染.现在热点又回归服务端渲染. 通过这篇文章,带你了解服务端渲染和客户端渲染是怎么一回事. ...
- 浅谈ssr服务器渲染、客户端渲染和预渲染以及前端打包部署
浅谈ssr服务器渲染.客户端渲染和预渲染以及前端打包部署 1.客户端渲染: 2.服务器渲染(SSR) 3.预渲染 前端打包文件dist结合nginx和node原理图(个人见解) 今天下班在地铁上直到现 ...
- React的服务器渲染和客户端渲染
React的服务器渲染和客户端渲染 简单谈一谈React服务器渲染和React客户端渲染 首先我们来区分一下: React客户端渲染 和 React服务端渲染 两者的区别: React客户端渲染: 1 ...
- 前端渲染：服务器渲染 or 客户端渲染
渲染工作应该由谁完成? 时下,前端 UI 设计越来越复杂,可谓"XX与XX齐飞,XX共XX一色". 越来越复杂的 UI 意味着越来越重的 渲染工作. 目前通常有两种选择:服务器渲染 ...
- 关于服务器渲染与客户端渲染的区别
服务器渲染: 也称SSR.当浏览器发送请求时,在服务器上渲染完整的第一个屏幕dom结构,即将数据与html整合,之后返回给浏览器. 客户端渲染: 当浏览器发送请求后,服务器只会发送html框架,浏览器 ...
最新文章
- 西湖大学教授：都说不唯论文，那我们发表论文是为了什么？
- 最大流 ---- 最小路径覆盖 ---- P2765魔术球问题(网络流24题)
- 利用ES6进行Promise封装总结
- Python的一些特殊用法总结
- 计算机计算能力共享,服务器计算能力计算器
- linux系统最大打开文件数（/etc/security/limits.conf：待更新其他设置）
- Maven入门：使用Nexus搭建Maven私服及上传下载jar包
- html三列布局和两列布局,CSS 常见两列布局、三列布局
- shell实战训练营Day2
- AI公开课丨李楠博士带你入门集成学习（第二期）
- Axure8.0AxureRP8实战手册
- c语言求最大质数,【C语言】求解素数（质数）的N种境界
- 基于stm32单片机智能温控风扇控制系统Proteus仿真（源码+仿真+全套资料）
- C 语言do with,Nonverbal （非语言的) communication has to do with gestures, movements andcloseness of two...
- GrapeCity Documents for Imaging
- 电影、酒店、外卖红包天天领
- 初识node.js（1）
- 第4章 学习Shader所需的数学基础（上）(坐标系、点和矢量)
- 男子开设28个黄色网站被捕，一年牟利70余万元
- Eclipse平台技术概述