Switch to async: true for optimal performance

Updated both open-source and Pro dummy apps plus documentation to
recommend async: true instead of defer for all scenarios (streaming
and non-streaming pages).

Changes:
- spec/dummy: Updated layout to use async: true (Shakapacker 9.3.0)
- react_on_rails_pro/spec/dummy: Updated layout to use async: true
- docs: Removed defer recommendation for non-streaming pages
- docs: Added comprehensive immediate_hydration documentation
- docs: Documented generated_component_packs_loading_strategy option

Benefits of async: true with immediate_hydration:
- Components hydrate during page load (before DOMContentLoaded)
- Optimal Time to Interactive (TTI) for all page types
- Works seamlessly with React 18's Selective Hydration
- No race conditions from script loading order

Per AbanoubGhadban's PR objectives and reviewer guidance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: justin808

docs/building-features/streaming-server-rendering.md

@@ -248,11 +248,15 @@ With `defer: true`, your streamed components will:
 
 **For Pages WITHOUT Streaming Components:**
 
+With Shakapacker ≥ 8.2.0, `async: true` is recommended even for non-streaming pages to improve Time to Interactive (TTI):
+
 ```erb
-<!-- ✅ OK: defer is fine when not using streaming -->
-<%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: true) %>
+<!-- ✅ RECOMMENDED: Use async with immediate_hydration for optimal performance -->
+<%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', async: true) %>
 ```
 
+Note: `async: true` with the `immediate_hydration` feature allows components to hydrate during page load, improving TTI even without streaming. See the Immediate Hydration section below for configuration details.
+
 #### Why Async is Better Than No Defer
 
 With Shakapacker ≥ 8.2.0, using `async: true` provides the best performance:
@@ -267,5 +271,50 @@ With Shakapacker ≥ 8.2.0, using `async: true` provides the best performance:
 #### Migration Timeline
 
 1. **Before Shakapacker 8.2.0**: Use `defer: false` for streaming pages
-2. **Shakapacker ≥ 8.2.0**: Migrate to `async: true` for streaming pages
-3. **Non-streaming pages**: Can continue using `defer: true` safely (regardless of Shakapacker version)
+2. **Shakapacker ≥ 8.2.0**: Migrate to `async: true` for all pages (streaming and non-streaming)
+3. **Enable `immediate_hydration`**: Configure for optimal Time to Interactive (see section below)
+
+#### Configuring Immediate Hydration
+
+React on Rails Pro supports the `immediate_hydration` feature, which allows components to hydrate during the page loading state (before DOMContentLoaded). This works optimally with `async: true` scripts:
+
+```ruby
+# config/initializers/react_on_rails.rb
+ReactOnRails.configure do |config|
+  config.immediate_hydration = true # Enable early hydration
+
+  # Optional: Configure pack loading strategy globally
+  config.generated_component_packs_loading_strategy = :async
+end
+```
+
+**Benefits of `immediate_hydration` with `async: true`:**
+
+- Components become interactive as soon as their JavaScript loads
+- No need to wait for DOMContentLoaded or full page load
+- Optimal Time to Interactive (TTI) for both streaming and non-streaming pages
+- Works seamlessly with React 18's Selective Hydration
+
+**Note:** The `immediate_hydration` feature requires a React on Rails Pro license.
+
+**Component-Level Control:**
+
+You can also enable immediate hydration on a per-component basis:
+
+```erb
+<%= react_component('MyComponent', props: {}, immediate_hydration: true) %>
+```
+
+**generated_component_packs_loading_strategy Option:**
+
+This configuration option sets the default loading strategy for auto-generated component packs:
+
+- `:async` (recommended for Shakapacker ≥ 8.2.0) - Scripts load asynchronously
+- `:defer` - Scripts defer until page load completes
+- `:sync` - Scripts load synchronously (blocks page rendering)
+
+```ruby
+ReactOnRails.configure do |config|
+  config.generated_component_packs_loading_strategy = :async
+end
+```

react_on_rails_pro/spec/dummy/app/views/layouts/application.html.erb

@@ -24,12 +24,13 @@
                           media: 'all',
                           'data-turbo-track': 'reload') %>
 
-  <%# defer: false is required because this app uses streaming server rendering.
-      Deferred scripts delay hydration until the entire page finishes streaming,
-      defeating React 18's Selective Hydration. See docs/building-features/streaming-server-rendering.md
+  <%# async: true is the recommended approach for Shakapacker >= 8.2.0 (currently using 9.3.0).
+      It enables React 18's Selective Hydration and provides optimal Time to Interactive (TTI).
+      Use immediate_hydration feature to control hydration timing for Selective/Immediate Hydration.
+      See docs/building-features/streaming-server-rendering.md
       skip_js_packs param is used for testing purposes to simulate hydration failure %>
   <% unless params[:skip_js_packs] == 'true' %>
-    <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', defer: false) %>
+    <%= javascript_pack_tag('client-bundle', 'data-turbo-track': 'reload', async: true) %>
   <% end %>
   <%= csrf_meta_tags %>
 </head>