Skip to content
Twilight React Playground
ثيم رائدaren

Request lifecycle

Beginner8 min

From a request at the edge to an interactive page: middleware, settings, loaders, SSR, hydration, the SDK.

Every storefront page, and every page of this playground, travels the same path from a request to an interactive page. Step through it below. The Advanced switch in the top bar changes the captions from plain words to the engine's own terms.

BrowserGET /ar/cartMiddlewaretwilightMiddleware()Root beforeLoadstore settings, i18nLocale wrapper{-$locale}Page loaderProduct.loader()Salla APIapi.salla.devRender HTMLTwilightProviderHTML + datastreamed responseHydrateReact takes overSalla SDK readytheme::ready

1. A request arrives at the edge

Someone opens a store page. The request reaches a small server that runs close to them and runs your theme.

In engine terms

The theme is a TanStack Start app rendered on the server. app/start.ts passes twilightMiddleware() (the reference theme adds earlyHintsMiddleware()) as requestMiddleware to createStart; request middleware runs before any route.

Why it matters

  • "window is not defined" means code ran during step 6, on the server. Move it into useEffect or an event handler.
  • A page that shows but never reacts to clicks stopped before step 8: check the browser console for a hydration error.
  • "Store Unavailable" comes from step 3: the engine could not load settings for the store the request named. See Which store, and its URLs.
  • A button that calls `window.Salla` too early does nothing until step 9. Listen for theme::ready or wait for a click.
Check yourself

useTwilight().isReady is true. Is the Salla SDK ready?

Go deeper: twilightMiddleware, createTwilightRootRoute, createRouter, TwilightProvider and route modules.