Are Images Rendered Client Side or Server Side?

Question

I've just gotten started with web development, particularly Reactjs, which introduces "client side rendering." I think I understand the concept of client vs server side rendering, but I don't exactly know how to understand these concepts pragmatically.

For example, when I have <img src="airplane.png" />, is this image being loaded client side or server side? IE, does the server return the image as part of the original request, or does the image get loaded from the client by making another request to the server after the HTML has been served? If I am loading a large amount of images, would I want them to be loaded client side or server side?

Thanks!

Answer 1

It's the latter case. The respective tag will be inserted into the DOM of the page and the browser will make another request to the server (or to wherever the image is hosted - it doesn't have to be your server) for the contents of that image.

The term client-side vs server-side rendering refers to where the document structure is computed. In the latter (and classic case) the server builds a whole document as a result of the request, while in the former it builds a skeleton document and it's up to the application logic on the client side to construct the document as the application runs. Of course in server-side rendering, you'd at some point begin modifying the DOM as well in order to make interactive applications, so the delineation is not as clear cut as that.

You can provide the image as a data URL which embeds the contents of the image as an URL, and which will be downloaded in the body of the initial document request. Or sometimes in an attached CSS file. But that's useful for small images which don't get used that often (svg icons or things like that).