服务器端渲染基础

前言

渲染的本质就是字符串的解析替换，对于开发者而言，在客户端请求后端接口数据，然后将数据通过模板绑定语法绑定到页面中，最终呈现给用户，这个过程可以看做是渲染，本文不关注怎么渲染，而是在哪里渲染的问题。

一、传统服务端渲染页面

在ASP、PHP、JSP，再到后来的一些相对高级一点的服务端框架配合一些模板引擎的时代，web页面渲染都是在服务端完成的，即在服务端将所需的数据结合页面模板渲染为HTML，然后再将完整的页面返回给客户端，客户端仅负责页面呈现，这种模式只适合网页不复杂的情况，工作流程如下：
在这里插入图片描述对于熟练运用现代前端技术如vue、react、angular的我们来说，这种方式是陌生的，使用一个node模拟下。
准备工作：

新建一个新项目
使用yarn init 初始化项目
安装express、art-template
新建一个data.json文件作为数据源
新建一个index.html文件作为页面模板
新建一个server.js文件用于构建服务端

server.js文件内容下：

const express = require("express"); //快速创建web服务
const fs = require("fs"); //读取文件
const artTemplate = require("art-template"); //服务端渲染引擎
const app = express();

app.get("/", (req, res) => {
    
    
    const tempStr = fs.readFileSync("./index.html", "utf-8"); //获取页面模板
    const data = JSON.parse(fs.readFileSync("./data.json", "utf-8")); //获取数据
    const html = artTemplate.render(tempStr, data); //将页面模板和数据渲染成html
    res.send(html); //把渲染结果发送到客户端
});

app.listen(8080);

index.html文件内容下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>传统服务端渲染</title>
    </head>
    <body>
        <h1>{
    
    {
    
     title1 }}</h1>
        <ul> 
            {
    
    {
    
     each list }}
            <li>{
    
    {
    
     $value.id }}.{
    
    {
    
     $value.title }}: {
    
    {
    
     $value.content }}</li> 
            {
    
    {
    
     /each }}
        </ul>
    </body>
</html>

data.json文件内容下：

{
    
    
    "title1": "Prerequisites",
    "list": [
        {
    
    
            "id": 1,
            "title": "node",
            "content": "the latest LTS version installed"
        },
        {
    
    
            "id": 2,
            "title": "editor",
            "content": "VS Code with the Vetur extension or WebStorm"
        }
    ]
}

//运行项目
nodemon ./server.js

//在浏览器访问项目
http://localhost:8080/

在浏览器端查看项目，页面请求返回的结果就是一个完整的页面。
在这里插入图片描述
从上面一个简单的模拟案例可以看出：

由于是在服务端渲染页面，开发工作主要集中在后端，服务端的压力很大
网站应用的前后端完全耦合在一起，前端开发工作很大程度上依赖后端，并没有多大的发挥空间
由于客户端只负责页面展示，页面复杂或网络不佳时，会出现较长的白屏等待时间，用户体验较差

二、客户端渲染页面

为了解决传统服务端渲染的诸多弊端，Ajax 技术诞生了，而Ajax 技术的普及让前端动态获取数据成为可能，也为前后端分离奠定基础，基于客户端渲染的 SPA 应用的基本工作流程如下：

在这里插入图片描述
近几年主流前端三大框架Vue、react、angular就是在客户端渲染页面（就不提供案例了）。这些框架的优势很明显：

提倡前后端分离，后端负责数据处理，前端负责页面渲染
服务端只负责数据处理，减轻了服务端压力
减小了页面请求时间，提高了用户体验
分离模式下的代码更易于维护
避免了前后端的高度耦合，明确了前后端开发职责，提高了开发效率

但这种模式，也会存在一些明显的不足，其中最主要的就是：

首屏加载慢：这种模式在首次加载的时候，要经过请求页面、异步请求页面所需要的数据、请求页面所需要的资源，然后在客户端将请求到的html页面和数据进行渲染，最终呈现给用户，导致首屏加载时间过长。
无法进行SEO：因为第一次获取到的是一个空页面，所以对于目前的搜索引擎爬虫来说，页面中没有任何有用的信息，自然无法提取关键词，进行索引了。

三、现代化服务端渲染页面

对于一些从企业效益和推广角度出发的网站，比如一个公司的官网、线上购物网站、产品推广网站等，就必须要求网站可以进行SEO，那么客户端渲染的两个主要缺陷就是致命的。而现代化服务端渲染结合了传统服务端渲染和客户端渲染的优势，很好的解决了这个问题。以下是这种模式的工作流程：

在这里插入图片描述
现代化服务端渲染是客户端渲染和服务器端渲染的结合，在服务器端执行一次，用于实现服务器端渲染（首屏直出），在客户端再执行一次，用于接管页面交互，核心解决 SEO 和首屏渲染慢的问题。相关的技术有React 生态中的 Next.js、Vue 生态中的 Nuxt.js、Angular 生态中的 Angular Universal。下面以Vue的Nuxt.js为例，体验下这种模式。
准备工作：

新建一个新项目
使用yarn init 初始化项目
安装nuxt、axios
最终的项目目录如下：

在这里插入图片描述
index.vue文件的内容如下：

<template>
  <div>
    <h1>{
    
    {
    
     title1 }}</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        {
    
    {
    
     item.title }}: {
    
    {
    
     item.content }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    
    
  name: "Home",
  //Nuxt.js中的钩子函数，专门用于获取页面服务端渲染的数据
  async asyncData() {
    
    
    const {
    
     data } = await axios({
    
    url: 'http://localhost:3000/data.json'})
    return data;//会将返回数据和Vue本身的data选项进行合并，供页面使用
  }
};
</script>

default.vue文件的内容如下：

<template>
  <div>
    <ul>
      <li>
        <!--相当于router-link-->
        <nuxt-link to="/">首页</nuxt-link>
      </li>
      <li>
        <nuxt-link to="/about">关于</nuxt-link>
      </li>
    </ul>
    <!--页面路由视图，相当于router-view-->
    <nuxt></nuxt>
  </div>
</template>

default.vue文件的内容如下：

{
    
    
  "title1": "Prerequisites",
  "list": [
    {
    
    
      "id": 1,
      "title": "node",
      "content": "the latest LTS version installed"
    },
    {
    
    
      "id": 2,
      "title": "editor",
      "content": "VS Code with the Vetur extension or WebStorm"
    }
  ]
}

执行yarn dev命令，在浏览器访问项目，页面默认显示index.vue的内容，当切换路由导航时，页面并没有刷新，和普通的Vue项目无二。这种模式兼具Vue.js的优势，又很好的解决了Vue.js的缺点，但同时它也带来了很多的缺陷：

由于服务端渲染应用需要处于 Node.js server 运行环境，对构建和部署的要求更高了
在高流量环境中，需要采用缓存策略，对服务器相应的负载要求也提高了
由于浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用，一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行，增加了开发成本

总结

不管是哪种方式，都有优点也有缺点，在开发过程中，要根据具体的需求，合理选择页面渲染模式。

对于后台管理系统，一般采用客户端渲染模式，在满足需求的同时，减少开发成本
像官网、购物网站、产品推广网站等具有推广或追求效益的网站，一般采用现代化服务器渲染模式

文章列表

服务器端渲染基础
 服务器端渲染-Nuxt.js基础
 服务器端渲染-Nuxt.js综合案例
 服务器端渲染-Nuxt.js综合案例发布部署
 服务器端渲染-Vue SSR搭建