百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

前端实战:如何快速在你的vue/react应用中实现服务端渲染(ssr)

ccwgpt 2024-11-03 12:45 50 浏览 0 评论


前言

我们都知道, Vue和React是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出自定义组件，进行生成 DOM 和操作 DOM, 也就是我们常说的客户端渲染, 并且我们大部分主流的场景都是SPA(单页面)应用, 而随着 SPA尤其是 React、Vue、Angular 为代表的前端框架的流行，越来越多的 Web App 使用的是客户端渲染。

使用客户端渲染的优势在于节省后端资源、局部刷新、前后端分离等，但随着应用的日益复杂, 首屏渲染时间不断变长, 并且存在严重的SEO问题。

所以为了解决SPA应用遇到的这些问题, 我们必须考虑SSR:

服务端渲染（ssr），是指由服务器端完成页面的HTML 结构拼接，并且直接将拼接好的HTML发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的处理技术。

对于服务端渲染的页面，服务端可以直接将带数据的内容通过 HTML 文本的形式返回，搜索引擎爬虫可以轻易的获取页面内容，而对于客户端渲染的应用，客户端必须执行服务器返回的 Javascript 才能得到正确的网页内容。目前，除 Google、Bing 支持 Javascript 外（也会有一些限制），其他的大部分搜索引擎都不支持 Javascript，也就无法获取正确的网页内容。而本文要讲的技术方案,正是为了解决SPA下的SSR技术困境.接下来我们看看常用的ssr技术实现方案.

摘要


ssr(服务端渲染)技术实现方案

接下来笔者将列举几个常用的基于vue/react的服务端渲染方案,如下: 使用next.js/nuxt.js的服务端渲染方案 使用node+vue-server-renderer实现vue项目的服务端渲染 使用node+React renderToStaticMarkup实现react项目的服务端渲染 传统网站通过模板引擎来实现ssr(比如ejs, jade, pug等) * 使用rendertron实现SPA项目的服务端渲染

以上是笔者之前实践过的方案, 最后一种方案笔者将在下面一节详细介绍, 因为next/nuxt是已有的服务端渲染解决方案,文档写的比较详细,这里笔者就不再做过多介绍了,这里我们简单介绍一下第二种和第三种方案.

1.使用node+vue-server-renderer实现vue项目的服务端渲染

首先vue-server-renderer依赖node的api,所以只能运行在node环境, 我们需要先安装它:

npm install vue vue-server-renderer --save

