3-3-现代化的服务端渲染（同构渲染）

最新推荐文章于 2023-10-31 12:58:19 发布

cloveryuan

最新推荐文章于 2023-10-31 12:58:19 发布

阅读量234

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/cloveryuan/article/details/108704813

版权

大前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一.传统的服务端渲染（SSR）

1.案例

npm i express art-template

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.listen(3000,()=>console.log('runing...'))

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

data.json

{
  "posts": [
    {
      "id": 1,
      "title": "肖战-光点1",
      "body": "只有自身是个发光体，才会有更多优秀的人靠近"
    },
    {
      "id": 2,
      "title": "肖战-光点2",
      "body": "只有自身是个发光体，才会有更多优秀的人靠近"
    },
    {
      "id": 3,
      "title": "肖战-光点3",
      "body": "只有自身是个发光体，才会有更多优秀的人靠近"
    },
    {
      "id": 4,
      "title": "肖战-光点4",
      "body": "只有自身是个发光体，才会有更多优秀的人靠近"
    }
  ],
  "title":"肖战-小飞侠-冲"
}

2. 缺点：

前后端代码完全耦合在一起，不利于开发和维护
前端没有足够发挥空间
服务端压力大
用户体验一般

二.客户端渲染（CSR）

之前服务端渲染的缺点，随着客户端Ajax技术的普及得到了有效的解决，Ajax使得客户端动态获取数据成为可能，因此，服务端渲染的工作来到了客户端。

#####以Vue.js项目为例系统了解客户端渲染流程。

后端负责处理数据接口
前端负责将接口数据渲染到页面中

#####但客户端渲染也存在一些明显的不足：

首屏渲染慢：因为客户端渲染至少发起Http请求三次，第一次是请求页面，第二次是请求页面里的JS脚本，第三次是动态数据请求。
不利于SEO：因为客户端渲染的内容都是由JS生成的，而搜索引擎只会请求网络路径的html，不会去将html里的JS脚本再去请求做解析处理，因此搜索引擎获取到的首屏是空的，单页应用SEO几乎为0。
###三.现代化的服务端渲染（同构渲染）

#####1. 同构渲染 = 后端渲染 + 前端渲染
基于React、Vue等框架，客户端渲染和服务端渲染的结合
在客户端执行一次，用户实现服务器端渲染（首屏直出）
在客户端再执行一次，从而生成一个SPA应用，用于接管页面交互
核心解决SEO和首屏渲染慢的问题
拥有传统服务端渲染的优点，也有客户端渲染的优点。
#####2. 如何实现同构渲染?
使用Vue、React等框架的官方解决方案
优点：有助于理解原理
缺点：需要搭建环境
使用第三方解决方案
React生态的Next.js
Vue生态的Nuxt.js
#####3. 以Vue生态的Nuxt.js为例演示同构渲染应用
▶1.创建一个文件夹，然后进入文件夹执行yarn init生成包管理器
然后执行yarn add nuxt安装Nuxt
在package.json增加scripts脚本命令"dev": “nuxt”
▶2.创建pages文件夹（名字固定叫pages），在这个文件夹中创建index.vue文件和about.vue文件，nuxt会根据pages路径自动生成路由。

// index.vue
<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

// about.vue
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

▶3.执行yarn dev运行这个Nuxt项目，打开localhost:3000端口，默认是pages/index.vue页面，然后访问localhost:3000/about访问的是pages/about.vue页面
▶4.在pages/index.vue页面中通过asyncData方法获取json数据，静态的json数据文件是放在static目录下的。Nuxt中提供的钩子函数asyncData()，专门用于获取服务端渲染的数据。axios不要忘了安装：yarn add axios

// pages/index.vue
<template>
  <div id="app">
    <h2>{{ title }}</h2>
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
      >{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Home',
  components: {},
  // Nuxt中提供一个钩子函数`asyncData()`，专门用于获取服务端渲染的数据。
  async asyncData () {
    const { data } = await axios({
      method: 'GET',
      // 注意此处的URL要指定当前端口，否则默认会去服务端的80端口去查找。
      url: 'http://localhost:3000/data.json'
    })
    // 这里返回的数据会和data () {} 中的数据合并到一起给页面使用
    return data
  }
}
</script>

<style scoped>

</style>

static/data.json

{
    "list": [
        {
            "id": 1,
            "name": "肖战"
          },
      {
        "id": 2,
        "name": "王一博"
      },
      {
        "id": 3,
        "name": "马园园"
      }
    ],
    "title": "陈情令"
  }

▶5.一次请求就拿到了完整页面，Nuxt的服务端渲染方案解决了首屏渲染慢的问题和SEO的问题

▶6.Nuxt生成的是SPA单页应用，可以通过增加路由导航看出来，Home和About两个组件切换时页面没有刷新。创建一个文件夹layouts，然后在这个文件夹中创建一个default.vue文件(nuxt中，这个文件会作为所有页面的母版)，这个文件名是固定要求的，不能随意取

