NOC Diary Week 5: NextJS

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.

Marcus Tang
Marcus Tang
Marcus is a 2nd year computing student at the National University of Singapore. He has great passion in Computing and both Frontend and Backend engineering.

Latest posts

Django Periodic Task with Celery Task Queue

Task Queue? Periodic Tasks? What are they? Task Queue is a way of organizing work or tasks in programs asynchronously, without a user’s request, and distribute...

Understanding Models, Views and Serializers in Django

Soo we are back once again this week, talking about models, views and serializers — essentially everything you will need to get an up-and-running...

Creating a Django Web Application with a PostgreSQL Database on Windows

At some point in time, you will foray into the realm of web development. With the many frameworks out there, you may be confused...

More from author

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related posts