不要盲目使用服务器端渲染！

寻觅人间美好
2,176 阅读6分钟

为什么需要服务器端渲染？

那最近几年最流行的框架莫过于vue/react/angular，使用这些框架可以实现spa单页面应用。

单页面应用有很多好处：

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

但是呢？单页面应用也存在一些问题，那最常见的两个问题：

  • 首屏渲染时间过长
  • 不利于SEO：现阶段的SEO都是通过爬取html文件中的内容进行seo的，但是单页面应用本身html文件没有任何东西，而是通过执行js代码去生成html。

正是因为这些问题的存在，服务器端渲染因此诞生。

渲染方式

首先，我们要明确这里的渲染具体指的是什么？

结论：这里的渲染其实就是把将数据和模版拼接在一起，渲染成真实dom的过程。

接下来，我们来看看页面渲染的发展历史：

一. 传统的服务器端渲染

从图中可以看出，将数据与模版结合渲染的过程是在服务器端进行的，返回给客户端的也只是html文件。

我们用node模拟一个服务器端渲染：

const fs = require('fs');
const template = require('art-template');
const express = require('express');

let app = express();

app.get('/', (req, res) => {
    //1. 获取模版
    const templateStr = fs.readFileSync('./src/index.html', 'utf-8');
    //2. 获取数据
    const data = JSON.parse(fs.readFileSync('./src/data.json', 'utf-8'));
    //3. 将模版与数据拼接起来
    let result = template.render(templateStr, data);
    //4. 返回给客户端
    res.send(result);
});

app.listen(3000, () => {
    console.log('running')
});

但是，这种传统的服务器端渲染方案，随着页面的复杂程度越来越高，也会出现很多的问题和不足：

  • 前后端没有分离，耦合在一起，不利于维护
  • 服务端压力会比较大，前端没有足够的发挥空间，本质上就没有前端的事儿
  • 用户体验一般

正是由于这些不足，才出现了后面的：前后端分离

二. 客户端渲染

我们需要知道一点：前后端分离的前提是客户端ajax的普及，正是由于客户端可以通过ajax请求获取服务器端的数据，才使的客户端渲染成为可能。

客户端渲染的优点也很明显，

  • 前后端分工更加明确，前端发挥空间大
  • 减轻了服务端的压力

但是客户端渲染的缺点也很明显：

  • 首屏渲染时间长
  • 不利于SEO

以上两个缺点，我们可能经常遇到，但是很多人并不能说清楚为什么？ 所以，我们在这里要详细再说明一下，

  1. 为什么客户端渲染首屏加载时间比较长? 服务器端渲染：客户端只需要发送一个请求，请求返回渲染好的html页面，浏览器直接加载即可， 客户端渲染：首先客户端发送一个请求，获取到一个空的html文件，加载html文件的过程中，又可能会加载其他javascript文件，javascript文件中可能又会有数据的ajax请求。

所以实现一个相同的页面效果，传统的服务器端渲染只需要发送一个请求获取html即可，而客户端渲染则需要发送多个请求，去加载html，js，以及ajax请求等，从图中也可以看出时间上的差距。

  1. 为什么客户端渲染不利于SEO?

首先要弄清楚什么是SEO，其实就是尽可能让搜索引擎抓取你的网站的数据，这样在用户的搜索的时候，就会优先搜到你的网站，

所以想要SEO，首先得让网站有数据吧，传统的服务器端渲染模式返回给客户端的是渲染好的html，包含了很多的数据或者网站信息，是有利于我们进行SEO，但是客户端渲染，服务器端返回的就是一个空的html文件，什么信息也没有，只有执行了相应的js脚本之后，才会有数据，但是搜索引擎不是浏览器，它不会解析js文件，它只会爬取当前html文件里面的内容，但是很遗憾，这种单页面应用返回的是一个空的html文件，所以SEO几乎为0。

三. 现代化的服务器端渲染

通过前面的介绍，我们知道了传统的服务器端渲染，以及客户端渲染都各有利弊，那如何抉择呢？这就是现代化的服务器端渲染要解决的问题。

现代化的服务器端渲染，又叫同构渲染，它是客户端渲染与服务器端渲染的结合。

核心思想就是：

  1. 首先在服务器端渲染一次，这样首屏采用的是服务器端渲染，又叫首屏直出。
  2. 返回给客户端以后，执行脚本激活为spa应用，之后页面的交互都是客户端交互。

以上就是同构渲染的优点，我们一般采用一些第三方解决方案：

  • react生态的Next.js
  • vue生态的Nuxt.js

但是同构渲染也带来了一些新的问题：

  • 开发条件有限：我们平时使用的一些库，可能在服务器端渲染时就无法正常运行，一些平时在客户端渲染的api，也要做相应调整，这些都需要我们开发根据实际情况去区分。
  • 涉及构建和部署的要求更多
  • 需要更多的服务器端资源：因为需要在服务器端渲染，所以肯定会占用更多的服务器端资源，服务端压力也会更大。

总结

通过上面的代码，我们知道了不管采用哪种方式，都有其相应的优点和缺点，而服务器端是否真的需要呢？我们一般从以下两方面去考虑：

  1. 首屏渲染速度是否真的很重要？
  2. 是否真的需求SEO?

所以在实际开发中，服务器端渲染不能盲目使用，例如一个后台管理系统，首屏渲染速度不是特别重要，而且完全不需要SEO，很显然，这个时候就不需要服务器端渲染，但是如果遇到一些项目，明确要求要进行SEO, 那么这种情况下就只能选择服务器端渲染了，因为客户端渲染SEO几乎为0。

avatar
文章
阅读
粉丝