docs(start): add hostname-based multi-tenancy tutorial

[harshG775]

Summary

Adds a new React tutorial: "Hostname-Based Multi-Tenancy" for TanStack Start.

What This Covers

• Hostname-based tenant resolution during SSR
• Server-only tenant lookup using createServerOnlyFn
• Root-level loader hydration
• Dynamic metadata handling
• Production considerations

Why

Multi-tenancy is a common SaaS requirement. This tutorial provides
a clean SSR-first approach aligned with TanStack Start architecture.

Tested locally against latest Start version.

Summary by CodeRabbit

• Documentation
  • Added a new React tutorial on hostname-based multi-tenancy covering architecture, server-side tenant detection, root-level data hydration, dynamic metadata, component usage, production considerations (caching, validation, asset handling, security), and complete examples.
  • Placed the tutorial into the React Tutorials listing for improved discovery and navigation.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a new React tutorial and its config entry: a "Multi-Tenancy in TanStack Start: A Simple Guide" page covering hostname-based tenant resolution, SSR tenant detection, root-level data hydration, dynamic metadata, code examples, and production considerations.

Changes

Cohort / File(s)	Summary
Tutorial Configuration docs/start/config.json	Inserted a new tutorial entry "Multi-Tenancy in TanStack Start: A Simple Guide" into the React tutorials list, placed after the "Fetching Data from External API" item.
Tutorial Documentation docs/start/framework/react/tutorial/multi-tenant-setup.md	Added a new tutorial describing hostname normalization, server-side tenant resolution, root loader registration/hydration, dynamic metadata, component usage examples, production notes (caching, validation, asset URLs, security), full code samples, and a repo reference.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• docs: Tutorial Section #5465: Modifies the same Tutorials → React entries in docs/start/config.json; related insertion context.

Poem

🐰 I hop through hosts where tenants dwell,
Server whispers tell the tale so well,
Loaders wake and metadata gleam,
Code examples stitch the seam,
Hooray — a guide to help you dwell.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding a hostname-based multi-tenancy tutorial to the documentation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ca94a81

Command	Status	Duration	Result
nx run @benchmarks/bundle-size:build --outputSt...	✅ Succeeded	1m 31s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-03 16:16:05 UTC

[github-actions]

Bundle Size Benchmarks

• Commit: 4ea2a62787d0
• Measured at: 2026-03-07T06:58:34.233Z
• Baseline source: history:2217f7c3f19f
• Dashboard: bundle-size history

Scenario	Current (gzip)	Delta vs baseline	Raw	Brotli	Trend
react-router.minimal	86.84 KiB	+269 B (+0.30%)	273.33 KiB	75.44 KiB	▁▁▁▁▁██████
react-router.full	89.88 KiB	+281 B (+0.31%)	283.67 KiB	78.18 KiB	▁▁▁▁▁██████
solid-router.minimal	36.17 KiB	+299 B (+0.81%)	108.44 KiB	32.49 KiB	▁▁▁▁▁██████
solid-router.full	40.50 KiB	+293 B (+0.71%)	121.49 KiB	36.40 KiB	▁▁▁▁▁██████
vue-router.minimal	52.03 KiB	+287 B (+0.54%)	148.42 KiB	46.71 KiB	▁▁▁▁▁██████
vue-router.full	56.85 KiB	+306 B (+0.53%)	164.01 KiB	51.04 KiB	▁▁▁▁▁██████
react-start.minimal	99.40 KiB	+295 B (+0.29%)	312.48 KiB	85.98 KiB	▁▁▁▁▁██████
react-start.full	102.78 KiB	+288 B (+0.27%)	322.29 KiB	88.82 KiB	▁▁▁▁▁██████
solid-start.minimal	48.49 KiB	+307 B (+0.62%)	146.03 KiB	42.85 KiB	▁▁▁▁▁██████
solid-start.full	53.96 KiB	+290 B (+0.53%)	161.98 KiB	47.51 KiB	▁▁▁▁▁██████

Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better.

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/start/framework/react/tutorial/multi-tenant-setup.md`:
- Around line 98-104: The loader's catch block currently swallows all errors
from getTenantConfig; update the loader so it only converts 404/not-found errors
into { tenantConfig: null } and rethrows any other errors to avoid masking
outages—inside loader's try/catch, inspect the caught error (e.g., error.status
or error instanceof Response) and if it's a 404 return { tenantConfig: null },
otherwise throw the error; reference the loader function and the getTenantConfig
call when making the change.
- Around line 24-32: The fenced code block showing the request lifecycle
(containing "Request → Nitro Runtime → getRequestUrl() → normalizeHostname() →
getTenantConfigByHostname() → Root Loader → Hydrated Application") is missing a
language identifier; update the opening triple-backtick to include a language
token (for example change ``` to ```text) so the block is recognized as a
code/text fence by the linter.
- Around line 1-11: The YAML frontmatter contains an extra standalone '---'
divider in the middle (between description and the body) which breaks parsing;
open the frontmatter block that includes the title and description (the top YAML
block) and remove the stray '---' line so the frontmatter remains a single
contiguous YAML block (or move that divider to only appear once at the end of
the frontmatter), ensuring only the initial opening and final closing '---'
surround the title/description metadata.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2217f7c and 96a3e2b.

📒 Files selected for processing (2)

• docs/start/config.json
• docs/start/framework/react/tutorial/multi-tenant-setup.md

[schiller-manuel]

wouldnt recommend using root loader data for this. we should use router context instead. this will soon be much easier when we finalize the start context bridge concept. for now we'll keep this open

[harshG775]

Thanks for the suggestion!

I've updated the tutorial to resolve the tenant inside router.tsx and pass it through the router context instead of using root loader data.

This should align better with the recommended architecture.