How to see whether a website is client side rendered or server side rendered?

Question

So, SSR means that the server sends a fully packed html, css and js file while CSR only sends the empty html and again client fetches the js to populate the data on the page.

I want to visualize this. Is there any way I can see "the empty html" or "the fully packed html css js" file, so that I can be more clear with what I'm seeing.

Any help would be appreciated. Thanks a lot.

Buzzer

Look into the JS files and see if any AJAX calls are being made. – Refrangible

Press Ctrl+U and you will see the HTML document sent by the server. If it's mostly empty, you're dealing with CSR; if it already contains all the content, it's SSR. – Cloutman

Where do I look exactly? In insect element or some other source? – Buzzer

Right click / View Source – Merengue

Well, all the websites I see have html, css and scripts in them. Are there any fully CSR websites where I can see an empty document? @ChrisG – Buzzer

Here's a React demo calculator: ahfarmer.github.io/calculator (not completely empty obviously but a good example of minimal HTML) – Cloutman

Answer 1

Realistically, there is not a hard line between server and client side rendering. Apps that most would call CSR still send html back in their server responses, sometimes even a lot of html. And apps that most would call SSR still make minor tweaks to the html of their pages in response to user events.

For example, say you are serving a page for an article that has user comments at the bottom. Your server could:

1. Build all the html, including the content of all comments right on the server before sending the completed html to the client. This is SSR.
2. Build an outline with lots of html there (navigation, empty boxes to be filled, etc), then send that. The specific comments and article content would be filled in client side. This would be called CSR.
3. Send back an empty html document with scripts attached that will fill in the entire content. This is definitely CSR.

For me, the biggest telltale of a totally SSR application is that if you save something / make some change that will persist, the page usually reloads as part of the save. CSR apps are more likely to save, and maybe redraw parts of the page, without a full reload.

A last note, to see how much of your html was rendered there in your browser, you can compare view source with the element inspector in dev tools. If you right click -> View Source, you'll see exactly what the server sent. But if you right click -> inspect element and look at the html with your dev tools, you'll see everything as it is now, ie, after a full client side render. If they are identical, this is a SSR application, and the less identical they are, the more CSR is going on.

Cancel

If I understand right, #2 here is commonly referred to as hydrating content that was originally rendered server side. At least in react. – Snowdrift

Answer 2

Use a server side language (PHP/Python/perl) and execute a cURL and get the initial payload. Or do a wget, whatever suits you. This will probably be an html file.

Then on the client-side:

const ser = new XMLSerializer;
let dump = ser.serializeToString(document.documentElement);

You can repeat above with intervals and compare with the initial step. On the server side, if you use nodeJS, you can use headless browser from puppeteer to execute above.

You can feed the outputs to git diff for an overview.

Anstice

Answer 3

Simply view the page source in your browser (usually right-click on the page and select "View Page Source" or use the developer tools). If you see the complete HTML markup of your page, including the content that is supposed to be dynamically rendered by the client-side JavaScript, then it's likely that your SPA does not have SSR.

Heathenish