Home

Baurine's Blog

Work hard, Enjoy life.

Blog GitHub New Blog
‹
›

22 Apr 2018
在 Rails 中使用 React 并实现 SSR 的一种实践

背景

这是我在公司内部所做的一次分享 (听众也有 PM，所以讲的内容不会很深入)。先说说背景，我为什么要做这次分享。

主要是我在一个 rails 项目中使用了 react 去渲染前端页面，且支持 SSR，但没有做前后端分离，想把一些经验做一些总结，以便将来也许可以用到其它项目中。

项目的具体内容在此略过。

这个项目刚开始做的时候，其实是一个很传统的 rails web 项目，前端页面在服务端通过 html 模板生成。

但是，做了一段时间后，客户有一些想法了：

  1. 要用 react 来渲染前端页面，可能是因为他们觉得 react 很 cool 吧，而且当时在国外正流行。(没错，这是一个国外项目)
  2. 必须支持 SEO (Search Engine Optimization)。(因为这是一个内容型网站)

我们知道，react 是一个客户端渲染 (Client Side Rendering, CSR) 的前端框架 (或者说是库)，但是如果我们要支持 SEO 的话，意味着同时必须做服务端染渲 (Server Side Rendering, SSR)。

方法之一，就是做前后端分离，把 rails 代码改造成只提供 API，然后在前面加一个 Node 的中间层做同构，可以用 Next.js 或 Express/Koa。

但当时的情况是，没有前后端分离的经验，也没做过 react 的服务端渲染，最重要的是，时间不够我们做这么大的改变。

所幸的是，经过短暂的调研，发现一个叫 react-rails 的 gem (当时的版本还是 1.10) 可以快速地满足我们的需求，支持在 rails 中使用 react，支持 SSR，且不需要前后端分离。

用法大概是这样子的。以我们后面要实现的页面为例，假设我们有一个显示电影信息的页面。

传统的 rails 代码是这样的：

class MoviesController < ApplicationController
  def show
    @movie = Movie.find params[:id]
    # render 'show'
  end
end

# show.html.erb
<div class='movie-container'>
  <img class='movie-cover' src=<%= @movie.cover_img %>>
  <div class='movie-info'>
    <h1><%= @movie.title%></h1>
    <p><%= @movie.desc %></p>
  </div>
</div>

在 action 中从数据库取数据，然后再去 render html 模板。

用了 react-rails 后，在 action 中就不再是去 render html 模板，而是 render 一个 react component。代码如下：

class MoviesController < ApplicationController
  def show
    @movie = Movie.find params[:id]
    render component: 'MovieItem',
           props: {
             movie: @movie
           }
  end
end

# movie_item.jsx
class MovieItem extends React.Component {
  render() {
    const { movie } = this.props
    return (
      <div className='movie-container'>
        <img className='movie-cover' src={movie.cover_img}/>
        <div className='movie-info'>
          <h1>{movie.title}</h1>
          <p>{movie.desc}</p>
        </div>
      </div>
    )
  }
}

或者另一种做法是，不修改 show action 的代码，还是让它渲染 show.html.erb，但在 show.html.erb 中删掉原来的模板，使用 react-rails 提供的 react_component view helper 方法来渲染 MovieItem component，如下所示：

# show.html.erb
<%= react_component('MovieItem', {movie: @movie}, {prerender: true}) %>

两者的区别是，前者默认做 SSR，即 {prerender: true}，后者可以通过第三个参数来选择做 SSR 还是不做 SSR，如果 prerender 为 false，则不做 SSR。

其原理是，当执行到 react_component 方法时，如果 prerender 为 false，就会简单地生成一个空的 div 标签，它包含 data-react-class 和 data-react-props 两个属性，前者用来存放要要渲染的 component 的名字，后者存放此 component 的 props。生成的 html 如下所示：

  <body>
