This week concludes the fifth week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme. When I first started working on UrbanCV, it was the first time I had heard of Next.js. However, it was generally easy to pick up and turned out to have very interesting optimisations.
Next.js is a relatively new frontend framework that is built on React (a popular frontend framework). Next.js is becoming ever more popular as it tackles a problem that frameworks like react and angular face, that large bundles of javascript were being used for everything (even for simple static pages such as ‘About Us’) in a site for Client Side Rendering, which causes higher load times and search engines having a harder time crawling and indexing the site.
Next.js solves this by pre-rendering every page, generating HTML for each page in advance, instead of having it all done by client-side JavaScript. The generated HTML is associated with the minimal JavaScript necessary, and hydrates the page when it is run on the browser to make the page fully interactive. It does so via one of two ways: Static Generation and Server-side rendering.
Static Generation is when HTML is generated at build time and will be reused on each request, and is the recommended way. If the pages require external data (such as a list of blog posts), the external data can be fetched at build time. This is typically used when you can pre-render a page ahead of a user’s request and since the page can be built only once and served by CDN, it is much faster than having a server render the page on every request. This can be used
Server-side rendering (also known as Dynamic Rendering) is when the HTML is generated on each request. Next.js pre-renders a page on each request, which will be slower because the page cannot be cached by a CDN, but the pre-rendered page will always be up-to-date.
Using Next.js comes with many benefits, such as improved Search Engine Optimization (SEO), as it improves the visibility in search engines, enabling us to enjoy the best of both worlds of having the same interactive website, but with the SEO benefits of a static website. There is also a performance boost as Next.js frees the browser from having to download and execute a whole lot of JavaScript code at once, it has the potential to greatly improve metrics such as time to first draw. This is an important metric as a long wait for page loading can increase the bounce rate of a site.
