` with the server router instance
* Manages SSR-specific context and state
* Coordinates with the serialization system
## Server-Side Data Loading
Route loaders execute on the server during SSR:
```tsx app/routes/posts.$postId.tsx theme={null}
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
// This runs on the server during SSR
const post = await fetchPost(params.postId)
return { post }
},
component: Post,
})
function Post() {
const { post } = Route.useLoaderData()
return {post.title}
}
```
The loader data is:
1. Fetched on the server
2. Serialized and embedded in the HTML
3. Available immediately on the client without refetching
## Hydration
After the server sends HTML, the client "hydrates" the page:
```tsx app/client.tsx theme={null}
import { hydrateStart } from '@tanstack/react-start-client'
import { StartClient } from '@tanstack/react-start-client'
import { hydrateRoot } from 'react-dom/client'
async function hydrate() {
const router = await hydrateStart()
hydrateRoot(document, )
}
hydrate()
```
During hydration:
1. The client router reads serialized state from the HTML
2. React attaches event listeners to the server-rendered HTML
3. The app becomes interactive without re-rendering
## Request Context
Access request information during SSR:
```tsx theme={null}
import { getRequest } from '@tanstack/react-start-server'
export const Route = createFileRoute('/api/data')({
loader: async () => {
const request = getRequest()
const userAgent = request.headers.get('user-agent')
return { userAgent }
},
})
```
## Response Headers
Set response headers during SSR:
```tsx theme={null}
import { setResponseHeader } from '@tanstack/react-start-server'
export const Route = createFileRoute('/posts')({
loader: async () => {
setResponseHeader('Cache-Control', 'public, max-age=3600')
const posts = await fetchPosts()
return { posts }
},
})
```
## Asset Manifest
TanStack Start automatically generates an asset manifest during build that includes:
* JavaScript module preloads
* CSS stylesheets
* Client entry script
The manifest is resolved per request in `createStartHandler`:
```tsx theme={null}
// Internal: how Start resolves the manifest
const manifest = await getStartManifest(matchedRoutes)
attachRouterServerSsrUtils({ router, manifest })
```
This ensures only the assets needed for the current route are loaded.
## Error Handling
Handle errors during SSR:
```tsx theme={null}
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params }) => {
const post = await fetchPost(params.postId)
if (!post) {
throw notFound() // Built-in not found handler
}
return { post }
},
errorComponent: ({ error }) => {
return Error loading post: {error.message}
},
})
```
## Best Practices
Stream rendering (`defaultStreamHandler`) provides better perceived performance by sending content as it renders:
```tsx theme={null}
export default createStartHandler(defaultStreamHandler)
```
Keep loaders fast and focused. Use parallel loading when possible:
```tsx theme={null}
loader: async ({ params }) => {
const [user, posts] = await Promise.all([
fetchUser(params.userId),
fetchPosts(params.userId),
])
return { user, posts }
}
```
Use conditional logic for server-only code:
```tsx theme={null}
const data = typeof window === 'undefined'
? await fetchFromDatabase()
: await fetchFromAPI()
```
Use response headers to control caching:
```tsx theme={null}
setResponseHeader('Cache-Control', 'public, max-age=3600, stale-while-revalidate=86400')
```
## Related Concepts
Learn how to stream content progressively
Execute server-side logic from client components
Deploy your SSR application to production
Complete guide to SSR and streaming