在node中使用,代码如下:

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>趣谈前端： {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

当然实际情况比上面的案例要复杂很多, 我们可以专门写一个template.html,然后通过模板差值的方式导入后端数据,进而实现服务端渲染. 在使用这种方式的时候我们仍然要维护两套代码.

2.使用node+React renderToStaticMarkup实现react项目的服务端渲染

使用这种方案和vue的方案类似, 只不过这里我们用了react自带的api来实现ssr,简单的实现代码如下:

var express = require('express');
var app = express();

var React = require('react'),
    ReactDOMServer = require('react-dom/server');

var App = React.createFactory(require('./App'));

app.get('/', function(req, res) {
    var html = ReactDOMServer.renderToStaticMarkup(
        React.DOM.body(
            null,
            React.DOM.div({id: 'root',
                dangerouslySetInnerHTML: {
                    __html: ReactDOMServer.renderToStaticMarkup(App())
                }
            })
        )
    );

    res.end(html);
});

app.listen(80, function() {
    console.log('running on port ' + 80);
});

以上使用了renderToStaticMarkup, 我们都知道react-dom提供了两种服务端渲染函数,如下: 1. renderToString：将 React Component 转化为 HTML 字符串，生成的 HTML 的 DOM 会带有额外属性：各个 DOM 会有data-react-id属性，第一个 DOM 会有data-checksum属性。

  1. renderToStaticMarkup：将 React Component 转化为 HTML 字符串，但是生成 HTML 的 DOM 不会有额外属性，从而节省 HTML 字符串的大小。

所以这里我们一般使用renderToStaticMarkup函数. 同理在实际业务场景中我们也会写2套代码来实现ssr.

使用谷歌rendertron实现服务端渲染

Google 推出的 Rendertron 使得 SPA 也能够被不支持执行 Javascript 的搜索引擎爬取渲染后的内容。其原理主要是通过使用 Headless Chrome 在内存中执行 Javascript，并在得到完整内容后，将内容返回给客户端。

我们通常会将 Rendertron 部署为一个独立的 HTTP 服务，然后为 Web 应用框架配置 Google 官方提供的中间件或者在反向代理上添加相应路由规则，使得能够在检测到搜索引擎爬虫的 UA 时，可以将请求代理给 Rendertron 服务。笔者总结了一下其基实现本原理图,方便大家理解:


Rendertron 提供了两个主要 API: Render 用于渲染网站内容 Screenshot 用于将网站内容截图

在 SEO 场景下我们使用的是 Render 接口。

比如当客户端请求我们的网站时，我们服务端可以根据请求头 User Agent 发现是否包含了 Baiduspider/2.0 关键字，如果是, 那么可以认定为当前的客户端是一个百度爬虫此时可以将这个请求代理 Rendertron 服务的 /render/客户端请求地址 路由，让 Rendertron 帮助执行网页内的 Javascript，并将最终内容返回给搜索引擎爬虫。

使用Rendertron的好处在于我们可以不用考虑服务端渲染的部分,完全按照SPA的模式开发项目,也不用为了兼容服务端渲染而写多余的兼容代码.

具体实现

首先我们需要安装Rendertron, 可以在github中找到其安装和使用方法,在安装前最好先安装docker, 目前docker的最新版本以支持傻瓜式安装,所以安装启动都非常方便.

1.本地运行

在安装好docker之后, 我们先全局安装rendertron:

npm install -g rendertron

然后我们需要安装谷歌浏览器(作为合格的开发都应该有谷歌浏览器~),然后就可以用它的cli来启动服务了,我们只需要在命令行执行如下命令:

rendertron

之后控制台会打印本地服务启动的地址,比如localhost:3000 这个时候我们只需要在地址后面输入我们想渲染的网站即可: localhost:3000:render/你的网站地址, 如下图所示:

此时我们的rendertron服务已经搭建完成, 接下来我们可以在服务端来实现ssr了,代码如下:

const koa = require('koa');
const app = new koa();
app.use(async (ctx, next) => {
    ctx.type = "html";
    if(/Baiduspider\/2\.0/g.ctx.header['user-agent']) {
      // 是百度爬虫,则转发到rendertron服务中
      ctx.redirect(`http://localhost:3000/render/${ctx.url}`)
    }else {
        // 渲染正常的路由页面
    }

    await next();
    })

app.listen('80');

当然如果我们后端技术栈采用的是express, rendertron有专门的中间件可以使用, 不仅仅可以拦截百度的爬虫,具体用法如下:

const express = require('express');
const rendertron = require('rendertron-middleware');

const app = express();

app.use(rendertron.makeMiddleware({
  proxyUrl: 'http://your-rendertron-instance/render',
}));

// 正常的路由和页面渲染逻辑
app.use(...);
app.listen(81);

所以为了降低开发成本笔者建议可以采用rendertron的方案, 单独部署一套服务器用来实现ssr. 但是我们需要考虑当网站流量增加时的扩容问题，以及配置搭建反向代理或负载均衡等配套服务。

后期展望

后期笔者将会继续带大家探索大前端相关内容, 基本框架如下:


最后

如果想学习更多H5游戏, webpack，node，gulp，css3，javascript，nodeJS，canvas数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。

如果觉得文章不错, 欢迎点赞 + 关注, 鼓励作者继续创作高质量内容~

相关推荐

土豪农村建个别墅不新鲜 建个车库都用框架结构?

农村建房子过去都是没车库，也没有那么多豪车，一般直接停在路边或者院子里。现在很多人都会在建房子的时候留一个车库，通过车库可以直接进入客厅，省得雨雪天气折腾。农村土豪都是有钱任性，建房子跟我们普通人不一...

自建框架结构出现裂缝怎么回事?

三层自建房梁底与墙体连接处裂缝是结构问题吗？去前帮我姑画了一份三层自建房的图纸，前天他们全部装修好了。我姑丈突然打电话给我说他发现二层的梁底与墙分离了，有裂缝。也就是图纸中前面8.3米那跨梁与墙体衔接...

钢结构三维图集-框架结构(钢柱对接)

1、实腹式钢柱对接说明1：1.上节钢柱的安装吊点设置在钢柱的上部，利用四个吊点进行吊装；2.吊装前，下节钢柱顶面和本节钢柱底面的渣土和浮锈要清除干净，保证上下节钢柱对接面接触顶紧；3.钢柱吊装到位后...

三层框架结构主体自建房设计案例!布局13*12米占地面积156平米!

绘创意设计乡村好房子设计小编今日头条带来分享一款：三层框架结构主体自建房设计案例！布局13*12米占地面积156平米！本案例设计亮点：这是一款三层新中式框架结构自建房，占地13×12米，户型占地面积...

Casemaker机箱框架结构3D图纸 STEP格式

农村自建房新宠!半框架结构凭啥这么火?内行人揭开3个扎心真相

回老家闲逛，竟发现个有意思的现象：村里盖新房，十家有八家都选了"半框架结构"。隔壁王叔家那栋刚封顶的二层小楼，外墙红砖还露着糙面没勾缝，里头的水泥柱子倒先支棱得笔直，这到底是啥讲究？蹲...

砖混结构与框架结构!究竟有何区别?千万别被坑!

农村自建房选结构，砖混省钱但出事真能保命吗？7月建材价格波动期，多地建房户因安全焦虑陷入选择困境——框架结构虽贵30%，却是地震区保命的关键。框架柱和梁组成的承重体系，受力分散得像一张网。砖混靠墙硬扛...

砖混结构与框架结构，究竟有何区别?千万别被坑!

农村建房选砖混结构还是框架结构？这个问题算是近期留言板里问得最多的问题了。今天咱们说说二者的区别，帮您选个合适的。01成本区别假如盖一栋砖混结构的房子需要30万，那么换成框架结构，一般要多掏30%的费...

6个小众却逆天的App神器，个个都是黑科技的代表

你的手机上有哪些好用的软件？今天我就给大家分享6个小众却逆天的App神器，个个都是黑科技的代表！01*Via浏览器推荐理由：体积极小的浏览器，没有任何广告。使用感受：它的体量真的很小，只有702KB，...

合肥App开发做一个app需要多少钱?制作周期有多久?

在移动互联网时代，开发一款APP已成为企业数字化转型与个人创业的重要途径。然而，APP的开发成本与制作周期受功能复杂度、技术架构、团队类型等多重因素影响，差异极大。好牛软件将从这两个维度展开分析，帮助...

详解应对App臃肿化的五大法则

编者注：本文转自腾讯ISUX。先来看一张图：图上看到，所有平台上用户花费时间都在减少，除了移动端。观察身边也是如此，回家不开电脑的小伙伴越来越多。手机平板加电视，下班场景全搞定。连那些以前电脑苦手的...

实战!如何从零搭建10万级 QPS 大流量、高并发优惠券系统

需求背景春节活动中，多个业务方都有发放优惠券的需求，且对发券的QPS量级有明确的需求。所有的优惠券发放、核销、查询都需要一个新系统来承载。因此，我们需要设计、开发一个能够支持十万级QPS的券系...

8种移动APP导航设计模式大对比

当我们确定了移动APP的设计需求和APP产品设计流程之后，开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来？也许我们对比和了解了其他一些...

数字资产支付 App 的技术框架

开发一款功能强大、安全可靠的数字资产支付App需要一个整合了区块链技术、后端服务、前端应用以及第三方集成的全栈技术框架。这个框架的核心在于保障数字资产的安全流通，并将其高效地桥接到传统的法币支付场...

从MyBatis到App架构:设计模式全景应用指南

从MyBatis到App架构：设计模式全景应用指南引言在企业级应用和服务端开发领域，MyBatis凭借其灵活、简洁、强大的ORM映射能力被广泛应用。而它之所以能拥有如此优秀的可扩展性和工程可维护性，正...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2024040476号-14