<div data-react-class="MovieItem" data-react-props="{&quot;movie&quot;:{&quot;id&quot;:1,&quot;cover_img&quot;:&quot;https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2516578307.webp&quot;,&quot;title&quot;:&quot;头号玩家 Ready Player One (2018)&quot;,&quot;desc&quot;:&quot;在2045年，现实世界衰退破败，人们沉迷于VR(虚拟现实)游戏“绿洲(OASIS)”的虚幻世界里寻求慰藉。马克·里朗斯饰演的“绿洲”的创始人临终前宣布，将亿万身家全部留给寻获他隐藏的彩蛋的游戏玩家，史上最大规模的寻宝冒险就此展开，由泰伊·谢里丹饰演的男主角韦德·沃兹(Wade Watts/Parzival)和数十亿竞争者踏上奇妙而又危机重重的旅途。&quot;,&quot;created_at&quot;:&quot;2018-04-20T14:05:25.829Z&quot;,&quot;updated_at&quot;:&quot;2018-04-20T14:05:25.829Z&quot;}}"></div>

  </body>

浏览器得到此 html，执行其中的 js 代码 (在 head 中引入)，js 代码可以从 data-react-class 和 data-react-props 属性中得知要渲染的 component 以及其 props，因此创建相应的 MovieItem component，并向其传递从 data-react-props 中解析得到的 props，调用其 render() 方法进行渲染。

如果 prerender 为 true，rails 会调起一个 JavaScript 的环境来把 MovieItem 的 render() 方法在服务器端先执行一遍，生成相应的 html 标签并返回给浏览器，生成的 html 如下所示：

  <body>

<div data-react-class="MovieItem" data-react-props="{&quot;movie&quot;:{&quot;id&quot;:1,&quot;cover_img&quot;:&quot;https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2516578307.webp&quot;,&quot;title&quot;:&quot;头号玩家 Ready Player One (2018)&quot;,&quot;desc&quot;:&quot;在2045年，现实世界衰退破败，人们沉迷于VR(虚拟现实)游戏“绿洲(OASIS)”的虚幻世界里寻求慰藉。马克·里朗斯饰演的“绿洲”的创始人临终前宣布，将亿万身家全部留给寻获他隐藏的彩蛋的游戏玩家，史上最大规模的寻宝冒险就此展开，由泰伊·谢里丹饰演的男主角韦德·沃兹(Wade Watts/Parzival)和数十亿竞争者踏上奇妙而又危机重重的旅途。&quot;,&quot;created_at&quot;:&quot;2018-04-20T14:05:25.829Z&quot;,&quot;updated_at&quot;:&quot;2018-04-20T14:05:25.829Z&quot;}}" data-hydrate="t"><div class="movie-container" data-reactroot=""><img class="movie-cover" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2516578307.webp"/><div class="movie-info"><h1>头号玩家 Ready Player One (2018)</h1><p>在2045年，现实世界衰退破败，人们沉迷于VR(虚拟现实)游戏“绿洲(OASIS)”的虚幻世界里寻求慰藉。马克·里朗斯饰演的“绿洲”的创始人临终前宣布，将亿万身家全部留给寻获他隐藏的彩蛋的游戏玩家，史上最大规模的寻宝冒险就此展开，由泰伊·谢里丹饰演的男主角韦德·沃兹(Wade Watts/Parzival)和数十亿竞争者踏上奇妙而又危机重重的旅途。</p></div></div></div>

  </body>

这种情况下，浏览器直接就可以把内容先展示出来，然后当 js 代码执行时，创建 MovieItem component 后，会再次执行 render() 方法，把这部分内容重新渲染一遍，但用户是感知不出来的。(具体实现的细节还有待探索)

所以，做 SSR 和不做 SSR 的区别之一是，做 SSR 时，因为 render() 方法首先会在服务端被执行一次，所以不能在 render() 方法中调用到任何浏览器相关的 API，比如 window.location.href，必须把它移到 componentDidMount() 中去调用。componentDidMount() 方法只会在浏览器端组件被加载后调用，在服务端不会被调用。

