【前端】服务端渲染

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

image

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。

三.现代化的服务端渲染（同构渲染）

image
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的问题

image

▶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

代码仓库地址：

一、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. 路由导航

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

3. 动态路由

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 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343