Future of the Web Browser

Server-Side Rendering

Browsers were built before JavaScript was a thing. At first websites relied on only HTML and CSS. All of which was rendered on the server. Then, JavaScript was introduced to add little sparks of interactivity. This was done by manipulating some markup and styles through JavaScript. However, after clients got substantially more computing power and faster internet connections it was possible to add more JavaScript. Websites got more and more interactive and their dynamic JavaScript part increased.

JavaScript was only used in the browser. On the server various other programming languages were used to dynamically generate the HTML for each request. Some of the server-side programming languages worth mentioning are PHP, Java, C# and Python.

Client-Side Rendering

With the introduction of modern JavaScript frameworks like React and Angular something substantial changed. HTML and CSS was suddenly rendered from the JavaScript file in the browser. A lot of the rendering could be done on the client offering ever greater computation power even on mobile devices. Servers were reduced to only send the dynamic user data required to render the page through JSON or GraphQL.

Browsers hadn't changed as they still only rendered HTML and CSS even if it was generated with JavaScript methods initially designed for making small chagnes to the markup.

Initially, JavaScript can only be loaded from an HTML file as shown below.

<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <h1>Title</h1>
    <script src="/bundle.js"></script>
  </body>
</html>

This means that at least two requests are required for anything to be rendered on the client. Where before, with server-side rendering the markup was already shown to the user after the first request to the HTML page was finished.

Server-Side Rendering with JavaScript

Parallel to JavaScript becoming more and more popular for Frontend Development a JavaScript runtime called node was developed for the backend and became more and more popular.

Since client-side rendering will require another request until the page shows up the idea of prerendering the markup generated by the client-side code on the server quickly came up as an optimization. The server caches the result of an initial JavaScript render as HTML and CSS and then delivers this result directly to the client. To allow interactivity on the client another render there will be run. This process is called hydration. There are various server-side rendering frameworks for every client-side rendering framework. The most popular one for React is called Next.js.

Browser Optimization

All of this prerendering and double-rendering could be avoided if browsers supported a JavaScript file as an initial entry point where currently only an HTML file called index.html is allowed. If the server returned a JavaScript file the browser would immediately run it whereby the inital markup would be created.