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?

Purvi Barot's photo
  • 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.
Amit Chambial's photo

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 ๐Ÿ‘‡.

Show +2 replies
Dave Rodriguez's photo

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-o... If you could help me out, that would be great.

Amit Chambial's photo

Dave Rodriguez Check it out ๐Ÿ™ˆ