10 Rendering patterns for Web Apps

Web applications utilize diverse rendering patterns to display content and interact with users. Static websites are basic, pre-rendered HTML files, fast but lacking interactivity. Single-page applications (SPAs) offer high interactivity, updating the DOM without page reloads, but can be slow and SEO-challenging. Server-side rendering (SSR) dynamically generates HTML on the server for faster initial load times and improved SEO. Static site generation (SSG) pre-renders pages using templates, ideal for JAMStack sites. Incremental static regeneration (ISR) combines SSG and SSR by periodically updating pre-generated pages. Hydration transforms pre-rendered HTML into interactive SPAs, which can cause initial load delays. Partial hydration hydrates only interactive parts of a page for better efficiency. Islands render independent parts of an application separately for improved performance. Streaming SSR sends HTML to the client as it becomes available, enhancing perceived speed. Resumability, as pioneered by Qwik, eliminates hydration by serializing everything into HTML and lazy-loading JavaScript.