Choosing the right rendering mode for your website or application

As the web and the technologies that power it evolve, websites and web applications also need to adapt in order to keep performing well, being discovered by their audiences and providing an enjoyable experience to these audiences.

In fact, the importance of fast performance and good discoverability is so great that we’ve been seeing a rise of development frameworks that have introduced new innovative rendering modes besides the traditional client-side and server-side rendering.

Traditionally, client-side rendering used to be the preferred mode for websites and apps with high interactivity, while server-side rendering resulted in faster loading and better SEO. But, due to the ubiquity of digital and people’s habits changing accordingly, top websites and apps now require all of these – high-level interactivity, fast performance & good SEO – without sacrificing any of them.

In this article, we’ll take a look at some of the new rendering modes offered by some of the new leading platforms and frameworks, such as static site generation offered by platforms such as Gatsby, and the different new rendering modes introduced by the Next.js and Nuxt.js frameworks.

Client-side vs. server-side rendering

First, let’s briefly recap the two traditional rendering methods and how they compare.

• With client-side rendering (CSR), the final HTML content & UI components are generated on the client’s browser using JavaScript. This makes CSR a great fit for apps that require a lot of interactivity (e.g. chat apps and online games) and SPAs (single-page applications), as well as websites that need real-time updates.
• With server-side rendering (SSR), the complete HTML page with the rendered UI is generated on the server, and is then sent to the browser which displays it without any JavaScript. This results in faster page loading and better SEO, making SSR great for websites with static content such as blogs and landing pages.

The limitations of these two rendering modes have led to the creation of new rendering modes in some of the top newer JavaScript-based frameworks. We’re going to dive into these now.

Static site generation (SSG)

Static site generation (SSG) was popularized by Gatsby, which uses it as the default rendering mode. With SSG, the entire site is pre-rendered into HTML, CSS & JavaScript at build time, and then served to the browser as static assets. Since these static files are then uploaded to the content delivery network (CDN) of choice, the build server is only needed for the initial build step.

This is why Gatsby was initially marketed as the “blazing fast static site generator for React”: pre-rendering HTML, CSS & JavaScript in this way results in the fastest performance possible, since all of the content is already rendered when the user visits the page.

However, since the initial build step needs to take care of processing the entire HTML, CSS and JavaScript, build times tend to take longer. This can pose a problem as the number of pages grows – but, fortunately, Gatsby has a solution for that: deferred static site generation (DSG).

Deferred Static Generation (DSG)

With DSG, developers get greater control over the build times of their sites and pages. This is enabled by the option to defer the builds of specific pages until they get requested by the user for the first time. All subsequent requests are then made in the same way as with static site generation; however, as opposed to SSG, this still requires keeping the build server running after the initial build.

Static vs. dynamic rendering

Next.js has taken the spotlight as the top React framework (rising star shadcn even developed a Drupal-Next.js integration, called Next-Drupal, among his many important contributions). Similarly to Gatsby, Next offers static rendering, which is essentially the same as static site generation.

Next.js also provides dynamic rendering, which renders the content on the server at a particular user’s request time, much like Gatsby’s DSG. Dynamic rendering is automatically applied to a route if it contains any Dynamic APIs or any uncached data. This makes it a better fit for Next.js applications working with real-time and/or user-specific data.

Partial prerendering

In addition to static and dynamic rendering, the latest version of Next.js also offers a new experimental rendering mode – partial prerendering (PPR), which allows developers to use both static and dynamic components in the same route.

Universal rendering

Universal rendering is the default rendering mode of the Vue-based framework Nuxt.js. Universal rendering is similar to traditional server-side rendering mentioned above, but also uses hydration to enable interactivity in addition to the performance and SEO benefits of SSR.

Nuxt makes it easy to switch to a different rendering mode, depending on the use case. In addition to universal rendering and traditional client-side rendering, the framework also offers hybrid rendering and edge-side rendering.

Hybrid rendering

Similar to partial prerendering in Next.js, hybrid rendering allows different caching rules per route and determines how the server should respond to a new request on a given URL. In the context of Nuxt, this means each route can have a different rendering mode, rather than the entire site or app having to use the same one.

Edge-side rendering

ESR is a Nuxt-specific feature that uses edge servers of a content delivery network (CDN) to render the application as close to the user as possible, with all requests to the page intercepted by the nearest edge server rather than going to the original server. As the Nuxt docs state, this approach is closer to a deployment target than a rendering mode.

The main benefit of edge-side rendering is the improved user experience that comes with reduced latency and consequently faster performance.

What to use?

With so many different options, decision paralysis and/or technical debt can quickly become a problem in software development. So, in this final section of the article, we’ll break down and recap when it makes sense to use certain rendering modes, and/or to explore using new ones.

If you’re using an already established programming language or development framework, and have no need for switching to a more specialized framework, you essentially get to decide between client- and server-side rendering.

• CSR: best for apps & websites that require lots of interactivity and real-time updates
• SSR: best for sites/pages with static content that require good SEO & performance

If you’re already using one of the newer frameworks discussed in this article, then your choices expand greatly. For startups, smaller businesses and/or less critical use cases, this may open the door to more experimentation even with not yet stable modes such as Next’s partial prerendering.

Legacy businesses, enterprises and business-critical use cases, however, need a well-thought strategy to make the best use of the more specific rendering options offered by Next.js / Nuxt.js, i.e. addressing a key shortcoming and/or playing a key role in the technical stack.

In a React-based environment, Gatsby’s SSG and Next’s static rendering are both great for pages with static content that don’t have interactivity but require good search engine discoverability, such as landing pages and blogs. In contrast, sites and apps requiring interactivity, real-time data and real-time updates of the data would best benefit from dynamic rendering provided by Next.js.

Despite Vue being the youngest of the leading JavaScript web frameworks, Vue / Nuxt seem to offer the most options when it comes to rendering. Most importantly, universal rendering enables interactivity without sacrificing either performance or SEO.

In cases where parts of the website/app are mostly static but other parts require dynamic functionality, such as content-heavy and SEO-intensive websites with advanced admin features, hybrid rendering can be an almost custom-fit solution and is easily implemented if you’re already using Nuxt.

If you’re considering adopting either Next or Nuxt into your technology stack, the rendering options discussed in this article may play an important role in the decision (of which one) to adopt.

Conclusion

We hope this article helps you to make a more informed decision when choosing the right rendering mode for your websites and apps. Get in touch with us in case you need any help with either Next.js or Nuxt.js development, or find out more about what it’s like to work with us.