Site Rendering

– Site Rendering
– Server-side rendering
– Client-side rendering
Content

Site Rendering

Site rendering is the process of generating HTML markup into web pages by a web browser. Site rendering can happen at both: the server-side or the client-side.

Server-side rendering

No longer the preferred way of rendering web pages, and it can come at a significant compute overhead cost. Normally a user would first visit a page, and a request for content is then sent to the server; followed by a response sent back to the browser.

When sites render content directly from the server, all the processes involved with creating the HTML page are handled by the remote server hosting the site or web application including any database querying. The first-time it loads, page load time is as fast or faster than content served from the client.
Overall, client-side rendering out-performed, and provide a better user experience. But not always, an exception are static sites who do perform great when server-side rendered (SSR).

It's worth pointing out, that while the remote server (SSR) is busy processing, the client's browser remains idle, waiting for the server to send back a response before it can generate any new content.

Client-side rendering

A more popular, and modern approach to site rendering. It refers to rendering pages directly in the browser using JavaScript. All logic, data fetching, and routing are handled on the client rather than the server. Page load is faster as a result. However, further improving page load times have its challenges with both rendering types.

For example, a challenge to client-side rendering is often-times the amount of JavaScript code required, as it tends to grow as the application grows; which must compete for processing power with other libraries, and third-party code before for a page's content to be rendered.
But server-side rendering also comes with its fair share of challenges, and decrease page load time, such as higher performance caching and memoization.

Server rendering and client-side rendering via rehydration

Often referred as universal rendering or SSR, it's an attempt at improving trade-offs between the client and server-side rendering by doing both.
Full page loads or reloads are then handled by the server rendering the HTML, with the JavaScript/data embedded into the resulting document.

Rehydration may be sometimes difficult to implement, and when done incorrectly, it can be far worse than any delayed interactivity.