Website Upgrade to Next.js 10: Interview with Lin Engineering eCommerce Platform Developers

In September 2019 Apiko received a request to improve an eCommerce platform for Lin Engineering, a well-known expert in motor design, engineering and manufacturing. It was decided to migrate from WooCommerce and Wordpress solution to Reaction Commerce to achieve overall better performance, improve user experience, and scalability.

Although the client's goal was reached, and their new retail website with an intuitive interface provided visitors with extended functionality and much better user experience, it still required optimization to satisfy ever-growing online market demands.

According to the research conducted by Portent, an increase of website load time by 1 second results in about 4.42% drop in conversion rates. Besides lower core web vitals resulting in worse SEO, slow eCommerce applications are likely to be less trustworthy, as users may be concerned about personal data security and doubt successful completion of their financial transactions.

Since poor website performance results directly in revenue loss, it's critical for online retail shops to improve it as much as possible. As in our case Reaction Commerce utilized the Next.js framework, a recent fundamental Next.js 10 release was a green light to get down to website upgrade and optimization.

 

What is Next.js?

Unlike React, initially invented to build components, Next.js has been designed as an entire solution for building full web pages. Recently Next.js has released a much awaited major new 10th Version - an open-source, full-fledged, front-end JavaScript web application framework, featuring image optimization, performance analytics, enhanced internationalization capabilities, and more.

Next.js 10th release was much awaited, and our team of developers was looking forward to trying out all the new functionality. To completely understand their excitement and to find out how upgrading Lin Engineering eCommerce platform to the latter Next version influenced its performance, we asked Serhii Tsyb and Robert Skral to share their experience. Let's jump to the interview!

 

1. When migrating to Reaction Commerce, have you used Next.js 10 from the very beginning, or has there been a previous version of Next? 

Initially, when migrating to Reaction Commerce, Next.js 7 was used. Although it had Server-Side Rendering (SSR) feature, additional requests were necessary for retrieving the data needed for the page. Next.js 10 has allowed obtaining these data during the page build time, thus we got rid of extra requests and additional time to render.

 

2. How elaborate was the process of upgrading to Next.js 10? Any challenges with the upgrade?

During the update to the 10th version we have faced a couple of challenges. Next.js 10 routing has enabled us to make the pages more dynamic, which was impossible to do directly with its previous version. However, since Next 10 uses specific routing, we had to change every page according to its requirements. Because we use both SSR and Static Site Generation (SSG), these routes may conflict with one another, and require special attention.

Data queries needed to be remade as well, as it was necessary to indicate whether it's going to be an SSR or an SSG page.

 

3. What are the main things to pay attention to?

Routing. From the very beginning we needed to determine which pages will be static, and which will be server-rendered, and design the website structure keeping these details in mind.

Sitemap generation had to be done manually.

Statically generated pages have the feature of Incremental Static Regeneration (ISR). When you create a new static page in Next, you indicate the “revalidate” parameter, which stands for the time the data displayed on this page are valid. It can be set within a wide range from a few seconds to a few hours, depending on the requirements, e.g. for Lin Engineering pages it’s set to 2 minutes.

When a visitor opens the page, and the indicated time passes, they are still shown the cached version of the page. However, new data are being generated under the hood and saved in cache as an updated page version that will be loaded when the next visitor opens this page.   

It means that upon a request, a pre-rendered static page is retrieved by the server from cache. This should be taken into account when dealing with data critical for users (e.g. in case of eCommerce website it may be the product price). The issue was solved with an auxiliary check from the client, e.g. while the page is loading, we additionally make a request to the server from the client so the price gets changed up to date.

 

4. Is there anything you wish you knew ahead of time? 

Initially, we had used Client Side Rendering (CSR) a lot. We should have used more SSR instead, it would have made things less complicated.

 

5. What worked well, and what didn't? 

The overall experience with Next.js 10 was good. Font optimization and static generation are awesome.

Work with the image component was not that flawless, and took us a bit of an effort.

• Before the 11th version of Next.js there were no fallback images, resulting in a white placeholder view while the picture is loading. 
• It’s necessary to indicate image domains, which is not a big deal, however, you need to pay attention to it. If the image is taken from some other website, you have to upload it before showing it on your Next website. 
• When it comes to static page images, it’s better to set their revalidation time to maximum, so they are saved in a browser cache for as long as possible. For example, on the C3 hosting that we use, the cache is set up to max age that is 3 months, however, this time can not be longer than the revalidation time set for Next images.
• For each request of the image that is being resized an internal request is formed that crops and comprises this image. This solution can work faster if you have an opportunity to convert these images while loading them from the backend, and provide the URLs for different image sizes.

