What is Crumple Zone Architecture?
CRZ is an architectural approach for web applications that prioritizes reliability by layering features according to their failure characteristics. HTML and browser APIs form the foundation (Layer 1), CSS provides visual enhancements (Layer 2), and JavaScript islands add interactivity only when strictly necessary (Layers 3-4).
The name comes from automobile crumple zones — sacrificial structures that absorb impact to protect what matters most.
Why avoid global state libraries?
Global state libraries (Redux, Zustand, Pinia) create a single point of failure in the JavaScript layer. If the JS runtime breaks, all state is lost. CRZ distributes state across canonical sources: URLs for view state, cookies for auth, sessionStorage for drafts, and server-side DB for persistent data.
Each canonical source has a different failure mode, so a single failure cannot cascade to destroy all state.
When should I use an island?
Only when the component requires local state that cannot be expressed
through HTML, CSS, URL params, or a <script> tag. Common
valid cases: forms with dynamic validation, real-time calculations, and
browser-native APIs like Geolocation.
Before creating an island, list every useState call. If each
value can be a server prop, URL param, HTML attribute, CSS rule, or DOM
call — the island is unnecessary.
How does the PRG pattern work?
Post-Redirect-Get: the form submits via POST, the server processes it, stores the result in a session, and responds with a 302 redirect. The browser follows the redirect to a GET request. This means reloading the page will not trigger a "resubmit form?" warning.
This is a Layer 1 pattern — no JavaScript required. The browser's native form submission and HTTP redirect handle everything.