How it works
What happens between a customer typing an address and a rendered page.
Read this once to place every later page of the docs. The path is the same for every page.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
The request reaches your theme
The customer opens, say, /en/cart. The server hands the request to your theme. The middleware registered in app/start.ts reads the cookies and the host and works out which store this is and whether the customer is logged in. Everything after that can ask "which store?" without guessing.
The engine picks a route
A route is a URL pattern with a page attached. The engine ships routes for the whole store, and /en/cart matches the cart route. The language is the first part of the URL (en, ar) and sets the text and the page direction. If your app/routes.ts names the same path, your page wins. See Routes and pages and the Routes tab.
The loader fetches data
Each route has a loader, a function that fetches what the page needs before it renders: the cart, the product, the home blocks. It runs on the server, so the first HTML is already complete. See Loading data and the API client.
Your overrides are applied
While rendering, the engine looks up your registered replacements first: your layout, your home blocks, your components in hook slots. Anything you did not replace uses the engine's version. See Hooks and slots.
HTML is sent, then the browser takes over
The server sends finished HTML wrapped by your __root.tsx. The browser loads the JavaScript and hydrates the page: React attaches to the existing HTML so buttons and the cart work. Your app/client.tsx starts this; on the home and product pages it first lets the main image paint (see Performance). After that, links navigate in the browser without full reloads and run the loader of the next page.
What this means for you
- Put data in loaders, not inside components.
- Anything you do not override keeps working, and improves with the engine.
- Server and browser run the same components, so do not read
windowwhile rendering.
Next
You now have the whole picture. Start building with Routes and pages and Layout and components, or pick a task from the Recipes. For lookups, use Engine, Routes and APIs.