liveBook · Manning

Server-only cookie

As explained in React in Depth

A server-only cookie is a web cookie that can be read and set only by server-side application code.

A server-only cookie is readable and writable only by server-side application code. Remix encrypts these cookies because exposing the secret key in browser JavaScript would defeat the protection. section 11.3.3

Use server-only cookies when:

  • Cookie data may contain private preferences or login-related information that page scripts and third-party trackers should not read. section 11.3.3
  • The application can round-trip changes through the server, preserving functionality without requiring JavaScript. section 11.3.3
  • The framework's encrypted-cookie behavior is preferable to bypassing it through direct HTTP-header access. section 11.3.3

Remix preference cookie

A Remix route reads the Cookie request header, parses temperature and time cookies, and returns defaults. A submitted form toggles a value, serializes it, and sends it through Set-Cookie; JavaScript may accelerate the exchange, but a full reload also works. 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.
figure

Shows the server-only cookie flow, including parse(), serialize(), form submission, enhanced requests, and the no-JavaScript fallback. section 11.3.3

How React in Depth covers it

How deep it goes
Explains encryption, request round trips, parsing, serialization, and form handling, but does not detail cryptographic internals.
Examples
Uses temperature and time preferences, Remix cookie definitions, route loaders, actions, parse(), serialize(), and Set-Cookie responses.
What you can do after
Operate/configure Remix cookies through request parsing, form actions, serialization, and server response headers.
How it connects
Connects cookies with encryption, HTTP headers, forms, server-side rendering, hydration, and JavaScript independence.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React in Depth. The section links point to the parts of the book it draws on.