# Home (https://docs.salla.dev/twilight/react/routes/home)



<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 customer sees a stack of **blocks** (sliders, product rows, banners) in the order the merchant set in the Salla dashboard. Customise this route when you want to wrap the blocks in your own layout or change the page title. To change what a block looks like, [add a home block](https://docs.salla.dev/twilight/react/recipes/add-a-home-block) instead.

## URL [#url]

| Pattern        | Example      |
| -------------- | ------------ |
| `/{-$locale}/` | `/` · `/ar/` |

`{-$locale}` is an optional language prefix. There are no other params and no search params.

### Locale prefix [#locale-prefix]

This applies to every storefront page. On a multilingual store, a URL without a prefix redirects to the fallback locale (`/cart` becomes `/ar/cart`). On a single-language store, the prefix is removed. An unknown prefix redirects to `/ar/<path>`. Other pages link here instead of repeating this.

### Try it [#try-it]

This is the home page as the engine renders it, running against the demo store. Switch the language or the width.

<RoutePreview path="/" pattern="/{-$locale}/" />

## Route file [#route-file]

The engine writes this file for you:

```tsx title="app/routes/index.tsx"
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Home } from '@salla.sa/twilight-theme-engine/routes/home';
import type { HomeLoaderData } from '@salla.sa/twilight-theme-engine/routes/home';
import { HomeSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/')({
  loader: ({ params }): Promise<HomeLoaderData> => Home.loader({ locale: params.locale }),
  head: withHead(Home),
  pendingComponent: () => <HomeSkeleton />,
  component: HomeComponent,
});

function HomeComponent() {
  const data: HomeLoaderData = Route.useLoaderData();
  return <Home.Component {...data} />;
}
```

Delete the `// @auto-generated` line and the file is yours. Keep `Home.loader` and change only what you need. See [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).

### A customised version [#a-customised-version]

This keeps the engine loader, sets your own page description and wraps the blocks in your own element.

```tsx title="app/routes/index.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { Home } from '@salla.sa/twilight-theme-engine/routes/home';
import type { HomeLoaderData } from '@salla.sa/twilight-theme-engine/routes/home';
import { HomeSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/')({
  loader: ({ params }): Promise<HomeLoaderData> => Home.loader({ locale: params.locale }),
  head: withHead(Home, (result) => ({
    ...result,
    description: 'Free delivery on orders over 200 SAR',
  })),
  pendingComponent: () => <HomeSkeleton />,
  component: HomeComponent,
});

function HomeComponent() {
  const data: HomeLoaderData = Route.useLoaderData();
  return (
    <main className="my-home">
      <Home.Component {...data} />
    </main>
  );
}
```

## What it loads [#what-it-loads]

`HomeLoaderData`:

| Field        | Type                  | Description                                   |
| ------------ | --------------------- | --------------------------------------------- |
| `locale`     | `string`              | The URL locale, or `'ar'` when there is none. |
| `components` | `HomeComponentData[]` | The merchant's blocks, in order.              |
| `page`       | `{ slug: string }`    | Page identifier.                              |

The first request loads this on the server. Each block is drawn by the component you registered for it, see [Add a home block](https://docs.salla.dev/twilight/react/recipes/add-a-home-block).

The page has three [hook slots](https://docs.salla.dev/twilight/react/guide/hooks-and-slots): `home:start` and `home:content` above the blocks, and `home:end` below them. After `home:end` the engine draws the "order again" row (`ReorderProducts`) for a signed-in customer when the store has Reorder on; see [Add a home block](https://docs.salla.dev/twilight/react/recipes/add-a-home-block#the-order-again-row).

## Head and SEO [#head-and-seo]

`Home.head` reads the store settings. Like every page, the store title is added to the end of the page title (`Page - Store`) for you.

It sets:

* Title and description come from the store's meta title and description, falling back to the store name and description. Keywords come from the meta keywords.
* The canonical URL is the store root, also on `/ar/`.
* Open Graph and Twitter cards use the store logo.
* Hreflang links point to each store language.

Without store settings it returns nothing. See [SEO and head](https://docs.salla.dev/twilight/react/guide/seo-and-head).

## Edge cases [#edge-cases]

* **No blocks.** As on Twig, the page lists the store's latest products under the hook slots, see [Add a home block](https://docs.salla.dev/twilight/react/recipes/add-a-home-block#a-home-page-with-no-blocks).
* **While loading.** `HomeSkeleton` is shown.
* **Missing settings in head.** The head is skipped instead of breaking the page.

## See also [#see-also]

* [Add a home block](https://docs.salla.dev/twilight/react/recipes/add-a-home-block)
* [Fork a built-in route](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route)
* [SEO and head](https://docs.salla.dev/twilight/react/guide/seo-and-head)
* [Routes overview](https://docs.salla.dev/twilight/react/routes)