React-Rails 项目中的服务端渲染技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01177/article/details/148465439

React-Rails 项目中的服务端渲染技术详解

react-rails Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. 项目地址: https://gitcode.com/gh_mirrors/re/react-rails

前言

在现代Web开发中，服务端渲染(SSR)是一项重要的技术，它能够提升首屏加载速度并改善SEO。本文将深入探讨如何在React-Rails项目中实现高效的服务端渲染。

什么是服务端渲染？

服务端渲染是指在服务器端将React组件渲染为HTML字符串，然后将其发送到客户端的技术。与传统的客户端渲染相比，服务端渲染有以下优势：

更快的首屏加载时间
更好的SEO支持
对低性能设备更友好

基础用法

在React-Rails中使用服务端渲染非常简单，只需在react_component助手中设置prerender: true选项：

<%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %>

这将在服务器端渲染组件，并生成如下HTML：

<div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}">
  <h1>Hello, John!</h1>
</div>

当页面加载时，React-Rails的UJS(Unobtrusive JavaScript)会在客户端重新挂载这个组件。

技术实现细节

React-Rails的服务端渲染基于ExecJS实现，需要注意以下几点：

代码加载：必须通过server_rendering.js文件加载你的组件代码及其依赖
环境限制：服务端渲染环境中没有document和window对象，因此jQuery等依赖这些对象的库无法使用
性能优化：对于CRuby用户，推荐使用mini_racer作为ExecJS的后端以获得最佳性能

配置详解

React-Rails提供了丰富的配置选项来优化服务端渲染：

config.react.server_renderer_pool_size = 1   # 渲染器池大小
config.react.server_renderer_timeout = 20    # 超时时间(秒)
config.react.server_renderer = React::ServerRendering::BundleRenderer

config.react.server_renderer_options = {
  files: ["server_rendering.js"],       # 用于预渲染的文件
  replay_console: true                  # 是否在客户端重放console输出
}

# 这些目录/扩展名的文件变化会触发渲染器重载
config.react.server_renderer_extensions = ["jsx", "js"]
config.react.server_renderer_directories = ["/app/assets/javascripts", "/app/javascript/"]

JavaScript状态管理

由于某些ExecJS后端是有状态的，预渲染的副作用可能会影响后续渲染。React-Rails提供了两种解决方案：

自定义渲染器：通过#before_render和#after_render钩子管理状态
请求级渲染器：使用per_request_react_rails_prerenderer管理整个控制器动作的状态

示例代码：

class PagesController < ApplicationController
  per_request_react_rails_prerenderer
  
  def show
    react_rails_prerenderer.context.exec("self.Store.setup()")
    render :show
    react_rails_prerenderer.context.exec("self.Store.teardown()")
  end
end