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?