Anyway, Next images are great for SEO, and the situation has improved considerably with Next 11, however, before the image gets loaded, the blank space may not always look well to users. 

 

6. Which new Next 10 features were implemented? Which ones of them do you find of primary importance for online retail shops? 

We still benefited greatly from SSR, which had already been available in the previous version of Next, using it for the content that changes frequently or requires higher control. Among the new features I’d point out

• SSG - allows static pages generation
• ISR - data for static pages are, in fact, dynamic with the defined period of time
• Image component: Next.js allows using not only built-in automatic image optimization for apps hosted on Vercel, but also optimizing images with other server providers
• Dynamic routes. Let's suppose we have Strapi where a client can create new static pages or news articles. Since initially these pages don’t exist, there’s a dynamic route created to contain all of them (one for all these pages /news/[...articlesSlugs]). When the first visitor navigates to a new article, Next attempts to generate a page using this route. If such a page exists, it is generated and shown to the visitor, remaining available for further visitors too. It takes a bit more time for the first user to load the page, but for all succeeding users it loads almost instantly. 

Among the features that are certainly great for eCommerce websites, however, that have not been used for Lin Engineering I’d like to point out the following ones:

• Internationalization support: automatic routing for the indicated locales (usually with determined language and region) that is truly beneficial for SEO 
• Advanced analytics allows monitoring the app's performance and assessing it according to real-life visitors' interactions by making the key measurements continuously. It's a powerful tool, however, it is available only for all applications built with Next.js 10 or newer releases that use Vercel hosting, and also for those apps, hosted elsewhere, that use Pro or Enterprise Vercel plans.
• Adding component level CSS looks promising, however, we have used Material-UI instead.

 

7. What advantages of Next.js 10 have you experienced? Could you describe them in more detail, please?

• Improved User Experience. First of all, the loading speed has increased.  Static data are previewed within link hover. In addition, when loading a page, all the static links are prefetched and instantly visible to the user, making transition between such pages nearly unnoticeable and seamless.
• SEO efficiency due to higher loading speed and well-designed app structure that are vital page ranking factors, and numerous new features including
• images
• fonts
• new script tags in Next.js 11, and script component that allows setting the order in which the scripts are loaded, facilitating the loading performance
• Next allows making dynamic meta tags for each page, and creating HTML during the page build time
• a combination of SSR and SSG is much better for SEO, compared to CSR
• Advantages for eCommerce and marketing are a direct aftermath of the improved user experience and SEO efficiency. On top of that, with Next.js it's possible to omit the restrictions of templates imposed by eCommerce platforms and achieve a high level of customization. All of the mentioned above eventually leads to higher conversion rates.
• Benefits for development. 
• Ease of website development: in fact, it’s React, but more optimized for business needs and designed for SEO. 
• Fast refresh: enhanced hot module replacement that enables seamless components editing and updating
• And much-much more... 

 

8. How to optimize LCP and Speed Index for Next.js website?

When possible, use SSG or SSR. Pay special attention to optimization of images, fonts and script.

 

9. How has the website performance changed after the update to the 10th version of Next.js? 

The website became much faster, with instantaneous growth of SEO indicators. The average page performance has improved by 3-5 times, however it is not perfect yet, and should be further optimized. 

According to Google PageSpeed Insights, Lin Engineering website performance for static pages is estimated at about 60-70% (orange scale), while for some SSR pages it reaches up to 80%.

 

10. What, in your opinion, should be further improved for Lin Engineering website?

The most important thing now is to work on minimization of the web bundle size, since it’s probably the only blocker that has prevented reaching even higher performance after the optimization.

 

11. To sum this all up, what are your top 3 pieces of advice when upgrading to and working with Next.js 10 and 11? 

Next.js 10 provides us with multiple great features, but make sure to use them appropriately, depending on the needs and requirements.

1. The documentation is truly wonderful, use it attentively. Use the style guides as well, Next has numerous practical examples of implementation of different features.

2. Pay attention to the peculiarities of operation of Next.js router, scripts, and images in case they are used in your application.
3. It's a good idea to check the page performance indicators upon the page deployment to be able to correct what's needed during the development process, and return to that page only when its improvement is required, making the optimization more smooth and enjoyable.

   By the way, Apiko DevOps department practices saving the results from Google PageSpeed Insights after deploying any changes to stage/production. Thus they are able to correct what's needed, and monitor if the page slows down over the time.

Thanks to Serhii and Robert for the informative interview! If you still have any questions about their experience with Next.js 10, do not hesitate to contact Apiko, our team will be glad to help you.