react_on_rails_pro 16.2.0.beta.8

data/docs/react-server-components/purpose-and-benefits.md

@@ -0,0 +1,243 @@
+# React Server Components & Streaming in React on Rails Pro
+
+## Why RSC with Streaming?
+
+### Waterfall Loading Pattern Benefits
+React Server Components with streaming is beneficial for most applications, but it's especially powerful for applications with waterfall loading patterns where data dependencies chain together. For example, when you need to load a user profile before loading their posts, or fetch categories before products. Here's why:
+
+### How RSC Fixes Waterfall Server Rendering Issues:
+
+When a user visits the page, they'll experience the following sequence:
+
+1. The initial HTML shell is sent immediately, including:
+   - The page layout
+   - Any static content (like the `<h1>` and footer)
+   - Placeholder content for the React component (typically a loading state)
+
+2. Selective Hydration:
+   - Client components hydrate independently as their code chunks load
+   - Multiple components can hydrate in parallel
+   - User interactions automatically prioritize hydration of interacted components
+   - No waiting for full page JavaScript or other components to load
+   - Each component becomes interactive immediately after its own hydration
+
+### Bundle Size Benefits
+
+React Server Components significantly reduce client-side JavaScript by:
+
+1. **Server-Only Code Elimination:**
+    - Dependencies used only in server components never ship to the client
+    - Database queries, API calls, and their libraries stay server-side
+    - Heavy data processing utilities remain on the server
+    - Server-only NPM packages don't impact client bundle
+
+2. **Concrete Examples:**
+    - Routing logic can stay server-side
+    - Data fetching libraries (like React Query) are often unnecessary
+    - Large formatting libraries (e.g., date-fns, numeral) can be server-only
+    - Image processing utilities stay on server
+    - Markdown parsers run server-side only
+    - Heavy validation libraries remain server-side
+
+For example, a typical dashboard might see:
+```jsx
+// Before: All code shipped to client
+import { format } from 'date-fns'; // ~30KB
+import { marked } from 'marked';    // ~35KB
+import numeral from 'numeral';      // ~25KB
+
+// After: With RSC, these imports stay server-side
+// Client bundle reduced by ~90KB
+```
+
+### [Selective Hydration](https://github.com/reactwg/react-18/discussions/37) Benefits
+
+React's selective hydration is a powerful feature that significantly improves page interactivity by:
+
+1. **Independent Component Hydration**
+   - Each client component hydrates independently as soon as its code loads
+   - No waiting for the entire page's JavaScript to load and execute
+   - Components become interactive progressively rather than all at once
+
+2. **Interaction-Based Prioritization**
+   - React automatically prioritizes hydrating components that users try to interact with
+   - If a user clicks a button before hydration, that component gets priority
+   - Other components continue hydrating in the background
+   - Better perceived performance as users can interact sooner
+
+3. **Parallel Processing**
+   - Multiple components can hydrate simultaneously
+   - Network requests for component code happen in parallel
+   - CPU processing for hydration is interleaved efficiently
+   - Maximizes browser resources for faster overall interactivity
+
+For example, in a typical page layout:
+
+```jsx
+<Layout>
+  <Suspense fallback={<NavSkeleton />}>
+    <Navigation /> {/* Client component */}
+  </Suspense>
+  <Suspense fallback={<MainSkeleton />}>
+    <MainContent /> {/* Client component */}
+    <Comments /> {/* Client component */}
+  </Suspense>
+  <Suspense fallback={<SidebarSkeleton />}>
+    <Sidebar /> {/* Client component */}
+  </Suspense>
+</Layout>
+```
+
+With selective hydration:
+- Navigation could become interactive while Comments are still loading
+- If user tries to click a Sidebar button, it gets priority hydration
+- Each component hydrates independently when ready
+- No waiting for all components to load before any become interactive
+
+This approach significantly improves the user experience by:
+- Reducing Time to Interactive (TTI) for important components
+- Providing faster response to user interactions
+- Maintaining smooth performance even on slower devices or networks
+- Eliminating the "all or nothing" hydration approach of traditional SSR
+
+For a deeper dive into selective hydration, see our [Selective Hydration in Streamed Components](./selective-hydration-in-streamed-components.md) guide.
+
+
+### Comparison with Other Approaches:
+
+1. **Full Server Rendering:**
+- ❌ Delays First Byte until entire page is rendered
+- ❌ All-or-nothing approach to hydration
+- ❌ Must wait for all JavaScript before any interactivity
+- ✅ Good SEO
+- ✅ Complete initial HTML
+
+2. **Client-side Lazy Loading:**
+- ❌ Empty initial HTML for lazy components
+- ❌ Must wait for hydration to load
+- ❌ Poor SEO for lazy content
+- ❌ No prioritization of component hydration
+- ❌ Initial page must be loaded and hydrated before loading lazy components
+- ✅ Reduces initial bundle size
+
+3. **RSC with Streaming:**
+- ✅ Immediate First Byte
+- ✅ Progressive HTML streaming
+- ✅ SEO-friendly for all content
+- ✅ No hydration waiting for server components
+- ✅ Selective client hydration
+
+## Migration Guide
+
+### 1. Enable RSC Support
+
+Add to your Rails initializer, it makes the magic happen 🪄:
+```ruby
+# config/initializers/react_on_rails_pro.rb
+ReactOnRailsPro.configure do |config|
+  config.enable_rsc_support = true
+end
+```
+
+### 2. Update Webpack Configuration
+
+Create RSC bundle and make it use the RSC loader:
+```javascript
+// config/webpack/rscWebpackConfig.mjs
+const rscConfig = serverWebpackConfig();
+
+// Configure RSC entry point
+rscConfig.entry = {
+  'rsc-bundle': rscConfig.entry['server-bundle']
+};
+
+// Add RSC loader
+rules.forEach((rule) => {
+  if (Array.isArray(rule.use)) {
+    const babelLoader = extractLoader(rule, 'babel-loader');
+    if (babelLoader) {
+      rule.use.push({
+        loader: 'react-on-rails-rsc/WebpackLoader',
+      });
+    }
+  }
+});
+```
+
+### 3. Gradual Component Migration
+
+#### 1. Mark Entry Points as Client Components
+
+Adding the `'use client'` directive to entry points maintains existing functionality while allowing for incremental migration of individual components to server components.
+This approach ensures a smooth transition without disrupting the application's current behavior.
+
+```jsx
+// app/components/App.jsx
+'use client';
+
+export default function App() {
+  // Your existing component code
+}
+```
+
+#### 2. Identify Server Component Candidates:
+- Data fetching components
+- Non-interactive UI
+- Static content sections
+- Layout components
+
+#### 3. Progressive Migration Pattern (Top-Down Approach):
+
+Start by converting layout and container components at the top of your component tree to server components, moving any interactive logic down to child components. This "top-down" approach maximizes the benefits of RSC.
+
+```jsx
+// app/components/Layout.jsx
+// Remove 'use client' - This becomes a server component
+// Move any state/effects to child components first
+export default function Layout({ children }) {
+  return (
+    <div>
+      <Header /> {/* Server component */}
+      <Sidebar /> {/* Server component */}
+      <main>
+        {children} {/* Interactive components like InteractiveWidget remain nested inside */}
+      </main>
+      <Footer /> {/* Server component */}
+    </div>
+  );
+}
+```
+
+```jsx
+// app/components/InteractiveWidget.jsx
+'use client'; // Keep client directive for interactive components
+
+export default function InteractiveWidget() {
+  const [state, setState] = useState();
+  // Interactive component logic
+}
+```
+
+#### 4. Convert Lazy-Loaded Entry Points:
+
+```jsx
+// app/components/LazyLoadedSection.jsx
+// Remove lazy loading wrapper
+// Convert to async server component
+async function LazyLoadedSection() {
+  const data = await fetchData();
+  return (
+    <div>
+      <ServerContent data={data} />
+      <ClientInteraction /> {/* Keeps 'use client' */}
+    </div>
+  );
+}
+```
+
+This migration approach allows you to:
+- Maintain existing functionality while migrating
+- Incrementally improve performance
+- Test changes in isolation
+- Keep interactive components working as before
+- Eliminate client-side lazy loading overhead

