Rendering Models (SSR vs CSR)

Rendering models explained: SSR vs CSR, what runs where, and how to choose the right approach for each page.

Two ways to render UI

Rendering is how data becomes what the user sees. In web apps, the key question is: does the server send ready-to-display HTML, or does the browser build the UI from data?

SSR

Server returns HTML
Fast first paint

CSR

Browser renders from data
Very interactive

Both still use request → response.

The difference is what the response contains (HTML vs data).

Most real apps mix SSR and CSR.

How to think about SSR vs CSR

Always: request + response, and a server boundary where validation + permissions belong.

The difference is what the response contains (HTML vs data), and where UI updates happen (server vs browser).

Same loop

Request →
response

SSR response

HTML
ready

CSR response

Data
first

SSR vs CSR changes the response content, not the fundamentals.

Server boundary still exists (validation + permissions).

Choose per page: what makes the first view and interactions best?

Server-Side Rendering (SSR)

SSR means the server returns fully formed HTML for a page.

SSR = response is HTML.

Pros: fast first paint, good for SEO, simple initial load.

Cons: interactions often still require requests (navigation or APIs).

Client-Side Rendering (CSR)

CSR means the browser loads an HTML shell + JavaScript, then fetches data and renders UI dynamically.

CSR = browser renders UI from data (after loading JS).

Pros: highly interactive, fewer full page reloads.

Cons: more moving parts; needs a client framework + APIs.

Hybrid apps are common

IMPORTANT: No matter what you render, the server is where you protect data and enforce permissions.

SSR first view

Fast initial
HTML

CSR interactions

Filters, forms
dashboards

Server boundary

Auth + rules
data safety

Common pattern: SSR for initial pages, CSR for interactive parts.

Even in CSR apps, the server still handles auth, validation, and data.

Pick per page/feature — it’s not an all-or-nothing decision.

How to choose (quick intuition)

NOTE: Wappler supports both styles — the key is to keep the server as the safe boundary for data + permissions.

SSR

First view
matters

CSR

Interactions
matter

Hybrid

Best of
both

Use SSR when the first view matters (landing pages, SEO, fast initial load).

Use CSR when the page is an app (dashboards, filters, live updates).

Use both when you want a fast first load and rich interactions.

Conclusion

You now know the rendering vocabulary: SSR renders HTML on the server; CSR renders UI in the browser (often after fetching JSON). Next, we’ll switch to the UI layer: Bootstrap basics for building page structure and layout.

SSR

Server
HTML

CSR

Browser
UI

Bootstrap
layout

SSR returns HTML; CSR renders in the browser.

Most apps mix both styles per page.

Next: build UI structure with Bootstrap.

Continue

Continue to Bootstrap Basics.