但是，可以从上面的代码看到，用 react-rails 后，不管做不做 SSR，我们需要渲染的数据都是直接在服务端获得的，并没有在客户端去发 ajax 请求拿数据的逻辑，所以并没有前后端分离。在这里，我们仅仅是用 react component 去替代了原来的 html 模板，渲染 props 传过来的数据，实现了 React 所宣称的它只是一个很薄的 view 层。

所以，借助 react-rails 后，我们的工作就简单多了，就是把一个个 html 模板替换成 react component，什么 redux，react-router，统统都没去用。

相比传统的 html 模板渲染，react component 的 SSR 渲染可能效率会低一些，毕竟要再起一个 JavaScript 环境去做这个事情。

但相比写传统的 html 模板代码，我还更愿意也更擅长写 react 代码，心里还是美滋滋的。

但是，此时的 react-rails 有一个大坑，从上面 MovieItem 的实现也可以看出，它没有 export，因为每一个 react component 默认都是全局可见的，也没有 import，因为它压根就不能使用 npm 包，因此也没有一个 package.json 的文件。

这意味着，我们必须要自己手动实现每一个 component。这很让人头疼，也是我做这个项目时心头一直的一个痛。就担心哪天要实现一个很复杂的组件，就不知道该怎么办了。

但直到上个月，都一直还 OK，大部分组件都不是很复杂，还能 hold 得住，如果有别人实现过的组件，比如 star rating，auto size textarea，就参考别人的实现，把别人的代码翻译简化一下，不复杂的就自己实现，比如 collapse。

直到有一天，我们的设计稿上出现了一个 range slider，略复杂，网上也找到了几乎一样的实现 - rc-slider，看了一下它的源码，首先，源码就很复杂，然后它又依赖了 rc-tooltip 等一堆 npm 包，这完全 copy 不动啊… 我们也承担不起花费很多时间去重新实现这么一个组件。

所以我们就开始思考怎么来彻底解决这个痛 - 在 rails 中使用 npm 包。

好消息是，在今天，这个方法并不难 (借助 webpacker)，但在一年多前，我们刚开始使用 react-rails 的时候，那时候还是一个难点。react-rails 中的有一些讨论如何使用第三方库的 issue：

有一些 workaround，比如使用 rails assets gem，或者将第三方库编译后的代码放到 app/assets/javascripts/vendor 目录下 … 但都不是很完美的解决方案。browserify-rails 是最近才知道的，但有了 webpacker 后就没有研究了。

去年 rails 5.1 在发布时，同时发布了一个叫 webpacker 的 gem，把前端的打包工具 webpack 整合进 rails，有了它，我们就可以方便地在 rails 中使用各种前端框架，react / vue / angular / stimulus … 和使用 npm 包。

新版本的 react-rails (2.4.4) 也可以很好地和 webpacker 配合使用，因此果断地将 react-rails 从 1.10 升级到 2.4.4，并引入 webpacker。

当然，升级过程总是痛苦的，踩了各种坑，花了好几天才升级完毕。react-rails 的错误信息提示是个大问题，如果一个组件里面包裹了多层子组件，最里面的子组件写错了，它只会说最外层组件出错了，你不知道具体错在哪，只能一层一层排除。错误信息也不够明确，路径写错了，是 “Element tyep is invalid”，变量重复定义，也是这个错，什么有价值的信息也没有，不会告诉你是哪个文件找不到，哪个变量重复定义。吐槽一下。

Encountered error "#<ExecJS::ProgramError: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.>" when prerendering HelloWorld with {"greeting":"Hello"}

升级改造完成后，yarn install rc-slider，改改样式，range slider 就搞定了，一个心头的痛总算是搞定了。

总结就是，webpacker 支持我们在 rails 中使用 npm 包和 react，react-rails 支持对 react 做 SSR。

以上就是背景，接下来终于要进入主题，以下是我要讲的内容提纲。