<template>
<div>
<!-- 路由出口 -->
  <ul>
    <li>
      <!-- 类似于 router-link，用于单页面应用导航 -->
      <nuxt-link to="/">Home</nuxt-link>
    </li>
    <li>
      <!-- 类似于 router-link，用于单页面应用导航 -->
      <nuxt-link to="/about">About</nuxt-link>
    </li>
  </ul>
<!-- 子页面出口 -->
  <nuxt />
</div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

#####4.同构渲染应用的问题

▶1.开发条件有限

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

▶2.涉及构建设置和部署的更多要求

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

▶3.更多的服务器端负载

✔在Node中渲染完整的应用程序，相比仅仅提供静态文件服务器，需要大量占用CPU资源
✔如果应用在高流量环境下使用，需要准备相应的服务器负载
✔需要更多的服务端渲染优化工作处理
#####5. 服务端渲染使用建议
首屏渲染速度是否真的重要？
是否真的需要SEO？

#NuxtJS
代码仓库地址：[https://gitee.com/cloveryuan/nuxt-demo](https://gitee.com/cloveryuan/nuxt-demo) 有10个分支，切换看每个详解

一、Nuxt.js是什么

一个基于Vue.js生态的第三方开源服务端渲染应用框架
它可以帮我们轻松的使用Vue.js技术栈构建同构应用
官网：https://zh.nuxtjs.org/
Github仓库：https://github.com/nuxt/nuxt.js

二、Nuxt.js的使用方式

初始化项目
已有的Node.js服务端项目
- 直接把Nuxt当做一个中间件集成到Node Web Server中
现有的Vue.js项目
- 非常熟悉Nuxt.js
- 至少百分之10的代码改动

###三、初始化Nuxt.js应用方式
官方文档：https://zh.nuxtjs.org/guide/installation

方式一：使用create-nuxt-app
方式二：手动创建

四、Nuxt.js路由

1. 基本路由

pages文件夹下的文件会自动生成路由

2. 路由导航

a标签
- 它会刷新整个页面，不推荐使用
- <a href="/">首页</a>
nuxt-link组件
- https://router.vuejs.org/zh/api/#router-link-props
- <router-link to="/">首页</router-link>
编程式导航
- https://router.vuejs.org/zh/guide/essentials/navigation.html
- <button @click="onClick">首页</button>

methods: {
  onClick () {
    this.$router.push('/')
  }
}

3. 动态路由

Vue Router动态路由匹配
- https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
Nuxt
- https://zh.nuxtjs.org/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1

user/_id.vue，动态路由参数文件名由下划线开头。

<template>
  <div>
    <h1>User page</h1>
    <p>{{$route.params.id}}</p>
  </div>
</template>

<script>
export default {
  name: 'UserPage'
}
</script>

<style scoped>

</style>

4. 嵌套路由

Vue Router 嵌套路由
- https://router.vuejs.org/zh/guide/essentials/nested-routes.html
Nuxt.js嵌套路由
- https://zh.nuxtjs.org/guide/routing#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

4. 路由配置

参考文档：https://zh.nuxtjs.org/api/configuration-router
在项目根目录下创建nuxt.config.js

/**
 * Nuxt.js 配置文件
 */
module.exports={
    router:{
        base:'/abc',//网站所有路由以abc开头
        extendRoutes(routes, resolve) {//扩展Nuxt.js创建的路由
            // routes就是路由配置表，是个数组，resolve是解析路由路径的
            routes.push({
              name: 'custom',
              path: '*',
              component: resolve(__dirname, 'pages/404.vue')
            }),
            routes.push({
                name:"hello",
                path:"/hello",
                component:resolve(__dirname,'pages/about.vue')
            })
          }
    }

###五、Nuxt.js视图

#####1. 模板
你可以定制化 Nuxt.js 默认的应用模板。
定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。
默认模板为：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
  <!-- 渲染的内容最终会注入这里 -->
    {{ APP }}
  </body>
</html>

#####2. 结构
Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。
提示: 别忘了在布局文件中添加组件用于显示页面的主体内容。
默认布局的源码如下：

<template>
  <nuxt />
</template>

可以在组件中通过layout属性修改默认布局组件：
about页面的布局组件变成了foo，但是index页面还是default，因为index页面没有修改其layout属性，所以默认的布局文件还是default
##六、Nuxt.js异步数据

1. asyncData方法

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

https://zh.nuxtjs.org/guide/async-data
基本用法
- 它会将asyncData返回的数据融合组件data方法返回数据一并给组件
- 调用时机：服务端渲染期间和客户端路由更新之前（保证了服务端和客户端都要运行处理数据）
注意事项
- 只能在页面组件中使用，非页面组件中不会调用asyncData方法，如果子组件中需要数据，可以通过props方式传递数据
- 没有this，因为它是在组件初始化之前被调用的
  当你想用的动态页面内容有利于SEO或者是提升首屏渲染速度的时候，就在asyncData中发送请求数据。如果是非异步数据或者普通数据，则正常的初始化到data中即可。
  static这个文件夹可以直接作为根路径访问

Pages/index.vue

<template>
  <div>
   <h1>Hello {{ title }}!</h1>
   <ul>
     <li v-for="item in posts" :key="item.id">{{item.title}}</li>
   </ul>
   <router-link to="/about">About</router-link>
   <Foo :posts="posts"></Foo>
  </div>
</template>
<script>
import axios from "axios";
import Foo from "../components/foo.vue"
export default {
  name: "IndexPage",
  components:{
    Foo
  },
  async asyncData() {
    // 如果验证asyncData是在服务端执行的？可以通过log输出在了服务端控制台，得出这个方法是在服务端执行的。Nuxtjs为了方便调试，把服务端控制台输出数据也打印在了客户端控制台，但是为了区分，在客户端控制台用“Nuxt SSR”包裹起来了
    console.log("asyncData");
    const res1 = await axios({
      method: "GET",
      url: "http://localhost:3000/data.json", // 这里的请求地址要写完整，因为在服务端渲染期间，也要来请求数据，不写完整的话服务端渲染就会走到80端口，如果只是客户端渲染，就会以3000端口为基准来请求根目录下的data.json，服务端渲染就默认走到80了
    });
    const res2 = await axios({
      method: "GET",
      url: "http://localhost:3000/data2.json", // 这里的请求地址要写完整，因为在服务端渲染期间，也要来请求数据，不写完整的话服务端渲染就会走到80端口，如果只是客户端渲染，就会以3000端口为基准来请求根目录下的data.json，服务端渲染就默认走到80了
    });
    // 返回的数据会与data中的数据混合
    return  {...res1.data,...res2.data}//当两个里面有属性名一样的，会被替换值，要处理一下这里
  }
};
</script>
<style>
</style>

pages/components/foo.vue

<template>
  <div>
   <h1>子组件foo:不是页面。不能用async。需要数据可以让父组件传递</h1>
   <p>传递过来的props</p>
   <ul>
     <li v-for="item in posts" :key="item.id">{{item.title}}</li>
   </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "FooPage",
  props:['posts'],
//   async asyncData() {//foo不是页面不能用asyncData
//     console.log("asyncData");
//     const res = await axios({
//       method: "GET",
//       url: "http://localhost:3000/data.json",
//     });
//     return  res1.data
//   }
};
</script>
<style>
</style>

2. 上下文对象

https://zh.nuxtjs.org/guide/async-data#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1
pages/index.vue

<template>
  <div>
      <router-link to="/about">About</router-link>
      <h1>新闻列表</h1>
      <ul>
          <li v-for="item in posts" :key="item.id" >
              <router-link :to="'/article/' + item.id">{{item.title}}</router-link>
          </li>
      </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name:"IndexPage",
  async asyncData(){
      const res = await axios({
          method:'GET',
           url: 'http://localhost:3000/data.json'
      })
      return res.data
  }
}
</script>
<style>
</style>

