What has been the case till now :

1. SPAs ➡️ where we build our entire app with Javascript and when requested, we sent the entire chunk to the browser, to decode and present HTML and CSS out of it. Works but not really performant.
2. Server Rendering ➡️ we still write Javascript for the entire app but instead of parsing it on the client, we do it on a much faster machine (server) with each request. And then send the HTML/CSS back to client. Improved performance but again it is all Javascript (just machine got changed).
3. Statically generated and cached ➡️ here we do the same decoupling of Javascript to get HTML and CSS but not on request. We do it at build time (basically when we deploy it first or after any change or periodically). We parse the Javascript at build time and then store the HTML/CSS on a CDN to be served almost instantly. Works great but what about the dynamic nature of the app, where the UI needs to be calculated based on some user data or input.
4. Plain HTML + CSS + JS ➡️ if you are still doing it, you are a legend. Please carry on the work.

💡 Note : In both the server rendering and static generation, we send some Javascript to handle complex stuff like user interactions. But they are smaller than a SPA chunk by a BIG margin

A new change is on the table :

What if I say that there is a way where we can merge server rendering and static generation. And after that, we ship some parts of the UI (that needs no user data to be displayed) almost immediately. And the dynamic UI streams to client just after they are available. Best of both the worlds? Yah it is. Let’s see how NextJS and Astro (two frameworks I work the most with) achieve this pattern.

💡 As of now and as per my knowledge only these two frameworks came up with this idea. If any other framework has this or is there a custom way to achieve it, then I am interested to have a chat. Please drop a message.

NextJs Partial Pre Rendering :

Yes, NextJs call this pattern as Partial Pre Rendering. And to achieve this NextJs uses three things a Edge network layer, a CDN, a server. At build time, NextJs identifies the parts of the UI that are static and puts them as a HTML shell in the CDN and rest of the UI is expected to be rendered by the server. At last it puts the Edge network layer between client and Server + CDN. When client request the app : It first goes to the Edge layer. Edge requests the static parts from CDN and dynamic parts from server. Obviously, the static part arrives real quick and served to client. Meanwhile, the server is rendering the dynamic parts. As soon as it is done, it the sends it to the Edge and then client finally gets it.

Astro Server Islands :

Astro does it quite simply. When you build the app, it creates a HTML with two things : HTML for static UIs + holes in the DOM to guide the client to fetch the HTML for dynamic parts. And then we can go on to host the master HTML with other static assets in any CDN network. When user requests the site, browser hits CDN, immediately get back some HTML, renders it, calls for the dynamic content, and finally renders them as well. Check the demo app here : Astro Server Islands

// With the 'holes' in the DOM,
// Astro's static HTML looks something like this
<div>
	<div>STATIC CONTENT</div>
	<div fetch="/somethingDynamic" deferred></div>
	<div fetch="/somethingMoreDynamic" deferred></div>
	<div>AGAIN STATIC</div>
<div/>

The real question :

All the above looks real good but again, it is about how much apps and websites are going to upgrade or even consider to use this kind of architecture. I feel 70% of web is still on Wordpress. While this way of improving performance is not necessarily “fancy”, but how the industry gonna feel about it is still doubtful. I covered it here, because in my personal view, if done right : this is the next big thing in web development

Thanks for reading through! 🌻