🔧 Client Side Rendering (CSR) vs Server Side Rendering (SSR): Simplified Story

🕛 Zeit seit Veröffentlichung: 34 Tage, 6 Stunden 41 Minuten
📆 Veröffentlicht am: 08.09.2024 um 00:25 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Client Side Rendering:

We have to bundle all our components & send them to the client for rendering.
(Large bundles)

This means as our app grows, so does our bundles. Larger the bundle, more memory we need on client to load all these components.
(Resource heavy)

Search-engine bots can't view our content, coz they can't execute JS code so they can't render our components like web browsers do.
(No SEO)

Any sensitive data in our components or their dependencies like API keys will be exposed to the client.
(Less Secure)

Server Side Rendering:

Only send essential components to the client & prevent our bundle from becoming large unnecessarily.
(Small bundles)

Because server handles most of the rendering, we need less resources on the client.
(Resource efficient)

As rendering is done on the server & we send actual content to the client, not the JS files to execute. Search engine bots can view the content, understand & index the pages.
(SEO)

We can keep sensitive data like API keys on the server.
(More Secure)

Wrap-up

Initial Page Load:

CSR: Slower
SSR: Faster

Subsequent Page Loads:

CSR: Faster
SSR: Slower

SEO:

CSR: May be challenging
SSR: Better

User Experience:

CSR: More interactive
SSR: Less interactive (initially)

Server Load:

CSR: Lower
SSR: Higher

JavaScript Requirement:

CSR: Required
SSR: Not required

...