A cookie persists small, browser-local settings while remaining available to both server and client. Because browsers send cookies with requests, server rendering can use the same preference that the client will use after hydration. section 11.3.3
Use cookies when a small value must survive visits and influence server-rendered output:
- Store display preferences such as Celsius/Fahrenheit and 12-hour/24-hour time. section 11.3.3
- Store a user's local city so the front page can find local weather. section 11.3.3
- Prefer cookies over localStorage when the server must know the value before rendering; accept the smaller capacity because every request carries the data. section 11.3.3
Preventing a hydration mismatch
A weather route reads the temperature preference on the server, passes it into a format provider, and renders the same initial scale on the client. In Next.js, cookies-next reads values with getCookie, receiving request context on the server; Remix reads the Cookie header with parse() and writes changes with serialize().
