An encrypted cookie protects stored cookie data from unauthorized interpretation. In Remix, the encryption secret must remain on the server, making cookie reads and writes server-only. section 11.3.3
Use encrypted cookies when:
- A browser cookie contains private preferences such as a shipping address or saved login email. section 11.3.3
- Server-rendered output must use the same persisted setting as the client to preserve hydration. section 11.3.3
- The application can round-trip updates through the server instead of exposing the encryption key to browser JavaScript. section 11.3.3
Remix temperature preference
Define a server cookie with createCookie("temperature", { maxAge }), parse the incoming Cookie header with temperatureCookie.parse(cookieHeader), and persist changes with temperatureCookie.serialize(!isCelsius). A form action can return the serialized value through Set-Cookie. section 11.3.3
Figure 11.17 The API for setting and reading cookies is a little bit less obvious in Remix, using parse() to read and serialize() to set. The button to change scale is a submit button in a form. If JavaScript is enabled, Remix kicks in and hijacks the form, sending only data back and forth to the server. If not, the format change still works after the whole page reloads.
Compare Remix parse and serialize operations with form submission behavior when JavaScript is enabled or absent. section 11.3.3
