Next.js App Router: Rendering the next evolutionary stage

Frontend rendering has gone through several evolutionary stages in recent years. Here we look back at the journey from the first interactive web applications with Client Side Rendering (CSR) to the latest development with the Next.js App Router.

Why is this important? Quite simply, the right strategy is crucial to developing an application that is both fast and user-friendly.

From CSR to SSR to SSG: the basics

The first modern web applications with a high level of interactivity relied on Client Side Rendering (CSR). The server sent an empty HTML page and JavaScript assembled the content directly in the browser. Although this took dynamic web applications a big step forward, it could lead to long loading times and was problematic for search engine optimization (SEO), as Google could do little with empty HTML pages.

Performance Server Side Rendering (SSR). The server generates the complete HTML for each request. This means that the page arrives in the browser already finished, which ensures short loading times and is also advantageous for SEO. However, the constant regeneration puts a strain on the server, especially if there are a large number of users.

Another approach brought the Static Site Generation (SSG), where the HTML is already created at build time - i.e. before anyone accesses the page. This means that loading times are extremely short, as pre-built pages are delivered. The disadvantage is that changes to the content require a new build phase. Incremental Static Regeneration (ISR) has remedied this weakness by only regenerating certain pages when required - a clever solution.

The frameworks, your rendering buddies

So the rendering strategies are not witchcraft, but the implementation is not trivial. That's why we rely on frameworks. In recent years, the strategies have been shaped by a number of factors:

• AngularJS (2010) brought the concept of Single Page Applications (SPA) into the mainstream, where the entire application is rendered in the client (browser). This enabled applications with a high level of interactivity.
• Gatsby.js (2015)With a sophisticated build system, Gatsby brought the idea of statically generated pages to the wider Javascript world - the focus was on content-based pages such as blogs, which benefited from much shorter loading times.
• Next.js (2016) enabled developers to easily render React applications on both the server and client side, popularizing SSR.

Next.js has subsequently distinguished itself in particular by combining the various rendering strategies - CSR, SSR and SSG - in a single framework and further developing them with ISR.

Next up: Rendering at component level with the Next.js App Router

With the new app router architecture, Next.js has ushered in a new stage of evolution. Now we can per component decide which strategy is the right one - this brings a whole new level of flexibility. But what does this mean in concrete terms?

In the past, we had to decide whether an entire page should be rendered client-side, server-side or statically. This often led to compromises: CSR was optimal for interactive content, SSR for SEO and SSG for a fast loading time. With the App Router, we can now choose the best rendering method for each individual component. Developers are doing somersaults with joy.

Imagine a page with a dynamic chat module and a static info box. The chat needs CSR to be interactive and responsive. The infobox, on the other hand, is rendered statically so that it is immediately available when users visit the page. The best part? Both approaches can be combined to provide an optimal user experience.

This means that every part of your application is delivered in the best possible way, without the need to compromise. Performance is improved, flexibility is maintained and your users benefit from a smooth experience.

Conclusion: more complex, but worthwhile

SSR and SSG and CSR with app router? Sounds more complex than previous approaches. However, this is offset by greater flexibility. This is because modern web applications have to meet higher demands.

Imagine you're a chef and have the perfect tool for every ingredient. The result? A perfectly prepared application that loads at lightning speed, is SEO-optimized and delights your guests. The added complexity allows us to get the most out of each rendering strategy.

Do you have any questions or would you like to try out these approaches in your next application? We are happy to support you!