data/docs/react-server-components/rendering-flow.md

@@ -0,0 +1,86 @@
+# React Server Components Rendering Flow
+
+This document explains the rendering flow of React Server Components (RSC) in React on Rails Pro.
+
+## Types of Bundles
+
+In a React Server Components project, there are three distinct types of bundles:
+
+### RSC Bundle (rsc-bundle.js)
+- Contains only server components and references to client components
+- Generated using the RSC Webpack Loader which transforms client components into references
+- Used specifically for generating RSC payloads
+- Configured with `react-server` condition to enable RSC-specific code paths that tell the runtime that this bundle is used for RSC payload generation.
+
+### Server Bundle (server-bundle.js)
+- Contains both server and client components in their full form
+- Used for traditional server-side rendering (SSR)
+- Enables HTML generation of any components
+- Does not transform client components into references
+
+### Client Bundle
+- Split into multiple chunks based on client components
+- Each file with `'use client'` directive becomes an entry point
+- Code splitting occurs automatically for client components
+- Chunks are loaded on-demand during client component hydration
+
+## React Server Component Rendering Flow
+
+When a request is made to a page using React Server Components, the following optimized sequence occurs:
+
+1. Initial Request Processing:
+   - The `stream_react_component` helper is called in the view
+   - Makes a request to the node renderer
+   - Server bundle's rendering function calls `generateRSCPayload` with the component name and props
+   - This executes the component rendering in the RSC bundle
+   - RSC bundle generates the payload containing server component data and client component references
+   - The payload is returned to the server bundle
+
+2. Server-Side Rendering with RSC Payload:
+   - The server bundle uses the RSC payload to generate HTML for server components using `RSCServerRoot`
+   - `RSCServerRoot` splits the RSC payload stream into two parts:
+     - One stream for rendering server components as HTML
+     - Another stream for embedding the RSC payload in the response
+   - `RSCPayloadContainer` component embeds the RSC payload within the HTML response
+   - HTML and embedded RSC payload are streamed together to the client
+
+3. Client Hydration:
+   - Browser displays HTML immediately
+   - React runtime uses the embedded RSC payload for hydration
+   - Client components are hydrated progressively without requiring a separate HTTP request
+
+This approach offers significant advantages:
+- Eliminates double rendering of server components
+- Reduces HTTP requests by embedding the RSC payload within the initial HTML response
+- Provides faster interactivity through streamlined rendering and hydration
+
+```mermaid
+sequenceDiagram
+    participant Browser
+    participant RailsView
+    participant NodeRenderer
+    participant RSCBundle
+    participant ServerBundle
+    
+    Note over Browser,ServerBundle: 1. Initial Request
+    Browser->>RailsView: Request page
+    RailsView->>NodeRenderer: stream_react_component
+    NodeRenderer->>ServerBundle: Execute rendering request
+    ServerBundle->>RSCBundle: generateRSCPayload(component, props)
+    RSCBundle-->>ServerBundle: RSC payload with:<br/>- Server components<br/>- Client component refs
+    ServerBundle-->>NodeRenderer: Generate HTML using RSC payload
+    
+    Note over Browser,ServerBundle: 2. Single Response
+    NodeRenderer-->>Browser: Stream HTML with embedded RSC payload
+    
+    Note over Browser: 3. Client Hydration
+    Browser->>Browser: Process embedded RSC payload
+    loop For each client component
+        Browser->>Browser: Fetch component chunk
+        Browser->>Browser: Hydrate component
+    end
+```
+
+## Next Steps
+
+To learn more about how to render React Server Components inside client components, see [React Server Components Inside Client Components](./inside-client-components.md).

