前端小白成长--现代化的服务端渲染（同构渲染）

2020-08-17  本文已影响0人  Clover园

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

image.png

1.案例

npm i express art-template

//客户端服务文件
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...'))

<!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>

{
  "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项目为例系统了解客户端渲染流程。
但客户端渲染也存在一些明显的不足：

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

现代化服务端渲染
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.png

▶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.开发条件有限

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

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

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

5. 服务端渲染使用建议

NuxtJS

代码仓库地址：

一、Nuxt.js是什么

二、Nuxt.js的使用方式

三、初始化Nuxt.js应用方式

官方文档：https://zh.nuxtjs.org/guide/installation

四、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/> 用于显示子视图内容。

上一篇 下一篇

猜你喜欢

热点阅读