在 Rails 上搭建 React 服务端渲染踩坑

为什么需要服务端渲染？

服务端渲染（SSR）的主要优势：

• 更快的首次内容渲染
• 更好的SEO
• 在低性能设备上有更好的体验

Rails中实现React SSR的方案

主要有两种方案：

1. 使用react-rails或react_on_rails gem
2. 使用Node.js服务作为渲染服务

使用react_on_rails的实现

# Gemfile
gem 'react_on_rails'

# 安装
bundle install
rails generate react_on_rails:install
      

遇到的问题和解决方案

1. JavaScript执行环境问题

Rails默认使用ExecJS，但它在处理复杂React应用时性能不佳。解决方案是使用mini_racer：

# Gemfile
gem 'mini_racer'
      

2. 状态同步问题

服务端渲染的状态需要与客户端同步，否则会出现水合（hydration）不匹配的问题：

# app/views/layouts/application.html.erb
<%= redux_store_hydration_data %>
      

3. 路由匹配问题

需要确保Rails路由和React路由能够正确匹配：

# config/routes.rb
get '*path', to: 'react#index', constraints: -> (request) do
  !request.xhr? && request.format.html?
end
      

性能优化

服务端渲染可能会增加服务器负载，可以考虑：

• 使用缓存
• 只对关键页面使用SSR
• 使用专门的Node.js服务进行渲染