data/docs/react-server-components/selective-hydration-in-streamed-components.md

@@ -0,0 +1,75 @@
+# Selective Hydration in React Server Components
+
+## Introduction
+
+React has introduced a powerful enhancement to server-side rendering through streaming and React Server Components - selective hydration. This feature fundamentally changes how pages become interactive in the browser.
+
+Previously, with traditional server-side rendering, the browser had to wait for the entire page to load and all JavaScript to execute before any part could become interactive. This created a noticeable delay in page interactivity, especially for larger applications.
+
+With selective hydration, React can now hydrate different parts of the page independently and asynchronously. Key benefits include:
+
+- Components can become interactive as soon as their code and data are available, without waiting for the entire page
+- React automatically prioritizes hydrating components that users are trying to interact with
+
+This approach significantly improves both perceived and actual performance by making the most relevant parts interactive first.
+
+## Try Selective Hydration with React Server Component Page
+
+Let's try selective hydration with the React Server Component Page we created in the [SSR React Server Components](./server-side-rendering.md).
+
+Let's add a component that is very slow to load into the page.
+
+```jsx
+const LongWaitingComponent = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 5000));
+  return <div>Long waiting component</div>;
+};
+```
+
+Add the component to the page.
+
+```jsx
+// app/javascript/packs/components/ReactServerComponentPage.jsx
+const ReactServerComponentPage = () => {
+  return (
+    <div>
+      <ReactServerComponent />
+      <Suspense fallback={<div>Loading The Long Waiting Component...</div>}>
+        <LongWaitingComponent />
+      </Suspense>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Posts />
+      </Suspense>
+    </div>
+  );
+};
+```
+
+## Fixing Compatibility Issue that Blocks Hydration
+
+When you run the page, you should see "Loading The Long Waiting Component..." in the browser for 5 seconds. Then, the component is rendered and the page becomes interactive.
+
+You can notice that the page doesn't become interactive until the Long Waiting Component is rendered, which contradicts what we discussed about selective hydration.
+
+This happens because React on Rails by default adds the scripts that hydrate components as `defer` scripts, which only execute after the whole page is loaded. Since the page is being streamed, this means the scripts won't run until all components have been server-side rendered and streamed to the browser.
+
+This default behavior was kept for backward compatibility, as there were previously race conditions that could occur when using `async` scripts before the page fully loaded. However, these race conditions have been fixed in the latest React on Rails release.
+
+To enable true selective hydration, we need to configure React on Rails to load scripts as `async` scripts by setting `generated_component_packs_loading_strategy: :async` in the initializer:
+
+```ruby
+# config/initializers/react_on_rails.rb
+ReactOnRails.configure do |config|
+  config.generated_component_packs_loading_strategy = :async
+end
+```
+
+Now, when you run the page, you can see that while the Long Waiting Component is loading ⏳, the other components are interactive ✨🖱️
+
+## Conclusion
+
+Selective hydration is a powerful feature that allows React to become interactive as soon as its code and data are available, without waiting for the entire page to load. This approach significantly improves both perceived and actual performance by making the most relevant parts interactive first.
+
+## Next Steps
+
+Now that you understand how to use selective hydration in React Server Components, you can proceed to the next article: [How React Server Components Work](how-react-server-components-work.md) to learn about the technical details and underlying mechanisms of React Server Components.

