🤓 What is this article about?
Have you often heard words like "SPA", "SSR", "PWA", but they all sound like spells from Hogwarts? Then this article is for you. We will analyze what web applications are, how they differ, which of them are fast, which are fashionable, and which just work. With memes, tables and examples!
/
🧱 Basic technologies: the foundation of any web
All web applications are created using:
HTML — building the page skeleton
CSS — we do it beautifully
JavaScript - we enliven and interact
But how exactly the application is arranged — it can be very different. And this is where the magic of choosing an approach begins.
🌐 Main types of web applications
Type | Description | When to use |
|---|---|---|
Multi-page (MPA) | Each page is a separate HTML document | Sites with a large number of pages and SEO-dependence |
Single-page (SPA) | The entire application works within a single page | Interfaces, applications with high interactivity |
Server-side rendering (SSR) | HTML generation occurs on the server | SEO + fast first render |
Static Generation (SSG) | Ready-made pages are generated in advance | Blogs, documentation |
PWA | Web application as if it were native | When you need offline mode and installation on the device |
🏘️ Multi-page applications (MPA)
Simple case: a set of ready-made pages
It's like a folder with files on a computer: you open about.html and see the company info.
Advantages:
simplicity
ease of caching
Cons:
when switching between pages, everything is reloaded 🐢
When it is suitable: landing pages, business cards, simple websites.
More difficult: the server generates pages
You go to the site - the server is like this:
"Wait a minute, let me put together a page for you on the fly."
For example, as on forums or in online stores:
The server is requesting data
Collects HTML
Gives it to the user
Advantages:
always up-to-date data
less JavaScript means faster for weak devices
Cons:
server load
not instant transitions
📌 Fun fact:
When the user clicks the link, the browser is like: "Reloading!", even if you just wanted to open the next profile page 🙃
🪄 Single-page applications (SPA)
All the magic is in JavaScript. You go to the site, and no more reloading.
Advantages:
instant transitions
native app experience
Cons:
everything depends on JavaScript
may be a long first display
🔧 Examples: Trello, Google Docs, Twitter (partially)
🔄 Rendering on the client (CSR)
The browser loads a bunch of JS, and only then — "Oops, I'm a site!"
Cons: if the Internet is slow, then while JavaScript is loading, the user looks at a white screen. 🕳️
🧠 Server-side rendering (SSR)
First, the server returns the finished page, and then JavaScript is connected.
Ideally:
SEO
Quick first page view
📦 Used by: Next.js, Nuxt, SvelteKit
🛠️ Static Generation (SSG)
Imagine a blog site. Articles are written in Markdown, generated in HTML in advance and simply stored on the server.
Tools: Astro, Eleventy, Hugo, Gatsby
Advantages:
super-fast loading
just host (you can even use GitHub Pages)
Cons:
data is updated only when the site is rebuilt
📝 Suitable for documentation, portfolios, landing pages.
🚀 PWA — Progressive Web Apps
PWA is like your website pretending to be a mobile app:
works offline
push notifications
installed on the phone
✨ Google and Twitter are actively promoting the idea of PWA.
📱 When you need to create an app without an app store, but with a native UX.
🧠 Conclusion
Here is a brief guide:
Type | When to use |
MPA (static) | Simple sites with a minimum of interactive |
MPA (dynamic) | Sites with frequently changing data |
SPA | Complex interfaces with a lot of logic |
SSR | Need SEO and fast page display |
SSG | Blogs, documentation, landing pages |
PWA | Want offline + push + icon on phone |
💬 Let's summarize with a meme:
Developer: "I made a SPA with SSR, SSG and PWA." Client: "Can I print this?"