# Overview (https://session-kit.pages.dev/docs/server-rendering)

If your app renders pages on the server, with TanStack Start, Next.js, or
React Router's framework mode, Session kit keeps the session on the server.
This page explains how the pieces fit, then sends you to your framework's
guide.

Both tokens and the user sit in one encrypted, `httpOnly` cookie that page
scripts can't read, so they never see the refresh token. The server refreshes
before rendering, so pages never show a "Checking session…" state.

## The pieces

- **On the server**, `createServerAuth` from `@monarcode/session-kit/server`
  seals the cookie with your secret. Each framework's adapter gives one
  request's session over it, and middleware that refreshes before
  rendering.
- **In the browser**, `createMirrorAuth` makes a client that starts from the
  session the server rendered. `AuthProvider`, the hooks, and the TanStack
  Router guards work with it, and sign-ins and sign-outs reach every tab.
- **Your server code** signs in with your backend and calls your API with
  the access token, through one request's session. It's shaped like a
  client, so code written for one, such as `createAuthFetch` or Effect's
  `Auth`, takes it. To call your API from the browser too, opt in with
  `clientCredentials`. Page scripts then get the access token in memory,
  never the refresh token.

The engine is the same `createServerAuth` call in every framework.
[Create the server engine](https://session-kit.pages.dev/docs/setups/tanstack-start#1-create-the-server-engine)
on the TanStack Start page shows one. The browser's client mirrors what the
server rendered. It signs out and gets the access token through a session
route, which each adapter's `sessionRoute` makes. It reads the session there
too, except in TanStack Start, where a server function reads it, as the
server render needs. It signs in through your own server code, as in
[Create the browser client](https://session-kit.pages.dev/docs/setups/tanstack-start#4-create-the-browser-client).

## Frameworks

What differs between frameworks is how server code gets a request's
session, and how the session reaches the browser:

| Framework                             | On the server                                                                 | In the browser                                      | Setup                                                               |
| ------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------- |
| TanStack Start                        | `startAuth(serverAuth)`, with `refreshSession` in request middleware          | `connectSession`, `loadSession`                     | [TanStack Start](https://session-kit.pages.dev/docs/setups/tanstack-start)                       |
| Next.js 16, App Router                | `nextSession(serverAuth, { cookies, redirect })`, with its `refresh` in Proxy | `useMirrorAuth` from `@monarcode/session-kit/react` | [Next.js](https://session-kit.pages.dev/docs/setups/next)                                        |
| React Router framework mode, with SSR | `routerAuth(serverAuth)`, with `sessionMiddleware` in the root route          | `useMirrorAuth` from `@monarcode/session-kit/react` | [React Router with server rendering](https://session-kit.pages.dev/docs/setups/react-router-ssr) |

Locking isn't available with server rendering. For another server, such as
the Next.js Pages Router, see
[Servers without an adapter](https://session-kit.pages.dev/docs/server-rendering/server-sessions#servers-without-an-adapter).

## Next steps

- Follow the guide for your framework in the table, from installation to
  calling your API.
- [Server sessions](https://session-kit.pages.dev/docs/server-rendering/server-sessions): the secret,
  cookie jars, refreshes across server instances, sign-out, and limits.
- [Hybrid setup](https://session-kit.pages.dev/docs/server-rendering/hybrid): sign in with your backend
  from the browser and call your API there, with the session still on the
  server.