服务端渲染和客户端渲染以及服务器部署

SPA单页面应用

  • 优点

    • 用户体验好
    • 开发效率高
    • 渲染性能好
    • 可维护性好
  • 缺点

    • 需等待客户端js解析执行完,造成首屏渲染时间长
    • 单页面的html是没有内容的,不利于SEO

传统服务端渲染

客户端 服务端 数据库 1、请求一个地址 2、查询页面所需数据 3、返回数据 4、将数据结合页面模板渲染成HTML 5、返回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
客户端 服务端 数据库 1、请求一个地址 2、返回空白HTML 3、Ajax请求数据 4、查询获取数据 5、返回数据 6、返回数据 7、动态渲染页面 客户端 服务端 数据库

同构渲染

  • 通过服务端渲染首屏直出,解决SPA应用首屏渲染慢以及不利于SEO问题
  • 通过客户端渲染接管页面内容交互得到更好的用户体验
  • 这种方式通常称之为现代化的服务端渲染,也叫同构渲染
  • 这种方式构建的应用称之为服务端渲染应用或者是同构应用

同构渲染的缺点:
开发条件有限

  • 浏览器特定的代码只能在某些生命周期钩子函数中使用
  • 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
  • 不能在服务端渲染期间操作DOM
  • 某些代码操作需要区分运行环境

涉及构建喝部署的要求更多

-客户端渲染同构渲染
构建仅构建客户端应用即可需要构建两个端
部署可以部署在任意Web服务器中只能部署在Node.js Server

更多的服务端负载

  • 在Node中渲染完整的应用程序,相比仅仅提供静态文件的服务器,需要大量占用CPU资源
  • 如果应用在高流量环境下使用,需要准备相应的服务器负载
  • 需要更多的服务端渲染优化工作处理
客户端 服务端 接口服务 1、请求一个地址 2、查询页面所需数据 3、返回数据 4、渲染页面以及生成客户端SPA脚本 5、返回HTML(渲染好的页面内容+客户端SPA脚本) 6、呈现服务端返回的HTML 7、通过页面中的脚本激活为SPA应用 8、之后的页面交互都是客户端渲染 客户端 服务端 接口服务

tips:当需要首屏渲染速度或者SEO时建议使用服务端渲染

Vue同构渲染库——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
用户本地 git远程仓库 CI/CD服务 WEB服务器 源代码 git push 源代码 git clone release(v3.0 v2.0 v1.0...) 源代码 拉取最新代码、编译构建、打包release、发布release、把release部署到服务器 发布release 发布到服务器 用户本地 git远程仓库 CI/CD服务 WEB服务器

Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
Alt
编辑.github / workflows / main.yml 文件
Alt
新建pm2.config.json

{
  "apps": [
    {
      "name": "RealWorld",
      "script": "npm",
      "args": "start"
    }
  ]
}

提交测试
Alt
Alt

git add .
git commit -m "发布部署-测试"
git tag v0.1.0
git tag
git push origin v0.1.0

Alt
Alt

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值