Content Table

  1. What’s SSR (server side rendering) & CSR (client side rendering), comparison
  2. What’s SEO (search engine optimization), How search engine works
  3. CSR’s drawbacks (SEO not friendly & blank first screen)
  4. Demo webpacker to support use react in rails
    • Setup webpacker
    • Implement SSR / CSR examples (MoviesController)
  5. Demo use third party npm packages (react-stars)
  6. Demo blank first screen and workaround (loading status)
  7. Demo react-rails to support SSR for react
  8. Summary

(当初准备的是英文分享，这部分就懒得翻译了)

前面两小节是用来给 PM 普及一下基础知识，开发人员可以略过。

SSR & CSR

首先，我准备了一个 demo，展示两个简单的页面，一个是传统的 SSR 页面，一个是 CSR 页面。

它们在浏览器中看上去是一模一样，实际也确实如此。

但这只是表面现象，我们要透过现象看本质，来看一下它们的源码。

左侧的 SSR 页面，源码 body 中的内容，和我们在浏览器中看到的是一样的，这些内容在服务器就生成好了。

而右侧的 CSR 页面，源码 body 中除了一个 js 文件，空空如也，那浏览器中我们看到的 img, h1, p 是从哪来的呢，那很明显只能是由 js 代码在客户端这边生成的了。

所以，前者就是所谓的服务端渲染，html 中的内容主要在服务端生成；而后者就是客户端渲染，html 中的内容主要在客户端生成。

SEO

SEO 是 search engine optimization 的缩写，意为搜索引擎优化，意思是说，如何优化你的网页内容或结构，当用户搜索相关的关键字时，能使我们的网页在搜索结果中排得越前，这样我们就能获得更多的流量。这其实是一门挺大的学问。

那搜索引擎到底是怎么工作的呢，为什么我们在 Google 中搜索一些关键字，就能找到相关的网页呢。

这是因为每一个搜索引擎都有自己的 spider，即网络爬虫，这些爬虫不停地在爬取全世界所有的网页，然后解析和提取其中的文本内容，然后存到自己的数据库中。

需要注意的一点是，spider 不会去执行网页上的 js 代码，它完全不关心 js 代码和 css 样式。

让我们来对比一下 spider 是如何解析 SSR 页面和 CSR 页面的。

从上面的对比可以看出，CSR 页面对 SEO 是不友好的，因为 spider 无法从中得到有效的信息，抽取不出什么关键字，因此我们无法通过搜索引擎检索到这个网页。

一般来说，内容型的网页需要关心 SEO，比如 blog 类，新闻类网站。而另外一些则可以完全不用考虑 SEO 的问题，尤其是需要登录访问的网站，比如后台管理，论坛，社交网站 …

另外，补充一下，还有一类网页，可能对 SEO 没有需求，但是也必须做 SSR。如果你做过将网页分享到 Facebook 的话，你会发现，Facebook 会通过它的 crawler 去爬取当前网页，并从 head 部分的 meta 标签中提取出要分享的内容，比如 url, title, description, image … (A Guide to Sharing for Webmasters)

CSR 的缺点

主要有两个缺点，一是对 SEO 不友好，前面已经解释了。其二是首屏白屏的问题。

我同样准备了一个 demo，先让大家大致对这个首屏白屏现象有个体会。假设我们服务端的程序性能很差，从数据库查询数据要很久，我们用 sleep 5s 来模拟这种情况，然后来对比一下访问 SSR 页面和 CSR 页面的感受，和所观察到的现象。

两者的对比是很明显的，对于 SSR 页面的访问，在浏览器上有一个长达数秒的 loading 状态，表明还在从服务器下载网页中，只要一下载回来，网页内容就会马上显示，但在显示之前，网页内容是保持不变的。

对于 CSR 页面的访问，从服务器下载网页倒是很快，因为浏览器几乎没有 loading 状态，但下载回来后，js 再发 ajax 请求去获取数据，在数据回来之前，这中间有一个长达数秒的白屏现象。这给用户造成了一定的困扰，体验很不好。

