Web Application Architectures
Understanding how web applications are structured and how they deliver content to users is crucial for choosing the right tools for a project.
Core Rendering Models
Section titled “Core Rendering Models”Rendering is the process of turning code (HTML, CSS, JS, and Data) into a visible user interface.
CSR: Client-Side Rendering
Section titled “CSR: Client-Side Rendering”The browser downloads a minimal HTML file and a large JavaScript bundle. The JavaScript then executes in the browser to fetch data and “render” the entire application.
- How it works: Client receives
index.html(nearly empty) -> Browser downloads JS -> JS runs and builds the UI. - Pros: Swift transitions once loaded; feels like a “desktop app”; offloads server work.
- Cons: Slower initial load (White screen of death); SEO challenges; high client-side heavy lifting.
- Example Sites: Gmail, Google Maps, Dashboard applications.
SSR: Server-Side Rendering
Section titled “SSR: Server-Side Rendering”The server generates the full HTML for a page on every request and sends it to the browser.
- How it works: Client requests a page -> Server fetches data -> Server generates HTML -> Client receives ready-to-display page.
- Pros: Excellent SEO; fast “First Contentful Paint” (FCP); good for slow devices.
- Cons: Slower transitions (page reloads); heavy server load.
- Example Sites: Wikipedia, Traditional News Sites, Public E-commerce listings.
SSG: Static Site Generation
Section titled “SSG: Static Site Generation”All pages are generated at build time. The server simply serves pre-built static files.
- How it works: Developer runs a build command -> All routes are turned into HTML files -> Files are deployed to a CDN.
- Pros: Blazing fast performance; extremely secure; low hosting costs.
- Cons: Content doesn’t change until the next build; slow builds for thousands of pages.
- Example Sites: Documentation sites, Blogs, Marketing landing pages.
ISR: Incremental Static Regeneration
Section titled “ISR: Incremental Static Regeneration”A hybrid of SSG and SSR. It allows you to update static content without rebuilding the entire site.
- How it works: A page is served as static first -> After a “revalidation” period, the server re-renders it in the background -> The next visitor gets the new version.
- Pros: Best of both worlds (SSG speed + SSR freshness).
- Cons: Complexity in implementation; potential for stale data between updates.
- Example Sites: Large scale Blogs, Product catalogs with frequent price updates.
Application Structures
Section titled “Application Structures”SPA: Single Page Application
Section titled “SPA: Single Page Application”An application that loads a single HTML page and dynamically updates that page as the user interacts with it. Usually powered by CSR.
- Navigating: Does not trigger a full page reload.
- Feel: Very fluid and “app-like”.
- Examples: X (formerly Twitter), Spotify Web, Slack.
MPA: Multi Page Application
Section titled “MPA: Multi Page Application”A traditional web application consisting of many separate HTML files. Navigating between pages triggers a full browser reload. Usually powered by SSR or SSG.
- Navigating: Browser requests a new HTML document from the server.
- Feel: “Web-like”, distinct document transitions.
- Examples: Amazon, eBay, Reddit.
Comparison Summary
Section titled “Comparison Summary”| Feature | CSR (SPA) | SSR (MPA) | SSG |
|---|---|---|---|
| Initial Load | Slower (JS heavy) | Fast | Instant |
| UX Transitions | Instant | Slower (Reload) | Slower (Reload) |
| SEO | Harder | Excellent | Best |
| Server Cost | Low | High | Very Low |
| Data Freshness | High | High | Fixed at Build |