<div dir="ltr">Today I listened to [Syntax 548][], titled "Rendering Methods Explained", which covered a question in the [State of JS][] survey that asks, "Which of the following architecture and rendering patterns have you used in the last year?"<br><br>The survey is ongoing but an [issue][] and a [localization file][] show the following options:<br><br>- Single Page Application (SPA): Apps that run entirely in the browser<br>- Multi-Page Application (MPA): Apps that run entirely on the server, with minimal client-side dynamic behavior<br>- Static Site Generation (SSG): Pre-rendered static content, with or without a client-side dynamic element<br>- Server-Side Rendering (SSR): Dynamically rendering HTML content on the server before rehydrating it on the client<br>- Partial Hydration: Only hydrating some of your components on the client (e.g. React Server Components)<br>- Progressive Hydration: Controlling the order of component hydration on the client<br>- Islands Architecture: Isolated islands of dynamic behavior with multiple entry points in an otherwise static site (Astro, Eleventy)<br>- Progressive Enhancement: Making sure an app is functional even without JavaScript<br>- Incremental Static Generation: Being able to dynamically augment or modify a static site even after the initial build (Next.js ISR, Gatsby DSG)<br>- Streaming SSR: Breaking down server-rendered content in smaller streamed chunks<br>- Resumability: Serializing framework state on the server so the client can resume execution with no duplicated code execution.<br>- Edge Rendering: Altering rendered HTML at the edge before sending it on to the client<br><br>Phew! Quite a list!<br><br>[Syntax 548]: <a href="https://syntax.fm/show/548/rendering-methods-explained" target="_blank">https://syntax.fm/show/548/rendering-methods-explained</a><br>[State of JS]: <a href="https://stateofjs.com/en-us/" target="_blank">https://stateofjs.com/en-us/</a><br>[issue]: <a href="https://github.com/Devographics/surveys/issues/56" target="_blank">https://github.com/Devographics/surveys/issues/56</a><br>[localization file]: <a href="https://github.com/Devographics/locale-en-US/blob/d496d90e67b5dd9e5062a24a51b8a154e8716b76/state_of_js.yml#L329-L378" target="_blank">https://github.com/Devographics/locale-en-US/blob/d496d90e67b5dd9e5062a24a51b8a154e8716b76/state_of_js.yml#L329-L378</a><br></div>