这就是所谓的首屏白屏现象，我们后面会讲到如何来解决这个问题。

Demo webpacker to support use react in rails

Setup webpacker

OK，前面讲了一些理论，接下来我们终于可以开始来进行一些实战了。我们的目标就是来一步一步实现前面展示的两个页面，一种用传统的 SSR 来实现，一种用 react 的 CSR 来实现，进行对比，最后再对后者进行 SSR。

首先，我们创建一个新的 rails 项目。

$ rails new react-demo
$ cd react-demo

然后，我们根据 webpacker 的文档，把 webpacker 安装并配置好。

第一步是在 Gemfile 里声明 webpacker gem。

# Gemfile
gem 'webpacker', '~> 3.4'

然后执行 bundle 安装。

接着，执行 bin/rails webpacker:install 命令，这个命令会生成很多 webpack 的配置文件，我们暂时不用关心，用默认配置就行，如果想要定制的话，那还得先去学学 webpack。

需要关心的是，这个命令直接在 app 目录层级下创建了 javascript/packs 目录，我们的 js 代码就放在这里，而不像以前是放在 app/assets/javascripts 目录下。从目录层级来看，它相当于提升了一层，不再是和 images / css style 一起作为 assets 看待，而是和 controllers / models 一个层级。

另外，生成的文件还有 package.json，有了这个文件的出现，意味着我们就可以开始自由地使用 npm 包了。

webpacker 是支持多种前端框架的，比如 react / vue / angular / stimulus / elm 等等，在这里，我当然选择使用 react 啦。

所以，我们接着执行 bin/rails webpacker:install:react 引入 react。

执行这个命令后，可以看到 package.json 中就增加了对 react，react-dom 依赖了，同时在 .babelrc 中增加了对 react 的支持，这样 babel 就能转换 jsx 语法了。

// package.json
"name": "react-demo",
"private": true,
"dependencies": {
  "@rails/webpacker": "3.4"
  "@rails/webpacker": "3.4",
  "babel-preset-react": "^6.24.1",
  "prop-types": "^15.6.1",
  "react": "^16.3.2",
  "react-dom": "^16.3.2"
},

同时生成了一个 react component 示例，在 app/javascript/packs/hello_react.jsx 中，稍候我们会讲如何把它展示出来。

Implement SSR / CSR example

Create Movie model

我们想要显示电影信息的页面，所以我们先来创建一个 Movie model，设置 cover_img, title, desc 三个属性。

$ bin/rails g model Movie cover_img:string title:string desc:text
$ bin/rails db:migrate

接着，我们给这个 movies 表填充点数据，我们修改 db/seeds.rb 文件。

# db/seeds.rb
# movie data comes from movie.douban.com
Movie.create([
  {
    cover_img: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2516578307.webp',
    title: '头号玩家 Ready Player One (2018)',
    desc: '在2045年，现实世界衰退破败，人们沉迷于VR(虚拟现实)游戏“绿洲(OASIS)”的虚幻世界里寻求慰藉。马克·里朗斯饰演的“绿洲”的创始人临终前宣布，将亿万身家全部留给寻获他隐藏的彩蛋的游戏玩家，史上最大规模的寻宝冒险就此展开，由泰伊·谢里丹饰演的男主角韦德·沃兹(Wade Watts/Parzival)和数十亿竞争者踏上奇妙而又危机重重的旅途。'
  },
  {
    cover_img: 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2516914607.webp',
    title: '湮灭 Annihilation (2018)',
    desc: '莉娜（娜塔莉·波特曼 Natalie Portman 饰）是一名生物学家，一年前，她的丈夫凯恩（奥斯卡·伊萨克 Oscar Isaac 饰）在参加一项秘密任务后神秘失踪，这一年间，莉娜一直生活在悲伤之中。某天，失忆的凯恩忽然出现在了莉娜的面前，之后晕倒被送入了医院。在那里，莉娜遇见了文崔斯博士（詹妮弗·杰森·李 Jennifer Jason Leigh 饰）。'
  }
])

