在2015年,Pinterest决定转向React。但是对于一个有数百万活跃用户的站点来说,谈何容易。Pinterest转向React的故事本质上是Pinterest转向通用JavaScript的故事。

作为前端技术引领的团队,支付宝前端团队推出了基于Node.js的Web框架,适用于大部分的Web应用,感觉很高大上。下面简要介绍Chair的设计思想、功能架构和开发状况。

React是最受欢迎的客户端 JavaScript 框架,但你知道吗,你可以使用 React
在服务器端进行渲染?

Pinterest的软件工程师Imad
Elyafi写道,决定转向React的部分原因是React是“黄金标准”,有着“庞大的开发者社区”以及它“能极大地提升工程效率和质量”。React通常用在通用JavaScript场景下,在此服务器和浏览器使用同一类模板。

一、Chair的由来和设计思想

假设你已经在客户端使用 React 构建了一个事件列表
app。该应用程序使用了您最喜欢的服务器端工具构建的API。几周后,用户告诉您,他们的页面没有显示在
Google 上,发布到 Facebook 时也显示不出来。
这些问题似乎是可以解决的,对吧?

澳门葡萄京官方网站,Pinterest的服务器端引擎是Django,它使用Jinja模板引擎。然而,Pinterest的客户端的JavaScript使用Nunjucks,它的灵感来源于Jinja,也与之相似。这导致了代码的重复,一份Python版和一份JavaScript版。但是他们无法抛弃一切而转向React,Pinterest的软件工程师Jessica
Chan说道。

历史上,支付宝前端项目都是直接基于Java后端开发的。这种架构下,前端工程师做出网页模板,交给后端的Java引擎渲染。支付宝采用的Java引擎是名为Sofa的MVC框架。

您会发现,要解决这个问题,需要在初始加载时从服务器渲染 React
页面,以便来自搜索引擎和社交媒体网站的爬虫工具可以读取您的标记。有证据表明,Google
有时会执行 javascript
程序并且对生成的内容进行索引,但并不总是的。因此,如果您希望确保与其他服​​务有良好的SEO兼容性,那么始终建议使用服务器端渲染。

我们需要一个方案,能让我们在不打断产品组工作和影响用户体验的情况下,迭代地转换数以百计的Pinterest构件。第一步就是要将客户端和服务器端统一到单一的模板渲染引擎,然后再将引擎替换掉。如果服务器能解释JavaScript,使用Nunjucks渲染模板以及共享客户端代码,我们就能进行迭代迁移到React。

对于前端工程师来说,这种架构有很多不方便的地方。首先,需要了解后端的实现,并且依赖开发环境中的dev服务器进行调试开发;其次,开发细节需要与后端的Java工程师沟通,交流成本相当大;最后,难以发起技术创新,因为只要涉及后端的调整,推动起来非常困难。在前端技术日新月异的今天,这已经越来越成为前端工程师心中的痛。

在本教程中,我们将逐步介绍服务器端的呈现示例。包括围绕与API交流的React应用程序的共同路障。在本教程中,我们将逐步向您介绍服务器端的渲染示例。包括围绕着
APIS 交流一些在服务端渲染 React 应用程序的共同障碍。

在触及React之前,该团队重新设计了服务器渲染引擎的架构以使用现成的Nunjucks模板。Jessica
Chan说,他们没有在Django的内部渲染Jinja模板,而是创建了一个进程使用Node来渲染模板。“最终,我们在Nginx代理层后使用常驻的Node进程,将接口架构设计为每一个网络请求都是无状态的渲染过程。我们因此能将请求分发到这些进程组,并在需要的时候扩展进程数。”

Chair框架就是在这种背景下诞生的,我们希望通过加入一个Node层,加速前端开发,提升研发效率,提高网站整体性能和系统的可维护性。

服务端渲染的优势

一旦该系统上线,他们就能慢慢转向基于React的组件渲染模式。Elyafi说只要可能他们都扩展Nunjucks模板语言来渲染React。

作为Sofa的替代,Chair直接与底层的Java服务通信,而客户端浏览器则与Chair通信,这样就不使用Sofa了。前端工程师因此可以完全不碰Java,使用熟悉的JavaScript语言,同时在浏览器和服务器两端进行快速迭代。

可能您的团队谈论到服务端渲染的好处是首先会想到
SEO,但这并不是唯一的潜在好处。

{% if in_react %}
    {{ component('MyReactComponent', {pinId: '123'}) }}
{% else %}
    {{ module('MyDenzelComponent', pinId='123') }}
{% endif %}

事实上,Chair这个名字就是来自跟Sofa的对比,因为两者都能坐人,但是椅子轻多了。支付宝已经有了沙发,我们想再为它添一把椅子。

