My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

SSR vs CSR vs Static Rendering

Dave Rodriguez's photo
Dave Rodriguez
·Jun 6, 2020

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?