Initial Server Response Time

Next.js offers the a vast toolkit of mechanisms with which to optimise the performance of a website written in React. If SEO is important to your site, optimising it's performance will be critical to boosting it's SERP rankings, not to mention your bounce and in Chrome. Lighthouse can also be included as part of your as any installed extensions can and likely will negatively impact your scores.

There are several ways to improve the performance score achieved in Lighthouse. In this article I shall explain the techniques employed by our team to reduce one of the most critical performance measures - the Initial Server Response Time.

is a directory of shopping mall directories and has well over 30,000 pages of merchant screens. Previously merchant pages were run from a single dynamic page using getServerSideProps. Now each page needed to be generated at build time.

Since each page involves database fetching this increased our build time to well over an hour which proved to be a real issue as Vercel, which only allows a hard maximum of 45 minutes of build time. Anything in excess of this time will result in a deployment failure.

Navigating Vercel's Build Time per Deployment Limit

Vercel's 45 minute Build Time per Deployment limit extends across all their plans from Hobby, Pro or Enterprise so simply upgrading your plan will not help.

This limit then will affect any website using getStaticProps which has a large number of pages which are database driven.

To circumvent this issue we created a node.js script which runs at build time which queries the database in parallel batches. This script builds a series of json files which reside locally on the build server.

By querying these json files at build time rather than a remote database we were able to massively reduce the time required to build each page and took us under Vercel's 45 minute build time limit.

Conclusion

Moving from getServerSideProps to getStaticProps was by far the biggest win in allowing us to improve our Initial Server Response Time metric to the high 90s. By shifting the database queries to build time and not page request time you shift the pain to your build process and away from the end user who benefits in a much improved zippy user experience.

Your SEO will noticeably improve as result as itis well documented that Google rewards web pages with fast load times.