Back to post list

XM Cloud series: Next.js 13.4 lightning speed with the server components

By Derk Hudepol on 8/27/2023

Recently Next.js came with version 13.4 where it added the production ready status for the App router and therefor also the Server & Client components. As these are major new functionalities for Next.js and have a huge impact to the way Next.js works I dove into what it is ? what it brings and if it is worth it ? and last but not least if you can use it with XM Cloud/JSS?

What are the App Router and Server Components?

App Router

The app router is an alternative to the well known pages router and will be very comfortable for people already using the pages router. The major changes that the App router brings that are most relevant to Sitecore development are:

  • Server Components: Server components allow us to render static components completely server side with no Javascript being send to the browser for this component.

  • Layouts: A new concept of layouts which can be shared across pages. Its now an out of the box functionality

  • API caching mechanism: rather then caching only on the page level, The App router actually brings caching on the fetch api call level. This offers the possibility to do static, server rendered or no caching options. For 3rd party API' s it offers a cache functionality from React that supports the same

  • Metadata API: rather then programming all metadata headers by ourselves, we can/must now use the metadata api which offer support for all SEO metadata, even ranging towards OpenGraph

  • Component level data fetching: we can finally fetch data out of the box. There is no longer a need for using the custom JSS functionality in supporting this. This allows our components to be more CMS agnostic.

Server components

Server Components in Next.js are actually the Server Components that come with React 18. To quote the Next.js website:

React Server Components allow you to write UI that can be rendered and optionally cached on the server

What this basically means is that we can write most components in such a way that they are largely only executed server side and no javascript is going to the browser for the component.

This brings a number of benefits (also taken form the next js website):

  • Data Fetching: Server Components allow you to move data fetching to the server, closer to your data source. This can improve performance by reducing time it takes to fetch data needed for rendering, and the amount of requests the client needs to make.

  • Security: Server Components allow you to keep sensitive data and logic on the server, such as tokens and API keys, without the risk of exposing them to the client.

  • Caching: By rendering on the server, the result can be cached and reused on subsequent requests and across users. This can improve performance and reduce cost by reducing the amount of rendering and data fetching done on each request.

  • Bundle Sizes: Server Components allow you to keep large dependencies that previously would impact the client JavaScript bundle size on the server. This is beneficial for users with slower internet or less powerful devices, as the client does not have to download, parse and execute any JavaScript for Server Components.

  • Initial Page Load, Total blocking time and First Contentful Paint (FCP) : On the server, we can generate HTML to allow users to view the page immediately, without waiting for the client to download, parse and execute the JavaScript needed to render the page.

What benefits do these changes bring and are they worth changes your application approach?

To validate if swapping to the app router approach with Server Components brings benefits I ran a test by migrating one of code bases I had for a XM Cloud website to Next.js 13.4 with App Router and Server Components.

These are the benefits I found when developing with the new functionalities:

  • Out of the box support for caching : the new functionalities allow support for React Cache which allows us to cache anything we would want that is accessed more often. This comes with options around cache invalidation which control how quickly to update the cache

  • Tagging for caches. With the pages router if is only possible to revalidate full url's and with the nes App router it is now possible to revalidate any page leveraging a cache/api request with a certain tagging. This allows new patterns of updating your pages after content updates.

  • API requests no longer limited to pages: with the app router we can now actually request data form components itself rather then doing it for a full page in 1 go. Although JSS offered a workaround it is certainly nice to now have this out of the box and have less customization.

Next to these benefits the biggest benefit I have seen is in regards to Pagespeed/Core Web Vitals. Whilst Next.Js has always been great at Core Web Vitals (certainly better then Asp.net) it had the challenge that it always had to rehydrate the full page when loading it in the browser, with many components this led to higher Total Blocking Time which determines roughly 30% of your Core Web Vitals. With Server Components we can now lessen this problem and this had a great result in my experiment: On mobile I went from 76 on mobile to 91 and the total blocking time went from 430ms to 0 ms. You can find the complete results below: with Next.js pages router:

With Next.js app router and server components:

In these results it is good to realize that for SEO some of the SEO features of the App router weren't turned on yet because I didn't have the time to convert it yet.

Overall the results with the App router with Server components approach are great and are definitely worth considering adopting. however as for if that's possible with the latest JSS...

Can we use the App Router and Server Components with JSS?

Now that we know its definately worth it to upgrade to Next.js 13.4 the question becomes: can we leverage these new functionalities with JSS? the answer to this question is actually yes & no:

  • No: we cant use these functionalities with JSS for Next.JS. It apparently is on the roadmap but unfortunately we cant use it out of the box.

  • Yes: If you build your own JSS adapter for Next.JS you can actually leverage the new functionalities. This is what I did to test it and is actually leveraging the base JSS SDK for Javascript. In the coming month I will be blogging around the process and sharing code on Github

So the conclusion is that you can get real benefits by leveraging Next.js Server Components and App Router and even though we cant use these with the JSS Next.JS SDK , fortunately Sitecore is a headless CMS and we can build our own connector to it.