You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The home of the TanStack ecosystem. Built with [TanStack Router](https://tanstack.com/router) and deployed automagically with [Netlify](https://netlify.com/).
### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
10
+
11
+
</div>
10
12
11
13
## Development
12
14
15
+
### Quick Start
16
+
13
17
From your terminal:
14
18
15
19
```sh
@@ -19,76 +23,66 @@ pnpm dev
19
23
20
24
This starts your app in development mode, rebuilding assets on file changes.
21
25
22
-
##Authentication in Development
26
+
### Local Setup
23
27
24
-
The dev server uses the production database and real OAuth, so dev and production behave identically. To authenticate your local session, run:
28
+
The documentation for all TanStack projects (except `React Charts`) is hosted on [tanstack.com](https://tanstack.com). In production, doc pages are fetched from GitHub. In development, they're read from your local file system.
25
29
26
-
```sh
27
-
pnpm auth:login
28
-
```
30
+
Pre-commit hooks run smoke tests against these docs, so you'll need sibling repos cloned for commits to pass.
29
31
30
-
This opens `tanstack.com` in your browser. Sign in with GitHub or Google, and the resulting session token is saved to `.env.local` as `DEV_SESSION_TOKEN`. Restart the dev server and you will be signed in automatically.
31
-
32
-
To authenticate against a locally running server instead:
32
+
Create a `tanstack` parent directory and clone this repo alongside the projects:
> The token is a real signed session cookie tied to your production account. It expires in 30 days. Re-run `pnpm auth:login` to refresh it.
40
-
41
-
> [!NOTE]
42
-
> If you are using an AI agent (Claude, Cursor, etc.) to help develop, run `pnpm auth:login` once before starting your session so the agent can interact with authenticated features on your behalf.
43
-
44
-
## Editing and previewing the docs of TanStack projects locally
45
-
46
-
The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
47
-
In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
48
-
49
-
Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
50
-
51
-
1. Create a new directory called `tanstack`.
42
+
Your directory structure should look like this:
52
43
53
-
```sh
54
-
mkdir tanstack
44
+
```
45
+
tanstack/
46
+
├── tanstack.com/
47
+
├── query/
48
+
├── router/
49
+
└── table/
55
50
```
56
51
57
-
2. Enter the directory and clone this repo and the repo of the project there.
52
+
> [!WARNING]
53
+
> Directory names must match repo names exactly (e.g., `query` not `tanstack-query`). The app finds docs by looking for sibling directories by name.
To edit docs for a project, make changes in its `docs/` folder (e.g., `../form/docs/`) and visit http://localhost:3000/form/latest/docs/overview to preview.
64
58
65
59
> [!NOTE]
66
-
> Your `tanstack` directory should look like this:
67
-
>
68
-
> ```
69
-
> tanstack/
70
-
> |
71
-
> +-- form/
72
-
> |
73
-
> +-- tanstack.com/
74
-
> ```
60
+
> Updated pages need to be manually reloaded in the browser.
75
61
76
62
> [!WARNING]
77
-
> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
63
+
> Update the project's `docs/config.json` if you add a new doc page!
78
64
79
-
3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
65
+
## Get Involved
80
66
81
-
```sh
82
-
cd tanstack.com
83
-
pnpm i
84
-
# The app will run on https://localhost:3000 by default
85
-
pnpm dev
86
-
```
67
+
- We welcome issues and pull requests!
68
+
- Participate in [GitHub Discussions](https://github.com/TanStack/tanstack.com/discussions)
69
+
- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
87
70
88
-
4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
71
+
## Explore the TanStack Ecosystem
89
72
90
-
> [!NOTE]
91
-
> The updated pages need to be manually reloaded in the browser.
73
+
- <ahref="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
74
+
- <ahref="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
# Lighthouse: @tanstack/dom-vite shim vs. real React
2
+
3
+
**Date:** 2026-04-20
4
+
**tanstack.com commit at time of measurement:**`fb806bb` (shim build with `@tanstack/dom-vite@0.1.0-alpha.5`, pulling `@tanstack/react-dom@0.1.0-alpha.4` — includes the RSC deferred-hydration adoption fix landed the same day).
5
+
**React baseline build:** same source tree with `tanstackDom()` plugin removed from `vite.config.ts` and `serverVariantAliases` dropped — i.e. stock `react@19.2.3` / `react-dom@19.2.3`.
6
+
7
+
## TL;DR
8
+
9
+
-**Performance score: parity** (±2 across pages / form factors, within run-to-run noise).
10
+
-**FCP: consistent shim win** everywhere — ~4% on home, ~11–17% on docs / blog. Smaller main-thread parse cost lets first paint land sooner.
11
+
-**LCP: shim regresses on RSC-heavy pages, desktop** — the LCP element on docs / blog pages lives in the Flight-streamed subtree, and the shim's `use(pendingPromise)` + deferred-resume adds latency vs. React's battle-tested RSC client. Mobile is mostly parity (network-bound anyway).
12
+
-**TBT / CLS: effectively zero on both** after the same-day RSC hydration fix — no duplicate DOM, no layout shift from appending.
13
+
-**Bundle (raw JS): −4.7%** on tanstack.com (-980 KB of 21 MB total client JS). Modest because router / store / app code dominates; shim only replaces React's share.
14
+
15
+
## Methodology
16
+
17
+
1.`pnpm build` for each variant.
18
+
2.`PORT=4000 pnpm start:prod` to serve from `dist/server/server.js` on `http://localhost:4000`.
19
+
3.**5 trials × 3 URLs × 2 form factors = 30 Lighthouse runs per variant** using `npx lighthouse` v13 with `--only-categories=performance` and headless Chrome.
20
+
4. Mobile runs use Lighthouse's default emulation (slow 4G + 4× CPU slowdown). Desktop uses `--preset=desktop` (no throttling).
| Shim | 20,072 KB | No dedicated react chunk; shim code inlines into `app-shell` (+16 KB there). Net **−980 KB (−4.7%)**|
53
+
54
+
## Caveats
55
+
56
+
-**Lab data only.** Chrome origin-level CWV (CrUX) needs ~28 days of real traffic before aggregates stabilize. Since the shim only went live on `2026-04-20`, field data won't be comparable for a month.
57
+
-**`pnpm start:prod` serves from Node locally — no CDN.** Absolute TTFB numbers are dev-machine noise (5ms–1s range depending on cold-cache loader work); anchor on client-side metrics.
58
+
-**Per-page LCP percentages can look dramatic when the absolute value is small.** Blog desktop LCP `0.90s → 1.29s` is +390 ms — real, but a sub-second LCP regression in both states is still a Core Web Vitals "Good" rating (<2.5s).
59
+
-**Single-node prod server — no edge, no warm cache.** Mobile Lighthouse runs with 4× CPU throttling are inherently high-variance.
60
+
61
+
## Reproduce
62
+
63
+
```bash
64
+
# React baseline
65
+
# 1) temporarily remove tanstackDom() plugin + serverVariantAliases in vite.config.ts
66
+
pnpm build
67
+
PORT=4000 pnpm start:prod &
68
+
# run 5 trials × 3 URLs × 2 form factors, save JSON to ./react/
0 commit comments