然后执行 bin/rails db:seed 填充数据。

进入 rails 控制台看一下数据是不是已经有了。

$ bin/rails c
2.3.3 :001 > Movie.all
  Movie Load (11.4ms)  SELECT  "movies".* FROM "movies" LIMIT ?  [["LIMIT", 11]]
=> #<ActiveRecord::Relation [#<Movie id: 1, cover_img: "https://img1.doubanio.com/view/photo/s_ratio_poste...", title: "头号玩家 Ready Player One (2018)", desc: "在2045年，现实世界衰退破败，人们沉迷于VR(虚拟现实)游戏“绿洲(OASIS)”的虚幻世界里寻求...", created_at: "2018-04-20 14:05:25", updated_at: "2018-04-20 14:05:25">, #<Movie id: 2, cover_img: "https://img1.doubanio.com/view/photo/s_ratio_poste...", title: "湮灭 Annihilation (2018)", desc: "莉娜（娜塔莉·波特曼 Natalie Portman 饰）是一名生物学家，一年前，她的丈夫凯恩（奥斯...", created_at: "2018-04-20 14:05:25", updated_at: "2018-04-20 14:05:25">]>

Create Movies controller

然后我们创建 Movies controller，并且为它生成 ssr 和 csr 两个 action。

$ bin/rails g controller Movies ssr csr

至此，准备工作完毕。

Implement SSR page

我们首先用传统的 SSR 来实现一个显示电影信息的页面。我们让它显示 id 为 1 的 movie 信息。

修改 MoviesController 的 ssr action。

class MoviesController < ApplicationController
  def ssr
    @movie = Movie.find 1
  end
  ...
end

修改相应的 view 模板 ssr.html.erb。

<div class='movie-container'>
  <img class='movie-cover' src=<%= @movie.cover_img %>>
  <div class='movie-info'>
    <h1><%= @movie.title%></h1>
    <p><%= @movie.desc %></p>
  </div>
</div>

执行 bin/rails s 启动 rails，访问 localhost:3000/movies/ssr。

给它加点 css style，修改 app/assets/stylesheets/movies.scss 文件。

.movie-container {
  display: flex;
  padding: 20px;

  .movie-info {
    margin-left: 20px;
    width: 600px;

    p {
      font-size: 22px;
    }
  }
}

刷新一下再看效果，至此，一个 SSR 页面就完成了。

Implement CSR page

我们前面说到，生成了一个示例 react component 文件 hello_react.jsx，我们来看一下它的内容。

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

在这个文件中，定义了一个 Hello 的 component，并且监听 document 的 DOMContentLoaded 事件，在这个事件触发时，将创建一个 div 的 DOM element，把这个 element append 到 document.body 中，并且在这个 div element 中，渲染 Hello component。

我们只需要把这段 js 代码包含到 view 模板中，浏览器将会执行这段代码从而把 Hello component 展示出来。

我们修改 csr.html.erb，删掉原来的代码，让它仅仅包含 hello_react.jsx 的代码。我们知道有一个 javascript_include_tag 的 view helper 方法，它是用来引入 app/assets/javascripts 目录中的 js 文件，如果要引入 app/javascript/packs 目录下的 js 文件，我们使用 javascript_pack_tag view helper 方法。

<%= javascript_pack_tag 'hello_react' %>

访问 localhost:3000/movies/csr，效果如下。

接下来，我们把这个默认的 Hello component 替换成我们自己定义的 MovieItem component。

我们创建一个新的文件 movie_item.jsx，实现 MovieItem component，代码如下。

import React from 'react'
import PropTypes from 'prop-types'

export default class MovieItem extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      movie: null
    }
  }

  componentDidMount() {
    fetch('/movies/1')
      .then(res => res.json())
      .then(movie => this.setState({movie}))
  }

  render() {
    const { movie } = this.state
    if (movie) {
      return (
        <div className='movie-container'>
          <img className='movie-cover' src={movie.cover_img}/>
          <div className='movie-info'>
            <h1>{movie.title}</h1>
            <p>{movie.desc}</p>
          </div>
        </div>
      )
    }
    return null
  }
}

