Trying to understand SSR and CSR
Unanswered
TRAXCUTTER posted this in #help-forum
Hello.
I am new to Next (previously worked on nuxt professionally, though I did not learn much).
In both the cases, I have always been a bit confused between SSR and CSR components.
I understand these are universal concepts and don't really apply to a specific framework, but since I'm learning Next now, I thought I might as well learn it here.
From my understanding:-
SSR:-
------
Request comes => NextJS server makes call to DB => NextJS server gets data from DB => next builds the page, integrating the data with the html => the entire built page is sent to the client.
CSR:-
------
Request comes => NextJS directly sends the HTML to the client => client parses the JS => client comes across a fetch call => client sends request to next server => next makes call to DB => next gets data => next directly sends the data to the client, like a traditional API => client displays data
From my understanding, in CSR, an extra fetch call is being made, which is not present in SSR. However, that should not mean SSR is better than CSR, does it?
making calls is, like, the foundation of a web app, no? Without it, everything would be useless, no?
So, why is SSR considered better than CSR (apart from the SEO stuff?)
I am new to Next (previously worked on nuxt professionally, though I did not learn much).
In both the cases, I have always been a bit confused between SSR and CSR components.
I understand these are universal concepts and don't really apply to a specific framework, but since I'm learning Next now, I thought I might as well learn it here.
From my understanding:-
SSR:-
------
Request comes => NextJS server makes call to DB => NextJS server gets data from DB => next builds the page, integrating the data with the html => the entire built page is sent to the client.
CSR:-
------
Request comes => NextJS directly sends the HTML to the client => client parses the JS => client comes across a fetch call => client sends request to next server => next makes call to DB => next gets data => next directly sends the data to the client, like a traditional API => client displays data
From my understanding, in CSR, an extra fetch call is being made, which is not present in SSR. However, that should not mean SSR is better than CSR, does it?
making calls is, like, the foundation of a web app, no? Without it, everything would be useless, no?
So, why is SSR considered better than CSR (apart from the SEO stuff?)
8 Replies
Greater Shearwater
Seems like you have got the idea right. The major difference between the two is, in the CSR version the client gets a blank HTML file (usually a
But with SSR the first response the client gets already has the proper HTML with all the content since the data is fetched on the server and the HTML is already rendered. And yeah that is better for SEO as well since it has content to work with.
I am not sure whether SSR is better than CSR in all cases, there's probably cases where CSR makes more sense, but yeah that is the general difference.
Bit off topic from your question, but there is also couple of different ways for SSR to work. One is SSG (Static Site Generation) where the HTML is rendered on the server at build time. So when a client requests the site, the response can be served from a CDN since the HTML pages are already built. Ideal for content that rarely changes like blog pages.
The other is SSR, where the HTML is built when a request hits the server. This is used when you want to serve user specific data or when you want the latest data to be fetched before building the HTML. For example a client can send a cookie in the first request to the server, that contains some data to recognize who the client is and based on that the HTML will be build on the server.
<div id="root"></div>) in the first response, since JS (react) will be the one injecting all the DOM nodes after the JS is fetched. So basically the user is staring at a blank screen until the JS is downloaded and the site is built.But with SSR the first response the client gets already has the proper HTML with all the content since the data is fetched on the server and the HTML is already rendered. And yeah that is better for SEO as well since it has content to work with.
I am not sure whether SSR is better than CSR in all cases, there's probably cases where CSR makes more sense, but yeah that is the general difference.
Bit off topic from your question, but there is also couple of different ways for SSR to work. One is SSG (Static Site Generation) where the HTML is rendered on the server at build time. So when a client requests the site, the response can be served from a CDN since the HTML pages are already built. Ideal for content that rarely changes like blog pages.
The other is SSR, where the HTML is built when a request hits the server. This is used when you want to serve user specific data or when you want the latest data to be fetched before building the HTML. For example a client can send a cookie in the first request to the server, that contains some data to recognize who the client is and based on that the HTML will be build on the server.
thanks for the response
glad to see I have the basics right
what I don't understand is this part:
first off, what do we even mean by SEO?
I assume its mainly being referred to Google's crawlers, yes?
that is better for SEO as well since it has content to work with
first off, what do we even mean by SEO?
I assume its mainly being referred to Google's crawlers, yes?
if so,
What difference does it make if we don't have the initial content?
its not like there is only 1 bot that will crawl our website only once, no?
What difference does it make if we don't have the initial content?
its not like there is only 1 bot that will crawl our website only once, no?
Let's say just now, I received a page, which is empty, then the bot comes and sees there is nothing.
But after 2 secs, all the content is loaded client side.
It's not like the bot won't crawl my site again? It definitely will, right?
But after 2 secs, all the content is loaded client side.
It's not like the bot won't crawl my site again? It definitely will, right?
Greater Shearwater
I don't really have an in depth understanding of how SEO works, so maybe someone else can chip in and share some more information.
But my general idea is this.
A bot from google sends a request to your site and gets the response. If the site is SSR, on the first response the crawler can see the semantic content of your site. Things like
With a CSR site, the site it gets only have one tag like the root div on the initial response. Then the bot needs to execute your JS in order to get the actual content and then crawl it again. Also I have read that some bots don't execute JS at all, in that case they will only see an empty site.
But given the fact there are loads of client only React sites on the internet there could be more to this.
But my general idea is this.
A bot from google sends a request to your site and gets the response. If the site is SSR, on the first response the crawler can see the semantic content of your site. Things like
<main>, <footer>, headings etc. This gives a good idea about what the site is about.With a CSR site, the site it gets only have one tag like the root div on the initial response. Then the bot needs to execute your JS in order to get the actual content and then crawl it again. Also I have read that some bots don't execute JS at all, in that case they will only see an empty site.
But given the fact there are loads of client only React sites on the internet there could be more to this.
Thank you very much!
appreciate your response.
appreciate your response.