pages/article.vue

<template>
  <div>
     <router-link to="/">列表页</router-link>
    <h1>{{ article.title }}</h1>
    <div>{{ article.body }}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ArticlePage',
  async asyncData (context) {
     // asyncData的参数为上下文对象，我们无法在这个方法里使用this，所以无法通过this.$router.params.id拿到路由参数，但是可以通过context.params.id获取参数
    console.log(context)
    const { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    const id = Number.parseInt(context.params.id)
    return {
      article: data.posts.find(item => item.id === id)
    }
  }
}
</script>

<style>

</style>

Nuxt.js 为页面提供的特殊配置项：

属性名	描述
asyncData	最重要的一个键, 支持异步数据处理，另外该方法的第一个参数为当前页面组件的上下文对象。
fetch	与 `asyncData` 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 `fetch` 方法不会设置组件的数据。详情请参考关于 fetch 方法的文档。
head	配置当前页面的 Meta 标签, 详情参考页面头部配置 API。
layout	指定当前页面使用的布局（`layouts` 根目录下的布局文件）。详情请参考关于布局的文档。
loading	如果设置为`false`，则阻止页面自动调用`this.$nuxt.$loading.finish()`和`this.$nuxt.$loading.start()`,您可以手动控制它,请看例子,仅适用于在 nuxt.config.js 中设置`loading`的情况下。请参考API 配置 `loading` 文档。
transition	指定页面切换的过渡动效, 详情请参考页面过渡动效。
scrollToTop	布尔值，默认: `false`。用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate	校验方法用于校验动态路由的参数。
middleware	指定页面的中间件，中间件会在页面渲染之前被调用，请参考路由中间件。

cloveryuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-3-现代化的服务端渲染（同构渲染）

一.传统的服务端渲染（SSR）1.案例npm i express art-templateindex.js//客户端服务文件const express = require('express')const fs = require('fs')const template = require('art-template')//服务端模板引擎const app = express()app.get('/',(req,res)=>{ // 1.获取页面模板 const
复制链接

扫一扫