更大的好处如下:服务器端渲染能更快地显示页面。使用服务器端渲染,您的服务器对浏览器进行响应是在您的
HTML 页面可以渲染的时候,因此浏览器可以不用等待所有的 JavaScript
被下载和执行就可以开始渲染。当浏览器下载并执行页面所需的 JavaScript
和其他资源时,不会出现 “白屏” 现象,而 “白屏” 这是在完全有客户端呈现的
React 网站中可能发生的情况。

component关键字告诉模板引擎应该使用基于React的组件,而不是基于Nunjucks的。Pinterest转向React的努力还在继续。

Chair为前端开发,带来了很多便利。

入门

英文原文Pinterest’s Switch to Universal JavaScript and
React


提高了研发效率,前端工程师直接可以改动服务器,避免了与Java后端不必要的沟通成本。●
更清晰的职责划分,前端针对表现层开发,后端针对业务和数据开发。 ●
节省人工,同样的组件只需要写一次,不用再为浏览器和服务器各写一遍了。●
预期的性能提升,Node作为服务器端时,有很强的HTTP请求处理能力。

接下来让我们来看看如何将服务器端渲染添加到一个基本的客户端渲染的使用Babel和Webpack的React应用程序中。我们的应用程序将增加从第三方
API
获取数据的复杂性。我们在GitHub上提供了相关代码,您可以在其中看到完整的示例。

编译:InfoQ

目前,Chair已经投入了生产环境,与Sofa各自支持着不同的支付宝Web应用。预计不远的将来,会出现更多基于Chair的Web应用。

提供的代码中只有一个 React 组件,`hello.js`,这个文件将向 ButterCMS
发出异步请求,并渲染返回的 JSON 列表的博文。ButterCMS
是一个基于API的博客引擎,可供个人使用,因此它非常适合测试现实生活中的用例。启动代码中连接着一个
API token,如果你想使用你自己的 API token 可以使用你的 GitHub 账号登入
ButterCMS。

二、Chair的结构

import React from 'react';import Butter from 'buttercms'const butter = Butter('b60a008584313ed21803780bc9208557b3b49fbb');var Hello = React.createClass({ getInitialState: function() { return {loaded: false}; }, componentWillMount: function() { butter.post.list => { this.setState({ loaded: true, resp: resp.data }) }); }, render: function() { if  { return (  {this.state.resp.data.map => { return ( {post.title} ) })}  ); } else { return Loading...; } }});export default Hello;

Chair的基础代码,是基于Koa框架的再开发,使用的语言是下一代JavaScript——ECMAScript
6,模板引擎是Nunjucks,但也可选用其他引擎。同时兼容Velocity模板,现有绝⼤部分模板⽂件⽆需修改也能正常渲染。

启动器代码中包含以下内容:

整个框架从浏览器到服务器,一共分成五层:

package.json – 依赖项 Webpack 和 Babel 配置 index.html – app 的 HTML
文件 index.js – 加载 React 并渲染 Hello 组件

● 路由层:适配不同路径的HTTP请求● 中间件层:加工HTTP请求●
控制器层:部署业务逻辑● 服务层:提供内部的统一API,供不同业务调用●
代理层:负责与Java服务通信,提供统一格式的数据

要使应用运行,请先克隆资源库:

除了模板引擎以外,Chair还部署了一些功能组件,比如mock。

git clone ...cd ..

npm install

npm run start

Chair根据业务实际需求和现有架构高度定制。虽然从结构上看,Chair可以提供完整的后端功能,但目前主要用于模板渲染和路由。真正的业务逻辑和数据处理,还是要交给后端的Java服务。

浏览器输入 可以看到这个 app:
(这里译者进行补充,package.json 里的 start 命令改为如下:”start”:
webpack-dev-server –watch)

三、性能提升

如果您查看渲染页面的源代码,您将看到发送到浏览器的标记只是一个到
JavaScript
文件的链接。这意味着页面的内容不能保证被搜索引擎和社交媒体平台抓取:

Node的加入,为很多功能提供了很大的性能改进。根据压测的结果,使用Chair比使用原来的方案,响应时间和系统负载能力至少提高一倍以上。

增加服务器端渲染

四、Chair的开发进度

接下来,我们将实现服务器端渲染,以便将完全生成的HTML发送到浏览器。如果要同时查看所有更改,请查看GitHub上的差异。

12月上旬,Chair发布了0.5版。除了修正Bug,这一版主要添加了以下功能。

To get started, we’ll install Express, a Node.js server side application
framework:

● 支持 cookie session, 不依赖 ta● 支持连接 MySQL数据库● 支持mvc stat 和
rpc stat 日志统计● 支持统一导航 uninav 模板● 页面数据模拟 pagemock

开始前,让我们安装 Express,一个 Node.js 的服务器端应用程序框架:

目前,Chair正处于密集开发之中,预计明年上半年发布1.0.0版。很期待,要是到时候能开源就最好了。大家可以先了解下了。

npm install express --save

我们要创建一个渲染我们的 React 组件的服务器:

