如何为Ruby on Rails与React应用设计合理的数据传递架构？

Great question—this is such a common pain point when blending Rails and React in a monolith, especially once you move beyond simple, flat models. Let’s break down practical, maintainable solutions that avoid messy controller code:

1. 优化数据序列化（推荐用于中低复杂度场景） #

Instead of manually stuffing all associations into props, use a serializer library to cleanly package your data. Tools like Active Model Serializers or Fast JSON API let you define exactly what data (including associations) gets passed to React, keeping your controllers lean.

Step 1: Set up a serializer #

# app/serializers/foo_serializer.rb
class FooSerializer < ActiveModel::Serializer
  attributes :id, :name, :description # 基础字段
  belongs_to :user
  has_many :bars
end

Step 2: Prepare serialized data in your controller #

# app/controllers/foos_controller.rb
def index
  # 预加载关联避免N+1查询
  @foos = Foo.includes(:user, :bars).all
  # 序列化数据并转成JSON字符串
  @foos_serialized = FooSerializer.new(@foos).serializable_hash.to_json
end

Step 3: Pass to React component #

# app/views/foos/index.html.erb
<%= react_component("FooIndex", { foos: @foos_serialized }) %>

Step 4: Parse and use in React #

const FooIndex = ({ foos }) => {
  const parsedFoos = JSON.parse(foos);
  
  return (
    <div className="foo-list">
      {parsedFoos.map(foo => (
        <div key={foo.id} className="foo-card">
          <h2>{foo.name}</h2>
          <p>Created by: {foo.user.nick}</p>
          <h3>Related Bars:</h3>
          <ul>
            {foo.bars.map(bar => <li key={bar.id}>{bar.title}</li>)}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default FooIndex;

This keeps your controller focused on fetching data, not formatting it, and centralizes your data shape in serializers where it’s easy to maintain.

2. 懒加载关联数据（适合大数据量或非必需关联） #

If loading all associations upfront slows down your page, fetch them on-demand from React via Rails API endpoints. This way, you only send minimal data initially, and grab extra details when needed.

Step 1: Pass basic Foo data to React #

# app/controllers/foos_controller.rb
def index
  @foos = Foo.all # 只取基础字段
end

# app/views/foos/index.html.erb
<%= react_component("FooIndex", { foos: @foos }) %>

Step 2: Add API endpoints for associations #

# config/routes.rb
resources :foos do
  member do
    get :user
    get :bars
  end
end

# app/controllers/foos_controller.rb
def user
  foo = Foo.find(params[:id])
  render json: foo.user
end

def bars
  foo = Foo.find(params[:id])
  render json: foo.bars
end

Step 3: Fetch data in React #

import { useState, useEffect } from 'react';

const FooIndex = ({ foos }) => {
  const [fooDetails, setFooDetails] = useState([]);

  useEffect(() => {
    const fetchAssociations = async () => {
      const detailedFoos = await Promise.all(
        foos.map(async foo => {
          const userRes = await fetch(`/foos/${foo.id}/user`);
          const user = await userRes.json();
          
          const barsRes = await fetch(`/foos/${foo.id}/bars`);
          const bars = await barsRes.json();
          
          return { ...foo, user, bars };
        })
      );
      setFooDetails(detailedFoos);
    };

    fetchAssociations();
  }, [foos]);

  if (!fooDetails.length) return <div>Loading...</div>;

  // 渲染逻辑和之前一致
  return (
    <div className="foo-list">
      {fooDetails.map(foo => (
        <div key={foo.id} className="foo-card">
          <h2>{foo.name}</h2>
          <p>Created by: {foo.user.nick}</p>
          <h3>Related Bars:</h3>
          <ul>
            {foo.bars.map(bar => <li key={bar.id}>{bar.title}</li>)}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default FooIndex;

3. 引入GraphQL（适合复杂、动态数据需求） #

For apps with evolving data needs, GraphQL lets your React components request exactly the data they need—no more over-fetching or messy serializer updates. Use the graphql-ruby gem to add GraphQL support to your Rails app.

Step 1: Define GraphQL types #

# app/graphql/types/foo_type.rb
module Types
  class FooType < Types::BaseObject
    field :id, ID, null: false
    field :name, String, null: false
    field :user, Types::UserType, null: false
    field :bars, [Types::BarType], null: false
  end
end

Step 2: Create a query #

# app/graphql/queries/foos_query.rb
module Queries
  class FoosQuery < BaseQuery
    type [Types::FooType], null: false

    def resolve
      Foo.includes(:user, :bars).all # 预加载避免N+1
    end
  end
end

Step 3: Query from React (using Apollo Client) #

import { useQuery, gql } from '@apollo/client';

const GET_FOOS = gql`
  query GetFoos {
    foos {
      id
      name
      user {
        nick
      }
      bars {
        id
        title
      }
    }
  }
`;

const FooIndex = () => {
  const { loading, error, data } = useQuery(GET_FOOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div className="foo-list">
      {data.foos.map(foo => (
        <div key={foo.id} className="foo-card">
          <h2>{foo.name}</h2>
          <p>Created by: {foo.user.nick}</p>
          <h3>Related Bars:</h3>
          <ul>
            {foo.bars.map(bar => <li key={bar.id}>{bar.title}</li>)}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default FooIndex;

Which to choose? #

• Serializers: Best for simple to medium apps where you want to keep things straightforward without adding new tools.
• Lazy Loading: Ideal when you have large datasets or associations that aren’t always needed (e.g., showing a "View More" button to load bars).
• GraphQL: Perfect for complex apps where your data needs change often, or you want to give front-end teams full control over what data they request.

Don’t forget—no matter which approach you pick, always use includes in your Rails queries to avoid N+1 database hits!

内容的提问来源于stack exchange，提问作者Tomasz