Merge branch 'main' into blog/how-we-test-tanstack-ai-across-7-providers

Author: AlemTuzlak

src/blog/react-server-components.md

@@ -63,7 +63,10 @@ Here is an RSC in TanStack Start:
 
 ```tsx
 import { createServerFn } from '@tanstack/react-start'
-import { renderToReadableStream } from '@tanstack/react-start/rsc'
+import {
+  createFromReadableStream,
+  renderToReadableStream,
+} from '@tanstack/react-start/rsc'
 
 // Create a server function
 const getGreeting = createServerFn().handler(async () => {
@@ -119,6 +122,12 @@ Let me explain.
 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.
 
 ```tsx
+import { createServerFn } from '@tanstack/react-start'
+import {
+  createFromReadableStream,
+  renderToReadableStream,
+} from '@tanstack/react-start/rsc'
+
 const getGreeting = createServerFn().handler(async () => {
   return renderToReadableStream(<h1>Hello from the server</h1>)
 })
@@ -160,6 +169,30 @@ export const Route = createFileRoute('/hello')({
 
 > Navigate from `/posts/abc` to `/posts/xyz` and the loader runs again. Navigate back to `/posts/abc` and Router can serve the cached result instantly. That snappy back-button experience falls out of the same loader caching model you are already using.
 
+### CDN: Cache The GET Response Itself
+
+Because GET server functions are still just HTTP under the hood, you can also cache the response itself at the CDN layer.
+
+```tsx
+import { createServerFn } from '@tanstack/react-start'
+import { renderToReadableStream } from '@tanstack/react-start/rsc'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+
+const getGreeting = createServerFn({ method: 'GET' }).handler(async () => {
+  setResponseHeaders(
+    new Headers({
+      'Cache-Control': 'public, max-age=0, must-revalidate',
+      'Netlify-CDN-Cache-Control':
+        'public, max-age=300, durable, stale-while-revalidate=300',
+    }),
+  )
+
+  return renderToReadableStream(<h1>Hello from the server</h1>)
+})
+```
+
+That is the same pattern we use here for blog and docs content. Browser cache rules can stay conservative while the CDN caches the server function response much more aggressively.
+
 With Start, RSCs fit into the same data workflows you already use.
 
 ## Security: One-Way Data Flow
@@ -224,17 +257,19 @@ That is the tradeoff:
 
 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.
 
-## Introducing Composite Components, the anti-`'use client'`
+## Introducing Composite Components
 
 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.
 
 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?
 
 That led us to create something entirely new: **Composite Components**.
 
-`use client` still matters when the server intentionally wants to render a client component. Composite Components are for the opposite case. The server can leave join points for client UI without needing to know what goes there.
+`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 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.
 
-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.
+That is the part that feels genuinely new to us.
 
 ### Slots Inside One Component
 

src/routes/__root.tsx

@@ -185,7 +185,7 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
   }, [isNavigating])
 
   const canonicalPath = useRouterState({
-    select: (s) => s.resolvedLocation?.pathname || '/',
+    select: (s) => s.location?.pathname || '/',
   })
 
   const preferredCanonicalPath = getCanonicalPath(canonicalPath)