import express from 'express';import fs from 'fs';import path from 'path';import React from 'react';import ReactDOMServer from 'react-dom/server';import Hello from './Hello.js';function handleRender { // 把 Hello 组件渲染成 HTML 字符串 const html = ReactDOMServer.renderToString; // 加载 index.html 的内容 fs.readFile('./index.html', 'utf8', function  throw err; // 把渲染后的 React HTML 插入到 div 中 const document = data.replace(//, `${html}`); // 把响应传回给客户端 res.send;}const app = express();// 服务器使用 static 中间件构建 build 路径app.use('/build', express.static(path.join;// 使用我们的 handleRender 中间件处理服务端请求app.get;// 启动服务器app.listen;让我们分解下程序看看发生了什么事情...handleRender 函数处理所有请求。在文件顶部导入的ReactDOMServer 类提供了将 React 节点渲染成其初始 HTML 的 renderToString() 方法ReactDOMServer.renderToString;

这将返回 Hello 组件的 HTML ,我们将其注入到 index.html 的 HTML
中,从而生成服务器上页面的完整 HTML 。

const document = data.replace(//,`${html}`);To start the server, update the start script in package.json and then run npm run start:要启动服务器,请更新 `package.json` 中的起始脚本,然后运行 npm run start :"scripts": { "start": "webpack && babel-node server.js"},

浏览
查看应用程序。瞧!您的页面现在正在从服务器渲染出来了。但是有个问题,如果您在浏览器中查看页面源码,您会注意到博客文章仍未包含在回复中。这是怎么回事?如果我们在Chrome中打开网络标签,我们会看到客户端上发生API请求。

虽然我们在服务器上渲染了 React 组件,但是 API 请求在 componentWillMount
中异步生成,并且组件在请求完成之前渲染。所以即使我们已经在服务器上完成渲染,但我们只是完成了部分。事实上,React
repo 有一个 issue,超过 100 条评论讨论了这个问题和各种解决方法。

在渲染之前获取数据

要解决这个问题,我们需要在渲染 Hello 组件之前确保 API
请求完成。这意味着要使 API 请求跳出 React
的组件渲染循环,并在渲染组件之前获取数据。我们将逐步介绍这一步,但您可以在GitHub上查看完整的差异。

To move data fetching before rendering, we’ll install react-transmit:

要在渲染之前获取数据,我们需安装 react-transmit:

npm install react-transmit --save

React Transmit
给了我们优雅的包装器组件,用于获取在客户端和服务器上工作的数据。

这是我们使用 react-transmit 后的组件的代码:

import React from 'react';import Butter from 'buttercms'import Transmit from 'react-transmit';const butter = Butter('b60a008584313ed21803780bc9208557b3b49fbb');var Hello = React.createClass { if  { return (  {this.props.posts.data.map => { return ( {post.title} ) })}  ); } else { return Loading...; } }});export default Transmit.createContainer(Hello, { // 必须设定 initiallVariables 和 ftagments ,否则渲染时会报错 initialVariables: {}, // 定义的方法名将成为 Transmit props 的名称 fragments: { posts() { return butter.post.list => resp.data); } }});

我们已经使用 Transmit.createContainer
将我们的组件包装在一个高级组件中,该组件可以用来获取数据。我们在 React
组件中删除了生命周期方法,因为无需两次获取数据。同时我们把 render
方法中的 state 替换成 props,因为 React Transmit 将数据作为 props
传递给组件。

为了确保服务器在渲染之前获取数据,我们导入 Transmit 并使用
Transmit.renderToString 而不是 ReactDOM.renderToString 方法

import express from 'express';import fs from 'fs';import path from 'path';import React from 'react';import ReactDOMServer from 'react-dom/server';import Hello from './Hello.js';import Transmit from 'react-transmit';function handleRender { Transmit.renderToString.then(({reactString, reactData}) => { fs.readFile('./index.html', 'utf8', function  throw err; const document = data.replace(//, `${reactString}`); const output = Transmit.injectIntoMarkup(document, reactData, ['/build/client.js']); res.send;}const app = express();// 服务器使用 static 中间件构建 build 路径app.use('/build', express.static(path.join;// 使用我们的 handleRender 中间件处理服务端请求app.get;// 启动服务器app.listen;重新启动服务器浏览到 http://localhost:3000。查看页面源代码,您将看到该页面现在完全呈现在服务器上!更进一步我们做到了!在服务器上使用 React 可能很棘手,尤其是从 API 获取数据时。幸运的是,React社区正在蓬勃发展,并创造了许多有用的工具。如果您对构建在客户端和服务器上渲染的大型 React 应用程序的框架感兴趣,请查看 Walmart Labs 的 Electrode 或Next.js。或者如果要在 Ruby 中渲染 React ,请查看 AirBnB 的 Hypernova 。原文地址:https://css-tricks.com/server-side-react-rendering/原文作者:Roger Jin以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。