data/docs/react-server-components/server-side-rendering.md

@@ -0,0 +1,72 @@
+# SSR React Server Components
+
+Before reading this document, please read:
+1. [Create React Server Component without SSR](./create-without-ssr.md)
+2. [Add Streaming and Interactivity to RSC Page](./add-streaming-and-interactivity.md)
+
+These documents provide essential background on React Server Components and how they work without Server Side Rendering (SSR).
+
+## Update the React Server Component Page
+
+Let's make React on Rails server-side render the React Server Component Page we created in the previous articles.
+
+Update the `react_server_component_without_ssr.html.erb` view to pass `prerender: true` to the `react_component` helper.
+
+```erb
+<%= react_component("ReactServerComponentPage", 
+    prerender: true,
+    trace: true,
+    id: "ReactServerComponentPage-react-component-0") %>
+```
+
+Now, when you visit the page, you should see part of the React Server Component page rendered in the browser. Then, we get the error:
+
+```
+The server did not finish this Suspense boundary: The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToPipeableStream" which supports Suspense on the server
+```
+
+This error occurs because the `react_component` helper uses React's `renderToString` function, which renders the React page synchronously in a single pass. This approach isn't suitable for React Server Components, which can contain asynchronous operations and need progressive streaming of content.
+
+Instead, we need to use the streaming capabilities provided by React on Rails Pro, as detailed in the [streaming server rendering documentation](../streaming-server-rendering.md). These helpers internally use React's `renderToPipeableStream` API, which supports:
+
+1. Server-side rendering of async components
+2. Progressive streaming of HTML chunks to the client as components finish rendering
+3. Incremental hydration, where each component can be hydrated independently as it loads, rather than waiting for the entire application
+
+To enable streaming SSR for React Server Components, we need to:
+
+1. Create a new view called `react_server_component_ssr.html.erb` with the following content:
+
+    ```erb
+    # app/views/pages/react_server_component_ssr.html.erb
+    <%= stream_react_component("ReactServerComponentPage",
+        id: "ReactServerComponentPage-react-component-0") %>
+    
+    <h1>React Server Component with SSR</h1>
+    ```
+
+2. Ensure our controller includes `ReactOnRailsPro::Stream` and use the `stream_view_containing_react_components` helper to render the view:
+
+    ```ruby
+    # app/controllers/pages_controller.rb
+    class PagesController < ApplicationController
+      include ReactOnRailsPro::Stream
+    
+      def react_server_component_ssr
+        stream_view_containing_react_components(template: "pages/react_server_component_ssr")
+      end
+    end
+    ```
+
+3. Add the route to `config/routes.rb`:
+
+    ```ruby
+    # config/routes.rb
+    get "/react_server_component_ssr", to: "pages#react_server_component_ssr"
+    ```
+
+Now, when you visit the page, you should see the entire React Server Component page rendered in the browser. And if you viewed the page source, you should see the HTML being streamed to the browser.
+
+## Next Steps
+
+Now that you understand how to enable server-side rendering (SSR) for your React Server Components, you can proceed to the next article: [Selective Hydration in Streamed Components](selective-hydration-in-streamed-components.md) to learn about React's selective hydration feature and how it improves page interactivity.

