Client Hints

LaunchFast uses @epic-web/client-hints to detect client preferences (like color scheme) on the server, eliminating content layout shift on first load.

The problem

When a server renders a page, it does not know the user's preferred color scheme, timezone, or other client preferences. Without client hints, the server renders with a default theme and then the client switches — causing a visible flash and layout shift.

How it works

Client hints use cookies to communicate client preferences to the server. On the first visit, a small script detects the user's preferences and sets cookies. On subsequent requests, the server reads the cookies and renders with the correct preferences from the start.

Integration

The integration lives in app/utils/client-hints.tsx. It is already wired into the root loader and layout, so theme preferences work out of the box.

Extending

You can add additional client hints (timezone, reduced motion, etc.) by extending the configuration in app/utils/client-hints.tsx. See the @epic-web/client-hints documentation for available hints and configuration options.