Why use Server Side Rendering

In recent years it has become popular for just about all of a web application to be rendered on the client.

Applications will often serve almost nothing but a <script> tag that loads up some front-end code (JavaScript and/or WebAssembly) and that front-end code is responsible for rendering the application's HTML and interactions.

Here's an example of what many of today's web application boil down to:

<!DOCTYPE html> <html lang="en"> <body> <div id='app'> <!-- application will render HTML here when it begins --> </div> <!-- One this applications loads it will inject some HTML into the body --> <script src="/my-application.js"></script> </body> </html>

One downside to this approach is that a user must wait until the script begins rendering before seeing anything.

Let's illustrate:

Client side rendering without server side rendering: ┌─────────────────────────────────────┐ │ 1) Client requests for web page │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │2) Server responds with <script> tag │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │ 3) Client downloads script │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │4) Client parses the returned script │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │ 5) Client executes returned script │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ User first │ 6) Script starts rendering content │◀─ sees └─────────────────────────────────────┘ content

Contrast this with server side rendering, where the initial page load might look something like this:

<!DOCTYPE html> <html lang="en"> <body> <div id='app'> <!-- This content was sent down from the server so that the user sees something immediately! --> </div> <script src="/my-application.js"></script> </body> </html>

And the flow:

Server side rendering then client takes over rendering: ┌─────────────────────────────────────┐ │ 1) Client requests for web page │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │ 2) Server responds with server │ User first │ side rendered content along with a │◀─ sees │ <script> tag │ content └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │ 3) Client downloads script │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │4) Client parses the returned script │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │ 5) Client executes returned script │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────┐ │ 6) Script starts rendering content │ └─────────────────────────────────────┘

Server side rendering allows you to show something to your users more quickly, especially so for users with slower machines and/or bandwidth.