data/docs/react-server-components/tutorial.md

@@ -0,0 +1,19 @@
+# React Server Components Tutorial
+
+This tutorial will guide you through learning [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) with React on Rails Pro, from basic concepts to advanced features. The tutorial is divided into several parts that build upon each other:
+
+1. [Create React Server Component without SSR](create-without-ssr.md) - Learn the fundamentals of React Server Components by creating a basic RSC page without server-side rendering.
+
+2. [Add Streaming and Interactivity to RSC Page](add-streaming-and-interactivity.md) - Enhance your RSC page with streaming capabilities and client-side interactivity using Suspense and client components.
+
+3. [Server-Side Rendering for React Server Components](server-side-rendering.md) - Add SSR to your React Server Components for improved initial page load performance.
+
+4. [Selective Hydration in Streamed Components](selective-hydration-in-streamed-components.md) - Learn about React's selective hydration feature and how it improves page interactivity.
+
+5. [How React Server Components Work](how-react-server-components-work.md) - Dive deep into the technical details and underlying mechanisms of React Server Components.
+
+6. [React Server Components Rendering Flow](rendering-flow.md) - Understand the detailed rendering flow of RSC, including bundle types, current limitations, and future improvements.
+
+7. [React Server Components Inside Client Components](inside-client-components.md) - Learn how to render server components inside client components.
+
+Each part of the tutorial builds on the concepts from previous sections, so it's recommended to follow them in order. Let's begin with creating your first React Server Component!

data/docs/release-notes/4.0.md

