SSR vs CSR vs Static Render

Skip to main content

Hashnode Amit Chambial Blog.

Amit Chambial Blog.

About me

Command Palette

Search for a command to run...

SSR vs CSR vs Static Render

PublishedJune 9, 2020

•0 min read•View as Markdown

SSR vs CSR vs Static Render

I am a full stack developer. Currently doing some project on nextjs / nodejs

Working as SDE 3 in Netomi Here’s my Resume: https://resume.devaman.dev

On this page

First off all there are two type of data in website :Ssr: server side rendering Csr: Client side rendering Hybrid Rendering:Static Websites

Comments (3)

Join the discussion

Anurag Thakur5y ago

NIce blog Amit Chambial

Deactivated User6y ago

JUST NEEDED THIS

Amit Chambial6y ago

I am working on something new now. 👇

More from this blog

Migrating From Vue 2 to Vue 3: A Practical Checklist With Examples

Recently i worked on Vue 3 migration. Migrating a Vue 2 application to Vue 3 is not just a dependency upgrade. The real work is in updating the application bootstrap, router, store, plugins, component

Jun 11, 2026·10 min read·34

Migrating From Vue 2 to Vue 3: A Practical Checklist With Examples

Daily Learnings

19/May/2023 While using mini-css-extract-plugin with vuejs and webpack 5, I was getting problem related to CSS priority. Scoped Css/Scss was not getting higher priority than common css. To resolve this issue we had to use oneof rule. In resourceQuery...

May 19, 2023·1 min read·53

Daily Learnings

Migrating your project to AWS IOT device sdk v2

Hello everyone! I recently had the opportunity to work with AWS IoT to fetch real-time data. During the migration from Webpack 4 to Webpack 5, we encountered some issues with the aws-iot-device-sdk. While building our project, we encountered errors r...

May 19, 2023·3 min read·374

Migrating your project to AWS IOT device sdk v2

Reactjs in Vuejs using Module Federation (inc Routing)

Hey everyone , Webpack has released some new cool feature called module federation. Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consumi...

Oct 30, 2021·4 min read·770

Reactjs in Vuejs using Module Federation (inc Routing)

How To Submit A Pull Request On Github ?

In this post I will tell you about on how to submit a pull request to the organization on which you are thinking to contribute. Now lets gets started with the steps... 1) Step 1 : Fork the repo. 2) Step 2 : Clone the repository.Open the terminal and ...

May 7, 2021·2 min read·221

How To Submit A Pull Request On Github ?

A

Amit Chambial Blog.

14 posts

Full Stack Developer and a maker. See my portfolio at https://portfolio.devaman.dev

Hey everyone,

I recently saw a post asking for some help on this topic. So i am writing on this topic.Lets start.

First off all there are two type of data in website :

Static data ( for everyone it is same eg site name )
Dynamic data ( for everyone it is different eg username ). Dynamic data is sent by server means we need a server here which will call database, fetch data from it and sends it to browser.There are two methods to send this data to browser or client !

Ssr: server side rendering

The server creates a HTML page with data in it and sends in as a response to browser.

eg Hashnode, Github, etc (Most of the big companies uses this)

Advantages : SEO Friendly, Easy.

Csr: Client side rendering

Here client is our browser. When we first open a site , the whole site HTML code is fetched to the browser but there is no data in it( means missing dynamic data like user details etc). After the code is fetched , we load the data by calling the server api which in return send the data as json object.

eg GetMakerLog

Advantages : Behaves like an app.(Single page application, Fast (First time load is slow as it downloads all the html css,js for website)

Hybrid Rendering:

Server side rendering + Client Side Rendering.

On first load the server sends the HTML and data for that site , and the HTML code of all website pages. So first time the browser open the site , its SSR and when we navigate to other pages its CSR.

Static Websites

There is no dynamic data. It uses only static data. We cannot add data according to user logged in. No Server is required. eg Gatsby, Jekyll.

#javascript #html #reactjs #ssr #web-development

728 views

© 2026 Amit Chambial Blog.

Archive
Privacy
Terms