Fix fictional API names, missing associations, form_with, and CSRF patterns in RSC docs

Replace stream_react_component_with_async_props (fictional, 18 occurrences)
with the real stream_react_component helper. Replace getReactOnRailsAsyncProp
(fictional, 38 occurrences) with direct prop access. Remove WithAsyncProps
type references. Rewrite ERB examples to pass all data as regular props
instead of using the nonexistent block/emit pattern.

Fix as_json calls that access nested associations (specs, reviews) by adding
include: option. Add local: true to form_with example for Rails < 6.1
compatibility. Replace CSRF token prop pattern with
ReactOnRails.authenticityToken() in three form examples.

Fixes #2802

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: justin808

docs/oss/migrating/migrating-to-rsc.md

@@ -112,7 +112,7 @@ Tailored for React on Rails' multi-root architecture:
 
 1. **[Prepare your app](rsc-preparing-app.md)** -- set up the RSC infrastructure, add `'use client'` to all component entry points, and switch to streaming rendering. The app works identically -- nothing changes yet.
 2. **Pick a component and push the boundary down** -- move `'use client'` from the root component to its interactive children, letting parent components become Server Components.
-3. **Adopt advanced patterns** -- add Suspense boundaries, [async props](rsc-data-fetching.md#data-fetching-in-react-on-rails-pro) for streaming data from Rails, and server-side data fetching.
+3. **Adopt advanced patterns** -- add Suspense boundaries, [`stream_react_component`](rsc-data-fetching.md#data-fetching-in-react-on-rails-pro) for streaming SSR, and server-side data fetching.
 4. **Repeat for each registered component** -- migrate components one at a time, in any order.
 
 This approach lets you migrate incrementally, one component at a time, without ever breaking your app.

docs/oss/migrating/rsc-component-patterns.md

@@ -169,7 +169,7 @@ export default function ProductPage({ productId }) {
 ```erb
 <%# ERB view — Rails passes the data as props %>
 <%= stream_react_component("ProductPage",
-      props: { product: @product.as_json }) %>
+      props: { product: @product.as_json(include: [:specs, :reviews]) }) %>
 ```
 
 ```jsx
@@ -329,49 +329,34 @@ export default function Homepage() {
 
 **Key insight:** `Homepage` (a Server Component) is the component that imports and renders `Header`, `MainContent`, and `Footer`. Since `Homepage` owns these children, they remain Server Components -- even though they're visually nested inside the Client Component `ColorProvider`.
 
-## Pattern 4: Async Props with Suspense
+## Pattern 4: Streaming with `stream_react_component`
 
-In React on Rails, use async props to stream data progressively. Each async prop streams to the browser independently as it becomes ready, and Suspense boundaries show fallbacks until the data arrives:
+In React on Rails, `stream_react_component` uses React's streaming SSR (`renderToPipeableStream`) to deliver HTML progressively. Rails passes all data as props, and the streaming infrastructure delivers the rendered output efficiently:
 
 ```erb
-<%# ERB view — sync props render the shell, async props stream in %>
-<%= stream_react_component_with_async_props("Dashboard",
-      props: { title: "Dashboard" }) do |emit|
-  emit.call("stats", DashboardStats.compute.as_json)
-  emit.call("revenue", RevenueChart.data.as_json)
-  emit.call("orders", Order.recent.as_json)
-end %>
+<%# ERB view — Rails passes all data as props %>
+<%= stream_react_component("Dashboard",
+      props: { title: "Dashboard",
+               stats: DashboardStats.compute.as_json,
+               revenue: RevenueChart.data.as_json,
+               orders: Order.recent.as_json }) %>
 ```
 
 ```jsx
 // Dashboard.jsx -- Server Component
-import { Suspense } from 'react';
-import { StatsSkeleton, ChartSkeleton, TableSkeleton } from './Skeletons';
-
-export default function Dashboard({ title, getReactOnRailsAsyncProp }) {
-  const statsPromise = getReactOnRailsAsyncProp('stats');
-  const revenuePromise = getReactOnRailsAsyncProp('revenue');
-  const ordersPromise = getReactOnRailsAsyncProp('orders');
-
+export default function Dashboard({ title, stats, revenue, orders }) {
   return (
     <div>
       <h1>{title}</h1>
-      <Suspense fallback={<StatsSkeleton />}>
-        <Stats statsPromise={statsPromise} />
-      </Suspense>
-      <Suspense fallback={<ChartSkeleton />}>
-        <RevenueChart revenuePromise={revenuePromise} />
-      </Suspense>
-      <Suspense fallback={<TableSkeleton />}>
-        <RecentOrders ordersPromise={ordersPromise} />
-      </Suspense>
+      <Stats stats={stats} />
+      <RevenueChart revenue={revenue} />
+      <RecentOrders orders={orders} />
     </div>
   );
 }
 
-// Stats.jsx -- Async Server Component (awaits the streamed prop)
-export default async function Stats({ statsPromise }) {
-  const stats = await statsPromise;
+// Stats.jsx -- Server Component (renders directly from props)
+export default function Stats({ stats }) {
   return (
     <div>
       <span>Revenue: {stats.revenue}</span>
@@ -381,63 +366,60 @@ export default async function Stats({ statsPromise }) {
 }
 ```
 
-Each `<Suspense>` boundary enables independent streaming -- the user sees content progressively as each async prop resolves, rather than waiting for the slowest query.
+`stream_react_component` streams the rendered HTML progressively to the browser. All data is available as props -- no client-side fetching or loading states needed.
 
-## Pattern 5: Async Props to Client Components via `use()`
+## Pattern 5: Server Data to Interactive Client Components
 
-Pass an async prop promise to a Client Component that resolves it with the `use()` hook. This lets data stream from Rails while the Client Component handles interactivity:
+Pass server-fetched data from Rails to a Client Component that adds interactivity. The Server Component receives the data as props and passes it to the Client Component:
 
 ```erb
-<%# ERB view — sync props render the shell, comments stream in %>
-<%= stream_react_component_with_async_props("PostPage",
-      props: { title: post.title, body: post.body }) do |emit|
-  emit.call("comments", post.comments.includes(:author).as_json)
-end %>
+<%# ERB view — Rails passes all data as props %>
+<%= stream_react_component("PostPage",
+      props: { title: post.title,
+               body: post.body,
+               comments: post.comments.includes(:author).as_json }) %>
 ```
 
 ```jsx
 // PostPage.jsx -- Server Component
-import { Suspense } from 'react';
 import Comments from './Comments';
 
-export default function PostPage({ title, body, getReactOnRailsAsyncProp }) {
-  const commentsPromise = getReactOnRailsAsyncProp('comments');
-
+export default function PostPage({ title, body, comments }) {
   return (
     <article>
       <h1>{title}</h1>
       <p>{body}</p>
-      <Suspense fallback={<p>Loading comments...</p>}>
-        <Comments commentsPromise={commentsPromise} />
-      </Suspense>
+      <Comments comments={comments} />
     </article>
   );
 }
 ```
 
-> **Requires React 19+.** The `use(promise)` pattern for server-to-client promise handoff is not available in React 18.
-
 ```jsx
-// Comments.jsx -- Client Component
+// Comments.jsx -- Client Component (adds interactivity like reply buttons)
 'use client';
 
-import { use } from 'react';
+import { useState } from 'react';
+
+export default function Comments({ comments }) {
+  const [expanded, setExpanded] = useState({});
 
-export default function Comments({ commentsPromise }) {
-  const comments = use(commentsPromise); // Resolves the promise
   return (
     <ul>
       {comments.map((c) => (
-        <li key={c.id}>{c.text}</li>
+        <li key={c.id}>
+          {c.text}
+          <button onClick={() => setExpanded((prev) => ({ ...prev, [c.id]: !prev[c.id] }))}>
+            {expanded[c.id] ? 'Collapse' : 'Reply'}
+          </button>
+        </li>
       ))}
     </ul>
   );
 }
 ```
 
-**Benefits:** The post title and body render immediately as sync props. Comments stream in when Rails calls `emit.call("comments", ...)`. The Client Component resolves the promise with `use()` and can add interactivity (e.g., reply buttons).
-
-> **Warning:** Never create promises inside Client Components for `use()` -- this causes the "uncached promise" runtime error. See [Common `use()` Mistakes](rsc-data-fetching.md#common-use-mistakes-in-client-components) for why and what to do instead.
+**Benefits:** The Server Component handles data display with zero JavaScript cost. The Client Component receives pre-fetched data as props and adds only the interactivity it needs (reply buttons, expand/collapse).
 
 ## Decision Guide: Server or Client Component?
 

docs/oss/migrating/rsc-context-and-state.md

@@ -95,7 +95,7 @@ export default function Providers({ children, user }) {
 <%# ERB view — Rails passes the data as props %>
 <%= stream_react_component("ProductPage",
       props: { user: current_user.as_json(only: [:id, :name]),
-               product: @product.as_json }) %>
+               product: @product.as_json(include: [:specs, :reviews]) }) %>
 ```
 
 ```jsx
@@ -122,47 +122,34 @@ export default function ProductPage({ user, product }) {
 
 ## Pattern 3: Streaming Slow Data with Async Props
 
-> **Note:** This section covers a cross-cutting concern (data fetching via async props) that affects how you structure context and state. For the full treatment of data fetching patterns, see [Data Fetching Migration](rsc-data-fetching.md).
+> **Note:** This section covers a cross-cutting concern (data fetching via `stream_react_component`) that affects how you structure context and state. For the full treatment of data fetching patterns, see [Data Fetching Migration](rsc-data-fetching.md).
 
-In React on Rails, data comes from Rails as props. Some data is available immediately (user session, page title), but other data requires expensive queries (analytics, recommendations, external APIs). With **async props**, you send the fast data as regular props so the shell renders immediately, and stream the slow data in the background as it becomes ready.
+In React on Rails, data comes from Rails as props. Rails fetches all data in the controller and passes it to `stream_react_component`, which uses React's streaming SSR to deliver the rendered HTML progressively.
 
 ```erb
-<%= stream_react_component_with_async_props("ProductPage",
-      props: { name: product.name, price: product.price }) do |emit|
-  # These run in the background while the shell renders
-  emit.call("reviews", product.reviews.includes(:author).as_json)
-  emit.call("recommendations", RecommendationService.for(product).as_json)
-end %>
+<%= stream_react_component("ProductPage",
+      props: { name: product.name, price: product.price,
+               reviews: product.reviews.includes(:author).as_json,
+               recommendations: RecommendationService.for(product).as_json }) %>
 ```
 
-The component renders its shell (`name`, `price`) instantly. Each async prop streams in when Rails finishes computing it, filling in Suspense boundaries progressively:
+The component renders with all data available as props. `stream_react_component` uses React's streaming SSR to deliver the HTML progressively:
 
 ```jsx
 // ProductPage.jsx -- Server Component
-import { Suspense } from 'react';
-
-export default function ProductPage({ name, price, getReactOnRailsAsyncProp }) {
-  const reviewsPromise = getReactOnRailsAsyncProp('reviews');
-  const recommendationsPromise = getReactOnRailsAsyncProp('recommendations');
-
+export default function ProductPage({ name, price, reviews, recommendations }) {
   return (
     <div>
       <h1>{name}</h1>
       <p>${price}</p>
 
-      <Suspense fallback={<p>Loading reviews...</p>}>
-        <Reviews reviewsPromise={reviewsPromise} />
-      </Suspense>
-      <Suspense fallback={<p>Loading recommendations...</p>}>
-        <Recommendations itemsPromise={recommendationsPromise} />
-      </Suspense>
+      <ReviewList reviews={reviews} />
+      <RecommendationList items={recommendations} />
     </div>
   );
 }
 
-// Server Component -- awaits the streamed prop
-async function Reviews({ reviewsPromise }) {
-  const reviews = await reviewsPromise;
+function ReviewList({ reviews }) {
   return (
     <ul>
       {reviews.map((r) => (
@@ -173,11 +160,11 @@ async function Reviews({ reviewsPromise }) {
 }
 ```
 
-`getReactOnRailsAsyncProp(key)` returns a cached Promise (same object on repeated calls), so you can pass it to multiple children -- Server Components `await` it, Client Components resolve it with `use()`. No `React.cache()` or Context wiring needed.
+All props are available immediately in the component. `stream_react_component` handles progressive HTML delivery via React's `renderToPipeableStream`.
 
 > **Note:** `React.cache()` is only available in React Server Component environments. It is not available in client components or non-RSC server rendering (e.g., `renderToString`).
 
-> For the full async props API, TypeScript typing, and more examples, see [Data Fetching in React on Rails Pro](rsc-data-fetching.md#data-fetching-in-react-on-rails-pro).
+> For more streaming patterns and examples, see [Data Fetching in React on Rails Pro](rsc-data-fetching.md#data-fetching-in-react-on-rails-pro).
 
 ## Migrating Global State Libraries
 
@@ -281,13 +268,13 @@ Zustand and Jotai follow the same pattern as Redux: keep all store access in Cli
 
 RSC reduces the need for global state libraries because data fetching moves to the server:
 
-| Use Case                                                        | Recommended Approach                                                                             |
-| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| Server data (read-only display)                                 | Rails controller props → Server Component renders directly                                       |
-| Server data (slow, shouldn't block the shell)                   | [Async props](rsc-data-fetching.md#data-fetching-in-react-on-rails-pro) with Suspense boundaries |
-| Server data (with client cache/revalidation)                    | TanStack Query with prefetch + hydrate                                                           |
-| Client UI state (modals, forms, selections)                     | `useState` / Context in Client Components                                                        |
-| Complex client state (undo/redo, shared across many components) | Redux Toolkit in Client Components                                                               |
+| Use Case                                                        | Recommended Approach                                                                                |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| Server data (read-only display)                                 | Rails controller props → Server Component renders directly                                          |
+| Server data (slow, shouldn't block the shell)                   | [Streaming](rsc-data-fetching.md#data-fetching-in-react-on-rails-pro) with `stream_react_component` |
+| Server data (with client cache/revalidation)                    | TanStack Query with prefetch + hydrate                                                              |
+| Client UI state (modals, forms, selections)                     | `useState` / Context in Client Components                                                           |
+| Complex client state (undo/redo, shared across many components) | Redux Toolkit in Client Components                                                                  |
 
 ## Specific Provider Patterns
 
@@ -443,8 +430,8 @@ export default function InteractiveFilters() {
 
 ### Phase 3: Replace Server-Side Context Usage
 
-7. Replace `useContext` in data-fetching components with Rails controller props or async props
-8. For data shared between Server and Client Components, pass async prop promises directly as props (no Context needed)
+7. Replace `useContext` in data-fetching components with Rails controller props
+8. For data shared between Server and Client Components, pass data directly as props (no Context needed)
 9. Remove Context providers that only existed to pass server data down the tree
 
 ### Phase 4: State Management Libraries