SSR vs CSR vs Static Rendering

So, what I know after reading several articles online and they all seem to have this:

SSR:(old php apps)
* Client sends a request to the server.
* Server renders html(on the server itself).
* Server sends the already rendered html document to the browser. 

CSR:(react apps)
 * Client sends a request to the server.
 * Server sends a blank html page to the browser.
 * Client downloads javascript and populates it with data.

And in Static Rendering(gatsby), client sends a request to the CDN?

I don't really get it.

Is there a way to visualize this or some good examples you can give. I'm okay with react, express, mongo, node, js but I don't know I just can't seem to wrap my head around ssr and csr. I went through this post on dev.to but still can't understand.

Are there any websites that can help me see it more clearly?

Server-side rendering or SSR is the conventional way of rendering web pages on the browser.
Client-side rendering or CSR is a different approach to how the web page is processed for display on the browser. In the CSR, the burden of compiling dynamic content and generate HTML for them is transferred to the client browser.

Server side rendering can be a bit faster at the initial request, quite simply because it doesn’t require as many round trips to the server.Client side rendering, on the other hand, is slower at initial request because it’s making multiple round trips to the server.

Hi Dave Rodriguez,

Many of us had this question. I tried explaining this in this blog.

This is very basic article that i have written.

If you have any questions you can ask me here 👇.

Dave Rodriguez

mostly sites built using React,Vue or Anugular are csr.

While all the other sites using old MVC approach (django,rails,etc) uses ssr.

I validate it by checking the meta tags in the site using https://metatags.io

If a site have dynamic meta means different meta for different pages , most probably its ssr.

See hashnode is built using react(nextjs). but it uses ssr.

Amit Chambial okay thanks.

One more question, do you have idea about the mern stack. I posted a question today hashnode.com/post/i-need-to-know-the-flow-of-this… If you could help me out, that would be great.

Dave Rodriguez Check it out 🙈

Thread

SSR vs CSR vs Static Rendering

Responses(2)

Recent threads

Search Hashnode

SSR vs CSR vs Static Rendering

Responses(2)

Recent threads