Skip to content

Commit 595019f

Browse files
committed
docs: clarify composite component examples
1 parent d289bf6 commit 595019f

1 file changed

Lines changed: 15 additions & 4 deletions

File tree

src/blog/react-server-components.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,10 @@ Here is an RSC in TanStack Start:
6363
6464
```tsx
6565
import { createServerFn } from '@tanstack/react-start'
66-
import { renderToReadableStream } from '@tanstack/react-start/rsc'
66+
import {
67+
createFromReadableStream,
68+
renderToReadableStream,
69+
} from '@tanstack/react-start/rsc'
6770

6871
// Create a server function
6972
const getGreeting = createServerFn().handler(async () => {
@@ -119,6 +122,12 @@ Let me explain.
119122
TanStack Query illustrates this so well. It does not need a special "RSC mode". Once the RSC payload is part of an async query, you still get explicit cache keys, `staleTime`, background refetching, and the rest of Query's toolbox. For static content, just set `staleTime: Infinity` and you are done.
120123

121124
```tsx
125+
import { createServerFn } from '@tanstack/react-start'
126+
import {
127+
createFromReadableStream,
128+
renderToReadableStream,
129+
} from '@tanstack/react-start/rsc'
130+
122131
const getGreeting = createServerFn().handler(async () => {
123132
return renderToReadableStream(<h1>Hello from the server</h1>)
124133
})
@@ -224,17 +233,19 @@ That is the tradeoff:
224233

225234
That is why we think they matter. Not because every route should become a server component. Because when you use them where they fit, the payoff is measurable and not subtle.
226235

227-
## Introducing Composite Components, the anti-`'use client'`
236+
## Introducing Composite Components
228237

229238
Everything above stands on its own. If all TanStack Start did was treat RSCs as fetchable, cacheable, renderable data, we would already think that was a better foundation for RSCs.
230239

231240
But we kept pulling on one question: what if the server did not need to decide every client-shaped part of the UI at all?
232241

233242
That led us to create something entirely new: **Composite Components**.
234243

235-
`use client` still works the same way in TanStack Start when the server intentionally wants to render a client component. `use server` does not. Start uses explicit [Server Functions](/start/latest/docs/framework/react/guide/server-functions) instead. Composite Components are not a replacement for `use client`. They are the opposite case: the server can leave join points for client UI without needing to know what goes there, while the client still owns the tree and composition.
244+
`use client` still works the same way in TanStack Start when the server intentionally wants to render a client component. `use server` does not. Start uses explicit [Server Functions](/start/latest/docs/framework/react/guide/server-functions) instead.
245+
246+
Composite Components are not a replacement for `use client`. They solve a similar composition problem from the opposite direction. Instead of the server deciding which client component renders where, the server can leave join points open and let the client own the tree and decide what fills them.
236247

237-
That is the part that feels genuinely new to us. Most RSC systems let the server decide where client components render. Composite Components let the server leave that decision open.
248+
That is the part that feels genuinely new to us.
238249

239250
### Slots Inside One Component
240251

0 commit comments

Comments
 (0)