# How it works (https://docs.salla.dev/twilight/react/start/how-it-works)



Read this once to place every later page of the docs. The path is the same for every page.

<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

### The request reaches your theme [#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 [#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](https://docs.salla.dev/twilight/react/guide/routes-and-pages) and the [Routes](https://docs.salla.dev/twilight/react/routes) tab.

### The loader fetches data [#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](https://docs.salla.dev/twilight/react/guide/loading-data) and the [API client](https://docs.salla.dev/twilight/react/api).

### Your overrides are applied [#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](https://docs.salla.dev/twilight/react/guide/hooks-and-slots).

### HTML is sent, then the browser takes over [#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](https://docs.salla.dev/twilight/react/guide/performance#paint-the-first-screen-first)). After that, links navigate in the browser without full reloads and run the loader of the next page.

## What this means for you [#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 `window` while rendering.

## Next [#next]

You now have the whole picture. Start building with [Routes and pages](https://docs.salla.dev/twilight/react/guide/routes-and-pages) and [Layout and components](https://docs.salla.dev/twilight/react/guide/layout-and-components), or pick a task from the [Recipes](https://docs.salla.dev/twilight/react/recipes). For lookups, use [Engine](https://docs.salla.dev/twilight/react/engine), [Routes](https://docs.salla.dev/twilight/react/routes) and [APIs](https://docs.salla.dev/twilight/react/api).