Web Concepts Guide
Accurately organized web development concepts and terminology, based on MDN and W3C specifications. Includes security considerations for each concept.
Component & UI
Web Components
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your w
React vs Web Components
Compare React and Web Components across component models, style scoping, state management, and lifecycle. Understand strengths and trade-offs with side-by-side code examples.
Rendering
MPA (Multi-Page Application)
A Multi-Page Application (MPA) is the traditional web architecture where the server returns a complete HTML document for each URL. Most of the web (Wikipedia, Amazon, GitHub, news sites) still uses MPA. Modern MPA is being re-evaluated via the View Transitions API, Hotwire, Astro, and HTMX.
SPA (Single Page Application)
An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as Fetch when dif
SSR (Server-Side Rendering)
Server-side rendering (SSR) refers to the practice of generating HTML content on the server and sending it to the client.
SSG (Static Site Generator)
A static site generator (SSG) pre-builds every HTML page at build time and serves it as static files. No server-side processing per request is needed, enabling fast delivery from a CDN.
Hydration (ハイドレーション)
Hydration is the process where client-side JavaScript retrofits interactive behavior onto statically-generated HTML from the server or build. Every SSR / SSG setup goes through this step — React's hydrateRoot, Vue's createSSRApp, Astro's Islands, and so on.
ISR (Incremental Static Regeneration)
ISR is a rendering strategy combining SSG with background regeneration after expiration. The term was coined by Next.js 9.5 (2020). Similar features now exist across frameworks — Nuxt (Nitro) swr, SvelteKit isr, and so on.
SPA / SSR / SSG の違い
Compare the three rendering strategies: SPA, SSR, and SSG. Understand when HTML is produced and how performance, SEO, and infrastructure requirements change.