这个 MovieItem 内部有一个存放 movie 的 state，一开始它的值当然是 null，当组件被加载后，它将发送一个 ajax 请求去服务器请求 id 为 1 的电影数据。在 render() 函数中，当 movie 有值时，我们渲染电影信息，否则，什么都不显示。

接下来我们需要在服务端实现这个 GET /movies/1 的 API，以支持客户端的 ajax 请求。

GET /movies/1 对应的是 MoviesController 的 show action，我们给 MoviesController 加上这个路由并实现 show action。

修改 routes.rb。

resources :movies

实现 show action，因为这是一个 API，所以返回值应该是 json。

class MoviesController < ApplicationController
  def show
    movie = Movie.find params[:id]
    render json: movie
  end
  ...
end

我们在浏览器中访问这个 API localhost:3000/movies/1 测试一下，得到了预期值。

最后，我们修改 hello_react.jsx，将加载的 component 由 Hello 换成 MovieItem。

import MovieItem from './movie_item'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <MovieItem />,
    document.body.appendChild(document.createElement('div')),
  )
})

访问 localhost:3000/movies/csr 看一下结果。

再看一下它的网页源码。

  ...
  <body>
    <script src="/packs/app-168170d0df79c8e99f90.js"></script>

  </body>
</html>

body 里确实除了一个 js 文件外什么都没有。

Demo use third party npm packages (react-stars)

我们前面说到，webpacker 带来的最大好处是，我们可以方便地使用丰富的 npm 包，方便地使用别人实现的组件，而不用我们自己手动实现。

我们想在这个电影页面上增加一个 star rating 的组件，用来支持用户给电影评分。我们用关键字 react star rating 进行 google，可以搜到大量别人已经实现好的 star rating 组件，我们选择 react-stars 这个 npm 包。

首先，安装这个 npm 包。

$ yarn add react-stars

然后，就可以直接使用了，根据 react-stars 的文件，我们修改 movie_item.jsx。

import ReactStars from 'react-stars'

export default class MovieItem extends React.Component {

  // ...
  render() {
      ...
      return (
        <div className='movie-container'>
          <img className='movie-cover' src={movie.cover_img}/>
          <div className='movie-info'>
            <h1>{movie.title}</h1>
            <p>{movie.desc}</p>
            <ReactStars count={5}
                        size={48}
                        color2={'#ffd700'} />
          </div>
        </div>
      )
    }

刷新 localhost:3000/movies/csr 看一下效果。

Demo blank first screen and workaround (loading status)

前面我们已经对 CSR 的首屏白屏现象有了一点了解。我们现来 demo 一下这种现象是怎么产生的。

假设服务端端的程序性能很低，数据库查询需要 5s 才能返回结果，我们用 sleep 5 来模拟这种情况。

修改 MoviesController 代码。

class MoviesController < ApplicationController
  ...
  def ssr
    sleep 5
    @movie = Movie.find 1
  end

