Fix FOUC using content_for to ensure proper pack tag ordering

justin808 · claude · justin808 · commit 0dce1d05bc83 · 2025-10-15T18:25:35.000-10:00
Problem: - Stylesheets at bottom of body caused FOUC with SSR - Moving to head failed because react_component (with auto_load_bundle) calls append_*_pack_tag during render, which must execute before the main *_pack_tag helpers Solution: - Use content_for :head block in body for explicit append calls - yield :head in head section before calling main pack tags - This ensures all appends (explicit + auto from react_component) execute before main pack tags, allowing styles in head - Keeps auto_load_bundle enabled for automatic component packs Changes: - Wrap append_*_pack_tag calls in content_for :head blocks - Add yield :head in head section before pack tags - Move stylesheet_pack_tag and javascript_pack_tag to head - Applied to both application.html.erb and stimulus_layout.html.erb Result: Stylesheets load in head, eliminating FOUC while maintaining auto_load_bundle functionality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,14 +5,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RailsReactTutorial</title>
 
-  <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+  <%= yield :head %>
   <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= append_javascript_pack_tag('stimulus-bundle') %>
-  <%= append_javascript_pack_tag('stores-registration') %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 
   <%= csrf_meta_tags %>
 </head>
 <body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
+  <% content_for :head do %>
+    <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+    <%= append_javascript_pack_tag('stimulus-bundle') %>
+    <%= append_javascript_pack_tag('stores-registration') %>
+  <% end %>
+
   <%= react_component "NavigationBarApp" %>
 
   <div class="container mx-auto px-4 flex-grow">
@@ -21,8 +26,6 @@
 
   <%= react_component "Footer" %>
 
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
-
   <!-- This is a placeholder for ReactOnRails to know where to render the store props for
       client side hydration -->
   <%= redux_store_hydration_data %>
diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb
@@ -5,22 +5,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RailsReactTutorial</title>
 
-  <%= append_stylesheet_pack_tag('stimulus-bundle') %>
-  <%= append_javascript_pack_tag('stimulus-bundle') %>
+  <%= yield :head %>
+  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 
   <%= csrf_meta_tags %>
 </head>
 <body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
+  <% content_for :head do %>
+    <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+    <%= append_javascript_pack_tag('stimulus-bundle') %>
+  <% end %>
+
   <%= react_component "NavigationBarApp" %>
 
   <div class="container mx-auto px-4 flex-grow">
     <%= yield %>
   </div>
 
   <%= react_component "Footer" %>
-
-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 </body>
 </html>
 
diff --git a/config/initializers/react_on_rails.rb b/config/initializers/react_on_rails.rb
@@ -4,7 +4,7 @@
 ReactOnRails.configure do |config|
   # Auto-registration configuration for v16
   config.components_subdirectory = "ror_components"
-  config.auto_load_bundle = false
+  config.auto_load_bundle = true
 
   config.build_test_command = "RAILS_ENV=test bin/shakapacker"
   config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker"
