Differences between CSR and SSR (with SPA, MPA, and SSG)

SPA(SinglePageApplication) : a web application made up of a single page

MPA(MultiPageApplication) : the traditional approach that fetches new HTML from the server and renders it again every time you move to another tab

Rendering approach

• SPA -> CSR
• MPA -> SSR

They're split by which side, the Client or the Server, prepares the rendering 👇👇

CSR(ClientSideRendering) : Client

• In CSR, after the HTML is returned on the client side, JS runs and exchanges only data, and the rendering happens on the client.

SSR(ServerSideRendering) : Server

• SSR is an approach where, when a user accesses a web page, a request goes to the server for each page, and the HTML, JS files, and so on are all downloaded from the server and rendered on the screen

SSG(StaticSiteGeneration)

• Everything is built in advance, so it suits pages that rarely change

In one line

• For initial loading speed, SSR is faster than CSR because it doesn't download as many files. But for server load, SSR needs frequent responses from the server, so it puts a burden on the server and the UX suffers, while CSR only makes a request to the server when there is a data request, so the server load is lower.