NextJS - the gamechanger for your web performance

Since the site is static, it can be delivered by CDNs (content delivery networks), leading to even faster load times.

Server-side rendering

Server-side rendering is another approach to generating and displaying web pages. It is particularly useful for content that needs frequent updates or pages that must respond to specific user data. Unlike static site generation, where pages are generated in advance, server-side rendering happens at runtime, meaning every request to the server results in a freshly rendered page.

This has the advantage that the page is always displayed with the latest data from the database or an API. This means, for example, that product details, prices or user information that change frequently can always be kept up to date.

Client-side rendering

Client-side rendering, or CSR, is a third approach to generating web pages that relies heavily on JavaScript and, in particular, on frameworks such as Next.js. With this approach, most of the work is shifted to the client, i.e. the user's web browser.

Unlike SSG and SSR, where pages are generated server-side and then sent to the client, with CSR the client first receives a minimal HTML page. The rest of the page content is then loaded and rendered by JavaScript, which is downloaded from the server after the initial page.

A main advantage of CSR is that after the page's first load, only the necessary data is loaded for subsequent requests, leading to a better user experience. However, CSR requires more computing power on the client side and can lead to longer loading times on slow internet connections.

The framework offers an elegant solution that combines the benefits of SSG, SSR and CSR to ensure optimal website performance.

Outlook on the future of web development with Next.js

In current practice, calling a dynamic function within your route – such as accessing cookies – causes your route to be treated as fully dynamic. This division between static and dynamic rendering shapes the structure of many of today's web applications. Developers often face the choice of opting for one or the other rendering approach for their entire application or specific routes.

Yet reality of many websites and applications doesn't reflect this strict separation. Take e-commerce site as example: while large parts of product page can be statically pre-rendered, there are elements like user's shopping basket or recommendations that must be generated dynamically on demand.

This is where the innovative concept of "Partial Pre-Rendering" comes in, introduced as a preview feature with Next.js 14. This experimental feature makes it possible to render a route with a static "loading shell" while certain areas remain dynamic. In short: it allows dynamic elements to be isolated within an otherwise static page.

How does that work in practice?

When a user visits such a partially pre-rendered route, they are first served a static shell. This fast initial display significantly improves not only load time but also user experience. Within this shell are "gaps" designed to load dynamic content asynchronously. This dynamic content is streamed in parallel with the initial load, which significantly shortens overall load time.

This approach differs fundamentally from the previous one, where routes are rendered either entirely statically or dynamically.

By introducing Partial Pre-Rendering, Next.js bridges the gap between lightning-fast delivery of static content and the flexibility of dynamic applications. This approach promises to shape the web development landscape sustainably by combining the best of both worlds: the speed of static pages and the adaptability of dynamic content.

Automatic optimisation of images, fonts and scripts

NextJS offers automatic optimisations for images, fonts and scripts that help improve the user experience and Core Web Vitals. With NextJS, images can be optimised both server-side and client-side. Images are automatically converted to the most efficient format and resized to the ideal size based on the user's device and network connection.

As for fonts, NextJS supports the modern web standard Font Loading API. With it, developers can optimise the time to first visible text rendering (FCP – First Contentful Paint) and prevent the unsightly flash of web fonts (FOUT – Flash of Unstyled Text).

Just like images and fonts, the framework ensures that JavaScript logic is optimised. Only the part of the scripts needed by the end user in the current view on their device gets loaded. To this end, NextJS splits your project's logic into smaller, manageable pieces ("code splitting"). Through the integration of server components, developers can also deliberately offload large, slow computations to the server.

The result: efficient resource management and lightning-fast load times.

Conclusion

NextJS is a powerful framework for website development. It combines various rendering methods and offers automatic optimisations for an ideal project foundation. With NextJS, your customers benefit from an improved user experience and excellent loading times.

Alongside the various rendering methods, NextJS offers other innovative features, such as integrated interface communication (Server Actions). However, the focus of this article is deliberately on performance-critical features. If you have questions about other NextJS features, feel free to write to us.

In this blog, we looked at the modern frontend framework NextJS - if your company doesn't use React, you can still benefit from many of the principles, methodologies and features presented. We at synaigy are happy to advise you in finding the optimal solution for your setup.