Codementor Events

Modern Web Development is going Back to the Future

Published Jul 04, 2024
Modern Web Development is going Back to the Future

Recent releases of React and frameworks like NextJS show a big paradigm shift back towards building true full-stack web applications. In the last decade, it was about SPAs (Single Page Applications), powerful client-side applications, maybe enhanced with some server-side pre-rendering to improve loading speed and SEO. Actual backends would usually be completely separate REST APIs. Despite the strong advantages of this architecture, layers and layers of innovative optimizations didn't seem to be able to make up for the issues it caused for public content-focused sites. So now we're seeing a renaissance of the core web technologies that powered the web of the 2000s, but in combination with some of the modern advancements.

Where we're coming from: Progressive Enhancement and SPAs

“Progressive Enhancement” is the term for what we did before SPAs and what we are now going to do again after SPAs. It means implementing a complete web application on the server side, with full HTML page loads and form handling, and then add some JavaScript (remember jQuery?) to the page that enhances the experience by adding interactivity, loading and submitting data without changing the page, if the browser supports it. This approach has always been supperior in many ways (performance, accessibility) but requires implementing server and client code separately, usually in different languages, glueing it together somehow, often duplicating functionality. Frameworks like Ruby on Rails have mastered that approach. Still, thinking of server and client as completely separate apps, communicating via a simple API, often seems much easier to structure.

Where we're going (back) to: React Server Components

With their latest version, NextJS added support for the new React feature called “RSC” (React Server Components). Be sure not to confuse it with SSR (server-side rendering), which is just a part of the puzzle and which has been around for quite a while. Before RSCs, NextJS was able to render a page on the server, but then would send all the JavaScript code to the client that was necessary to re-render the full page again in the browser. With RSCs, the page can be mostly rendered on the server only with just a few elements getting enhanced in the browser, saving quite some bandwidth and re-rendering time. And core functionality like form handling is implemented in a web-native way on the server plus enhancements, so that the full application can also function with JavaScript turned off in the browser (or before all the client-side code is loaded). Just like it used to be with Rails (or PHP or whatever) and jQuery.

What's the point, then?

This development is finally closing the loop. We went far out, away from the traditional web application stack, building rich client-side applications similar to how we build desktop and mobile applications. Lots of technical advancements where made on the way. But abandoning native web technologies often added new issues trying to avoid old ones. React started as a client-side rendering library and is now becoming a full web framework (in combination with NextJS and the likes).

What's new is that developers can now build full-stack web applications in one universal JavaScript/React codebase. You can access a server-side database from the component that handle the form submissions and add client-side interaction to another one in the same tree just by using simple directives like "use server" and "use client".

A good old server-side blog with React/NextJS

I put together a little demo of a simple blog application in NextJS like a Rails demo would look like. You can add posts and comments to the database and it works with JavaScript turned off. Source code is available as well.

Have fun exploring and let me know what you think of this development.rt writing here...

Discover and read more posts from Martin Stadler
get started