rsc patterns

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Nested streamable UIs pass streamables as component props

You can nest streamable UIs by passing a streamable UI's value as a prop to another component. The parent component can render the streamable prop, which will automatically update as the server responds with new data.

Multiple streamables update independently based on data arrival

When multiple streamable UIs are returned from a server action, each one updates independently based on when its corresponding data becomes available. Two components might update at different times depending on the speed of getting their respective data.

createStreamableUI creates independent streamable UI components

The createStreamableUI function from @ai-sdk/rsc creates individual streamable UI components that can be returned together in a single response. Multiple streamable UIs can be composed and streamed separately, allowing you to decouple the UI into smaller components.

Multiple streamable UIs can be returned as object properties

You can return an object containing multiple streamable UIs along with other data fields from a server action. For example, you can return an object with properties like weather and forecast, each containing a streamable UI created with createStreamableUI().

Streamable UI update and done methods for progressive rendering

Streamable UIs have two methods: update() sets initial or intermediate content and can be called multiple times, while done() finalizes the stream with the final content. You typically call update() with loading state, then call done() when data is ready.

Example: Multiple streamable UIs with weather and forecast

```tsx 'use server'; import { createStreamableUI } from '@ai-sdk/rsc'; export async function getWeather() { const weatherUI = createStreamableUI(); const forecastUI = createStreamableUI(); weatherUI.update(<div>Loading weather...</div>); forecastUI.update(<div>Loading forecast...</div>); getWeatherData().then(weatherData => { weatherUI.done(<div>{weatherData}</div>); }); getForecastData().then(forecastData => { forecastUI.done(<div>{forecastData}</div>); }); return { requestedAt: Date.now(), weather: weatherUI.value, forecast: forecastUI.value, }; } ``` This example shows how to create two independent streamable UIs for weather and forecast, update them with loading states, and return both along with other data.

Example: Nested streamable UI with stock chart as component prop

```tsx async function getStockHistoryChart({ symbol: string }) { 'use server'; const ui = createStreamableUI(<Spinner />); (async () => { const price = await getStockPrice({ symbol }); const historyChart = createStreamableUI(<Spinner />); ui.done(<StockCard historyChart={historyChart.value} price={price} />); const historyData = await fetch('https://my-stock-data-api.com'); historyChart.done(<HistoryChart data={historyData} />); })(); return ui; } ``` This example demonstrates nesting a streamable UI by passing historyChart.value as a prop to the StockCard component, allowing the nested chart to update independently.

Import createStreamableUI from @ai-sdk/rsc

The createStreamableUI function is imported from the @ai-sdk/rsc package and is used in server actions to create streamable UI components.

Give your agent this brain