Rails7 Stimulus单表单触发多Turbo Frame异步加载方案

完全可以将单Turbo Frame拆分为多个独立绑定请求地址的Turbo Frame，实现筛选变更时的并行数据加载，这套方案刚好能解决你当前遇到的首屏闪烁、单请求阻塞加载慢、控制器逻辑臃肿三个核心问题，体验和你之前用jQuery写的并行Ajax加载逻辑完全一致。

1. 从根源解决首屏闪烁问题 #

你之前遇到的页面重载闪烁，核心原因是页面首次渲染完成后，才在Stimulus的connect生命周期里触发表单提交，等于先渲染一遍空页面再发请求刷内容。调整后不需要在connect里手动触发提交，所有模块的Turbo Frame在初始渲染时就直接带上默认筛选参数作为src属性，页面加载时会自动并行拉取各模块数据，配合骨架屏占位完全不会有视觉跳动。

2. 拆分独立Turbo Frame模块 #

把原来包裹整个仪表盘的大Turbo Frame全部拆掉，每个独立的卡片、图表、表格单独封装为一个Turbo Frame，每个Frame设置独立ID、对应模块的请求地址、懒加载属性，内部先放骨架屏作为加载占位：

<!-- 发票总览卡片模块 -->
<%= turbo_frame_tag "dashboard_invoices_summary",
    src: dashboard_invoices_summary_path(city: params[:city], year: params[:year] || Date.today.year),
    loading: :lazy do %>
  <div class="card card-skeleton h-220px"></div>
<% end %>

<!-- 发票趋势图表模块 -->
<%= turbo_frame_tag "dashboard_invoices_chart",
    src: dashboard_invoices_chart_path(city: params[:city], year: params[:year] || Date.today.year),
    loading: :lazy do %>
  <div class="card card-skeleton h-220px"></div>
<% end %>

<!-- 承包商排行表格模块 -->
<%= turbo_frame_tag "dashboard_contractors_table",
    src: dashboard_contractors_path(city: params[:city], year: params[:year] || Date.today.year),
    loading: :lazy do %>
  <div class="card card-skeleton h-350px"></div>
<% end %>

加loading: :lazy属性后，不在首屏视口范围内的模块会等用户滚动到对应位置时才发请求，进一步压缩首屏加载时间。

3. 拆分后端逻辑，解决控制器臃肿 #

给每个仪表盘模块配置独立路由，对应控制器中单独的action，每个action只负责计算当前模块需要的数据，返回对应模块的局部视图即可，不需要等待其他模块的数据计算完成，从根源解决单请求等待所有数据导致的加载慢问题：

# config/routes.rb
get 'dashboard/invoices_summary', to: 'dashboard#invoices_summary'
get 'dashboard/invoices_chart', to: 'dashboard#invoices_chart'
get 'dashboard/contractors', to: 'dashboard#contractors'

每个action返回的视图里只需要包裹同ID的Turbo Frame即可，Turbo会自动匹配替换对应位置的内容，不需要额外写JS处理DOM更新。

4. 改造Stimulus控制器实现并行刷新 #

去掉原来表单绑定整个大Turbo Frame的逻辑，筛选框变更时直接遍历所有仪表盘模块的Turbo Frame，更新每个Frame的src为带最新筛选参数的地址，浏览器会自动并行发起所有模块的请求，哪个接口先返回就先渲染哪个模块的内容：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["citySelect", "yearSelect"]

  search() {
    // 读取当前筛选条件
    const queryParams = new URLSearchParams({
      city: this.citySelectTarget.value,
      year: this.yearSelectTarget.value
    })

    // 遍历所有仪表盘模块的Turbo Frame，更新src触发自动重载
    document.querySelectorAll('turbo-frame[id^="dashboard_"]').forEach(frame => {
      const frameUrl = new URL(frame.src)
      frameUrl.search = queryParams.toString()
      frame.src = frameUrl.toString()
    })

    // 更新浏览器地址栏参数，保留原有的地址同步效果
    history.pushState(null, '', `?${queryParams.toString()}`)
  }
}

对应筛选表单部分去掉原有的表单提交绑定，给两个下拉框加上对应target标记，把触发事件从input改成change，避免下拉选择过程中反复触发无效请求：

<div data-controller="home">
  <div class="row">
    <div class="d-sm-flex align-items-center mb-3">
      <div class="col-lg-2">
        <%= form.select :city, options_for_select(City.all.pluck(:name,:id)),
          {include_blank: t('all')},
          {class: 'form-select', data: { home_target: "citySelect", action: "change->home#search" }} %>
      </div>
      <div class="col-lg-2">
        <%= form.select :year, options_for_select(@years.reverse, (params[:year] || Date.today.year)),
          {include_blank:false},
          {class: 'form-select', data: { home_target: "yearSelect", action: "change->home#search" }} %>
      </div>
    </div>
  </div>
</div>

• 每个独立模块的视图可以单独加片段缓存，更新频率低的模块可以直接缓存渲染结果，进一步提升接口响应速度
• 可以给Turbo Frame加请求中的loading状态，比如发请求时在模块右上角显示小加载图标，体验更流畅
• 后续新增仪表盘模块时，只需要新增对应独立Turbo Frame和接口即可，筛选刷新逻辑不需要做任何修改，扩展性远高于单Turbo Frame的实现

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