大前端学习-SPA应用的服务端渲染基础

最新推荐文章于 2023-03-12 08:00:33 发布

柠条_

最新推荐文章于 2023-03-12 08:00:33 发布

阅读量2.2k

点赞数 11

分类专栏：大前端学习文章标签： vue.js html5 typescript

本文链接：https://blog.csdn.net/sinat_35349493/article/details/107798336

版权

大前端学习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

内容输出来源,拉勾教育大前端高薪训练营 Vue.js 服务端渲染

一、服务端渲染基础

优点

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

缺点

首屏渲染时间长
不利于SEO

解决

借鉴了传统的服务端渲染,在服务器端执行前端代码,来生成网页内容,然后将生成好的网页内容返回给客户端,客户端只需要负责展示就行了
为了更好的用户体验以及页面交互，同时会在客户端将来自服务端的内容激活为一个spa应用,也就是说之后的页面内容都是由客户端来处理的

同构应用

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

相关概念

什么是渲染
传统的服务端渲染
客户端渲染
现代化的服务端渲染(同构渲染)

二、什么是渲染

{
  message: 'Hello Word'
}
<h1>{{message}}</h1>

<h1>Hello Word</h1>

渲染: 把数据加模版拼接到一起
关注在哪里渲染的问题

三、传统的服务端渲染

早起的Web页面渲染都是在服务端进行的,服务端在运行的过程中把所需要的数据结合页面的模版渲染成HTML,然后响应给客户端浏览器,所以浏览器呈现出来的就是直接包含内容的页面

通过node.js演示传统的服务端渲染模式

// npm i express
// npm install -g nodemon
const express = require('express')

const app = express()

app.get('/', (req, res) => {
  // 1. 获取页面模版
  // 2. 获取数据
  // 3. 渲染: 数据 + 模版 = 最终结果
  // 4. 把渲染结果发送给客户端
  res.send('hello word')
})

app.listen(3000, () => console.log('runing...'))

// 启动nodemon ./index.js

// npm i art-template 第三方模版引擎
const express = require('express')
const fs = require('fs')
const app = express()

app.get('/', (req, res) => {
  // 1. 获取页面模版
  const templateStr = fs.readFileSync('./index.html', 'utf-8')
  // 2. 获取数据
  // 3. 渲染: 数据 + 模版 = 最终结果
  // 4. 把渲染结果发送给客户端
  res.send(templateStr)
})

app.listen(3000, () => console.log('runing...'))

刷新浏览器即可看到效果

服务端给客户端的html字符串

把渲染结果发送给客户端

// index.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>
    {{ each posts }}
    <p>{{ $value.title}}</p>
    <p>{{ $value.desc}}</p>
    {{ /each }}
  </ul>
</body>
</html>

// index.js
const express = require('express')
const fs = require('fs')
const app = express()
const template = require('art-template')
app.get('/', (req, res) => {
  // 1. 获取页面模版
  const templateStr = fs.readFileSync('./index.html', 'utf-8')
  // 2. 获取数据
  const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
  console.log(data)
  // 3. 渲染: 数据 + 模版 = 最终结果
  const html = template.render(templateStr, data)
  // 4. 把渲染结果发送给客户端
  res.send(html)
})

app.listen(3000, () => console.log('runing...'))

// data.json
{
  "posts": [
    {
      "id": 1,
      "title": "服务端渲染SSR",
      "desc": "早起的Web页面渲染都是在服务端进行的,服务端在运行的过程中把所需要的数据结合页面的模版渲染成HTML,然后响应给客户端浏览器,所以浏览器呈现出来的就是直接包含内容的页面"
    },
    {
      "id": 2,
      "title": "React服务端渲染SSR",
      "desc": "早起的Web页面渲染都是在服务端进行的,服务端在运行的过程中把所需要的数据结合页面的模版渲染成HTML,然后响应给客户端浏览器,所以浏览器呈现出来的就是直接包含内容的页面"
    }
  ]
}
// 执行nodemon ./index.js

在浏览器就可以看到我们使用node.js来实现服务端渲染了

对于客户端来说没有感知,拿到的就是结果

存在的问题

网页越来越复杂的情况,存在很多不足
前后端代码完全耦合在一起,不利于开发和维护
前端没有足够的发挥空间
服务端压力大
用户体验一般

四、客户端渲染

存在的问题

前后端代码混合在一起
服务端压力大
体验不够优好
首屏渲染慢
不利于SEO
客户端渲染流程

五、为什么客户端渲染首屏慢

单页面程序
打开devtools的 NetWork, 调整为慢速网络3G

客户端首先要请求url地址,服务端响应返回数据,客户端需要加载js脚本,并行加载,在解析执行过程中，如果遇到了请求,就要发起请求,返回数据,渲染页面,经历周期长,所以慢

六、为什么客户端渲染不利于SEO

搜索引擎需要知道网站里面有什么
拿到的都是字符串,搜索引擎进行分析
客户端渲染的网页都是空的,body里面没有内容,内容都必须经过解析JS,单页面SEO几乎为0

七、现代化的服务端渲染 (同构渲染)

服务端渲染结局SEO问题
同构渲染 = 后端渲染 + 前端渲染结合的模式
既有后端渲染的优点,也有前端渲染的优点
基于React、Vue等框架，客户端渲染和服务器端渲染的结合
- 在服务器端执行一次，用于实现服务器端渲染(首屏直出)
- 在客户端再执行一次，用于接管页面交互
核心解决SEO和首屏渲染慢的问题
拥有传统服务端渲染的优点，也有客户端渲染的优点

同构渲染流程

如何实现同构选项

使用Vue、React 等框架的官方解决方案优点:有助于理解原理
缺点:需要搭建环境，比较麻烦
使用第三方解决方案
React生态的Next.js
Vue生态的Nuxt.js

以Vue生态的Nuxt.js实现同构渲染

八、通过Nuxt 体验同构渲染

// npm i nuxt
// package.json
"script": {
  "dev": "nuxt"
}

export default {
  data () {
    return {

    }
  },
  components: {},
  // Nuxt中特殊提供的一个钩子函数,朱门用于获取页面服务端渲染的数据
  async asyncData () {
    const { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    // 这里返回的数据会和data() {} 中的数据合并到一起给页面使用
    return {

    }
  }
}

直接返回内容,客户端直接展示

九、同构渲染的SPA应用

新建layouts/default.vue 固定

<template>
  <div>
    <ul>
      <!-- 类似router-link用于但页面应用导航>-->
      <nuxt-link to="/"></nuxt-link>
    </ul>
    <ul>
      <!-- 类似router-link用于但页面应用导航>-->
      <nuxt-link to="/about"></nuxt-link>
    </ul>
    <!-- 子页面出口> -->
    <nuxt/>
  </div>
</template>