@@ -0,0 +1,94 @@
+# 4.0 Release Notes
+
+## 🚀 Major New Features
+
+### React Server Components (RSC) - Full Production Support
+React on Rails Pro now provides comprehensive support for React Server Components, enabling you to build the next generation of React applications:
+
+- **Full RSC Integration**: Seamlessly use React Server Components in your Rails apps with zero configuration
+- **Bundle Optimization**: Automatic client/server code splitting that significantly reduces client-side JavaScript
+- **Server-Side Data Fetching**: Direct access to databases, APIs, and server resources from React components
+- **Progressive Hydration**: Client components hydrate independently for optimal performance
+- **RSC Payload Streaming**: Efficient streaming of component data with embedded payloads
+- **Compatible with React Router**: [Use React Router with RSC](../react-server-components/inside-client-components.md)
+
+See our [complete RSC tutorial](../react-server-components-tutorial.md) to get started.
+
+### Advanced Streaming Server Rendering
+Building on React 19's streaming capabilities, React on Rails Pro delivers:
+
+- **Progressive HTML Streaming**: Send page content as it becomes available
+- **Suspense Boundary Support**: Handle async components with proper loading states
+- **Selective Hydration**: Components become interactive as soon as they're ready
+- **Error Boundary Handling**: Graceful error handling during streaming with configurable error raising
+- **Async Console Log Replay**: Debug async server-side rendering with client-side console output
+
+### Enhanced Error Reporting & Tracing
+Completely redesigned error reporting system with:
+
+- **Custom Integration Support**: Integrate with any error reporting service (Sentry, Honeybadger, or custom)
+- **Sentry SDK v8 Support**: Latest Sentry integration with improved performance
+- **Flexible Configuration**: Configure error reporting according to your preferences
+- **Enhanced Tracing**: Better visibility into rendering performance and issues
+
+## Performance Improvements
+
+### Node Renderer Architecture
+- **Fastify 5 Integration**: Upgraded from Express to Fastify for significantly better performance
+- **HTTP/2 Cleartext Communication**: Rails communicates with Node renderer over HTTP/2 instead of HTTP/1.1
+- **HTTPX Client**: Replaced Net::HTTP with HTTPX for improved connection handling
+- **Pino Logging**: Switched from Winston to Pino for better performance and Fastify compatibility
+
+These changes provide:
+- Better performance when Node renderer is deployed on the same machine as Rails
+- Significantly improved performance when deployed in separate workloads
+- Enhanced connection reuse and multiplexing capabilities
+- Better error handling and process management
+
+
+### Changes Specific For RSC Rendering Optimization
+- **Cross-Bundle Communication**: Components can now interact seamlessly across different bundles using the new `runOnOtherBundle` function, enabling advanced composition and modularization patterns.
+- **Single-Pass Server Component Rendering**: Server components are rendered just once within the RSC bundle, then efficiently reused for both SSR and client hydration—eliminating redundant work and improving performance.
+- **Reduced HTTP Requests**: RSC payloads are now embedded directly into the initial HTML response. No need to make an additional request to fetch the RSC payload.
+- **Protocol v2.0 – Unified Bundle Management**: The new protocol allows simultaneous upload of both server and RSC bundles in a single request, supporting multiple bundle uploads and providing robust, flexible bundle management for complex applications.
+
+## Breaking Changes
+
+### Configuration Updates
+- **Sentry/Honeybadger**: Remove old configuration options starting with `sentry` or `honeybadger`
+- **Timer Polyfills**: `includeTimerPolyfills` is renamed to `stubTimers`
+- **Environment Variables**: `RENDERER_STUB_TIMERS` instead of `INCLUDE_TIMER_POLYFILLS`
+- **Error Reporting**: Follow the [Error Reporting and Tracing](../node-renderer/error-reporting-and-tracing.md) documentation for new setup
+
+### Dependency Requirements
+- **Ruby 3+**: Dropped support for Ruby 2.7 (EOL)
+- **React on Rails 15+**: Required for RSC and streaming features
+- **Node 20+**: Strongly recommended (older versions require specific package.json resolutions)
+
+### Package.json Resolutions (for Node < 20)
+If using older Node versions, add to your `package.json`:
+```json
+"resolutions": {
+  "@fastify/formbody": "^7.4.0",
+  "@fastify/multipart": "^8.3.1",
+  "fastify": "^4.29.0"
+}
+```
+
+## Getting Started
+
+- **RSC Tutorial**: [Complete React Server Components Guide](../react-server-components-tutorial.md)
+- **Streaming SSR**: [Streaming Server Rendering Documentation](../streaming-server-rendering.md)
+- **Error Reporting**: [Error Reporting and Tracing Setup](../node-renderer/error-reporting-and-tracing.md)
+- **Performance**: [Caching and Optimization Guide](../caching.md)
+
+## Support & Community
+
+- **Documentation**: Comprehensive guides and tutorials available
+- **Examples**: Working examples in the spec/dummy application
+- **GitHub**: Active development and community support
+- **Discussions**: Join the [React on Rails community](https://forum.shakacode.com/) for help and updates
+
+---
+
+*React on Rails Pro 4.0 represents a major evolution in server-side React rendering, bringing React Server Components and advanced streaming to the Rails ecosystem with enterprise-grade performance and reliability.*

data/docs/release-notes/v4-react-server-components.md

@@ -0,0 +1,66 @@
+# React on Rails Pro: Introducing React Server Components & SSR Streaming
+
+**Subject: 🚀 Revolutionary Performance Boost: React Server Components & SSR Streaming Now Available in React on Rails Pro**
+
+---
+
+Dear Valued React on Rails Pro Client,
+
+We're thrilled to announce a major update: React on Rails Pro now supports **React Server Components** and **Server‑Side Rendering (SSR) Streaming**. These features have driven significant performance gains in real‑world applications—here’s how they can transform yours.
+
+## 🎯 What This Means for Your Applications
+
+* **Faster load times**
+* **Smaller JavaScript bundles**
+* **Better Core Web Vitals**
+* **Improved SEO**
+* **Smoother user interactions**
+
+## 🔥 React Server Components
+
+Server Components execute on the server and stream HTML to the client—no extra JavaScript in your bundle. Real‑world results include:
+
+* **62% reduction** in client‑side bundle size on productonboarding.com when migrating to RSC [[1]]
+* **63% improvement** in Google Speed Index on the RSC version of the same site [[1]]
+* **52% smaller** JavaScript codebase and Lighthouse scores rising from \~50 to 90+ on GeekyAnts.com [[2]]
+
+## 🌊 SSR Streaming
+
+SSR Streaming sends HTML to the browser in chunks as it’s generated, enabling progressive rendering:
+
+* **30% faster** full‑page load times at Hulu by combining streaming SSR with Server Components [[3]]
+* Popular libraries like styled‑components v3.1.0 have introduced streaming SSR support as the next generation of React app rendering [[4]]
+
+## 📊 Core Web Vitals & TTI Improvements
+
+* **60% faster** Time to Interactive on Meta’s developer portal after adopting RSC (from 3.5 s to \~1.4 s) [[5]]
+* **45% quicker** First Contentful Paint in the same migration [[5]]
+* **50% lower** server response time with Server Components [[5]]
+* **15% improvement** in Core Web Vitals and **23% reduction** in Time to First Byte at Airbnb after RSC migration [[5]]
+
+---
+
+Adopting these features in React on Rails Pro will help you deliver faster, leaner, and more SEO‑friendly applications with fewer client‑side resources.
+
+**Ready to get started?**
+
+1. Update to the latest React on Rails Pro version
+2. Follow our [RSC & SSR Streaming migration guide](https://github.com/shakacode/react_on_rails_pro/blob/abanoubghadban/pro465/use-rsc-payload-to-render-server-components-on-server/docs/react-server-components-tutorial.md)
+
+Let’s make your apps faster—together.
+
+---
+
+## 📚 References
+
+1. productonboarding.com experiment: 62% bundle reduction, 63% Speed Index gain ([frigade.com][1])
+2. GeekyAnts.com case study: 52% code reduction, Lighthouse 50→90+ ([geekyants.com][2])
+3. Hulu—30% faster full‑page loads with streaming SSR + RSC ([questlab.pro][3])
+4. styled‑components v3.1.0: introduced streaming SSR support as the next generation of React rendering. ([medium.com][4])
+5. QuestLab: Meta’s RSC migration—30% JS reduction, 60% faster TTI, 45% faster FCP, 50% lower server response ([questlab.pro][5])
+
+[1]: https://frigade.com/blog/bundle-size-reduction-with-rsc-and-frigade
+[2]: https://geekyants.com/en-gb/blog/boosting-performance-with-nextjs-and-react-server-components-a-geekyantscom-case-study
+[3]: https://www.compilenrun.com/docs/framework/nextjs/nextjs-ecosystem/nextjs-case-studies/#case-study-3-hulus-streaming-platform
+[4]: https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03
+[5]: https://questlab.pro/blog-posts/web-development/wd-pl-2024-articleId912i1h212818

data/docs/ruby-api.md

@@ -0,0 +1,11 @@
+# Ruby API
+
+Note: you will need access to our **private** React on Rails Pro repository to open the following links.
+
+## View Helpers
+
+See the [app/helpers/react_on_rails_pro_helper.rb](https://github.com/shakacode/react_on_rails_pro/blob/master/app/helpers/react_on_rails_pro_helper.rb) source.
+
+## Utility Methods
+
+See the [lib/react_on_rails_pro/utils.rb](https://github.com/shakacode/react_on_rails_pro/blob/master/lib/react_on_rails_pro/utils.rb) source.