Rails：如何缓存Controller变量供css.erb使用，避免重复执行逻辑

首先得戳破核心误区：你的css.erb文件是浏览器单独发起的独立HTTP请求，不是和html.erb一起渲染的。这意味着当浏览器加载页面时，先请求/searches/results获取HTML，之后又会单独请求/searches/results.css获取样式，两次请求会创建两个完全独立的控制器实例，实例变量根本不共享——这就是你用@users ||= ...没用的原因，第二次请求里@users本来就是nil，而且还没带原来的params，自然查不出正确结果。

下面给你两种可行的解决思路，按推荐优先级排序：

思路1：用前端JS传递动态数据（最推荐） #

CSS本来就不应该依赖后端的动态请求状态，更稳妥的方式是把需要的动态值通过HTML的data-*属性传递给前端，再用JS动态调整样式。

比如在user_results.html.erb里：

<!-- 把需要的动态数据存在容器的data属性里 -->
<div class="user-results-wrapper" data-user-count="<%= @users.size %>">
  <!-- 你的用户列表内容 -->
</div>

然后写普通的CSS或者用JS处理动态样式：

// 页面加载后读取data属性并调整样式
document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.user-results-wrapper');
  const userCount = parseInt(wrapper.dataset.userCount, 10);
  
  // 比如根据用户数量调整容器高度或背景色
  if (userCount > 10) {
    wrapper.style.maxHeight = '600px';
    wrapper.style.overflowY = 'auto';
  }
});

这种方式完全避免了后端重复执行逻辑的问题，也符合前后端职责分离的原则。

思路2：让css请求携带参数并缓存查询结果（仅当必须用css.erb时） #

如果你一定要在css.erb里使用后端数据，那得让css请求带上必要的查询参数，同时用Rails缓存避免重复查询数据库。

步骤1：在HTML里引用CSS时带上参数 #

修改user_results.html.erb里的样式引用，把name和gender作为查询参数传递：

<%= stylesheet_link_tag "searches/user_results", 
  name: params[:name], 
  gender: params[:gender],
  format: :css %>

步骤2：修改控制器逻辑，支持多格式请求并缓存结果 #

class SearchesController < ApplicationController
  def results
    # 统一从参数里获取查询条件，兼容HTML和CSS请求
    search_name = params[:name].presence || ''
    search_gender = params[:gender].presence || ''

    # 生成唯一缓存键，避免不同查询的结果互相覆盖
    cache_key = "user_search_#{search_name}_#{search_gender}"
    
    # 用Rails缓存存储查询结果，过期时间按需调整
    @users = Rails.cache.fetch(cache_key, expires_in: 15.minutes) do
      User.search(search_name, search_gender)
    end

    # 根据请求格式渲染对应模板
    respond_to do |format|
      format.html { render 'user_results' }
      format.css { render 'user_results' }
    end
  end
end

这样，当浏览器请求css文件时，会带上name和gender参数，控制器能正确拿到并从缓存里取结果，不用重复执行数据库查询，也能渲染正确的css.erb内容。

额外提醒 #

• 缓存键要处理空参数的情况（比如用presence || ''），避免出现nil导致缓存键无效。
• 尽量避免用css.erb处理动态逻辑，因为会增加后端缓存复杂度，而且样式依赖请求参数容易引发缓存击穿问题。

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