  def show
    sleep 5
    movie = Movie.find params[:id]
    render json: movie
  end
end

对比效果 (直接用了前面的截图)。

解决 CSR 首屏白屏现象的一个简单的 workaround 的办法就是，数据还没有返回时，显示一个 loading 的状态，以安抚用户。

修改 movie_item.jsx，在 movie 为 null 时，显示 loading 状态。

render() {
  const { movie } = this.state
  if (movie) {
    return (
      ...
    )
  }
  return <h1>I am loading... please don't leave me!</h1>
}

刷新看一下效果。

Demo react-rails to support SSR for react

到目前为止，我们已经认识到了 CSR 的两大缺点，一是对 SEO 不友好，二是首屏白屏现象。而这两个缺点在传统的 SSR 上都不存在。因此，人们就在想，能不能把两者结合起来，先在服务端把首屏渲染一遍，然后再由浏览器端重新渲染一次以及渲染后面更多的页面。

接下来我们就来 demo 如何用 react-rails 来帮我们做这样的事情。

首先我们来安装这个 gem，修改 Gemfile，然后再 bundle。

gem 'react-rails'

根据 react-rails 的文档，执行 bin/rails g react:install 命令。

执行完这条命令后，在 app/javascripts 目录下生成了一个 components 目录，同时，application.js 被修改了，增加了 server_rendering.js 文件，文件内容和 application.js 是一样的。

// application.js
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

这几行代码大致是说 react-rails 会从 components 目录中寻找相应的 component。所以我们要把原来的 movie_item.jsx 从 app/javascript/packs 目录移动到 app/javascript/components 目录下。

同时，application.js 成为 js 代码的入口，因此我们要修改 csr.html.erb。

<%= javascript_pack_tag 'application' %>

(在实际项目中，应该把这一行代码放到 application.html.erb 中，让每一个页面都包含这些 js 代码，但这里我为了对比 SSR 和 CSR，ssr.html.erb 页面并不需要这些 js，所以把它只放在 csr.html.erb 中)

然后，因为我们要做 SSR，所以数据很显然要在服务端产生，我们修改 csr action，在这个 action 中直接从数据库中取得 movie 数据，同时，为了检验它能否解决首屏白屏的问题，我们也加上 sleep 5。

def csr
  sleep 5
  @movie = Movie.find 1
end

我们在服务端就拿到 movie 数据，很显然我们要把它传递给 MovieItem component，我们修改 MovieItem 的代码，让它接受一个 movie 的 props，又因为我们已经在服务端就拿到了 movie 数据，因此就不需要再发 ajax 请求来取数据了。

export default class MovieItem extends React.Component {
  // constructor(props) {
  //   super(props)

  //   this.state = {
  //     movie: null
  //   }
  // }

  // don't need any more
  // componentDidMount() {
  //   fetch('/movies/1')
  //     .then(res => res.json())
  //     .then(movie => this.setState({movie}))
  // }

  render() {
    const { movie } = this.props
    if (movie) {
      return (
        <div className='movie-container'>
          <img className='movie-cover' src={movie.cover_img}/>
          <div className='movie-info'>
            <h1>{movie.title}</h1>
            <p>{movie.desc}</p>
            <ReactStars count={5}
                        size={48}
                        color2={'#ffd700'} />
          </div>
        </div>
      )
    }
    return <p>no movie!</p>
  }
}

MovieItem.propTypes = {
  movie: PropTypes.object
}

OK，接下来就到了最关键的一步了，到目前为止，我们还没有在任何地方声明渲染 MovieItem 这个 component 呢。react-rails 提供了一个 react_component 的 view helper 方法来渲染一个 react 组件。

因此，我们在 csr.html.erb 中加入这行代码。

<%= react_compoent('movie_item', {movie: @movie}, {prerender: true}) >

第一个参数是声明要渲染的组件名 (其实是组件所在的文件名，它会去找从这个文件中导出的 default 组件)，第二个参数是此组件的 props，第三个是声明是否做 SSR，我们设置为 true。

我们前面说到，当 rails 执行到 react_component 方法，且 prerender 为 true 时，它会调用一个 JavaScript 的环境来去执行相应组件的 render() 方法，得到相应的 html 内容，插入在此处。

我们重启 rails 并重新访问 localhost:3000/movies/csr 看看效果。

可见，首屏白屏现象已经消失了。

再来看一下它的源码。

源码中已经包含搜索引擎 spider 所需要的内容，所以它也解决了对 SEO 不友好的问题。

总结

借助 webpacker 和 react-rails，我们可以在不做前后端分离的情况下，方便地在 rails 中使用 react 来渲染 view，且支持 SSR，可以使用 npm 包。

以上内容不能保证完全正确，仅是个人理解，如有描述得不对的地方，欢迎指正。


Baurine

scribble