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

Admin 1
Viewed 8310

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.

server-side-rendering server client html javascript
2 Answers

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.

user_82907420

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.

user_94104120
Related