I've been playing with Next.js over the past week and finally decided to make a switch. Until now, React plus fetch functions were generating the content on the client. 

These were the results for both mobile and desktop devices with pure React:

![First Contentful Paint React mobile](https://github.com/erikmartinjordan/Screenshots/blob/master/Captura%20de%20pantalla%202022-02-01%20a%20las%2012.04.15.png?raw=true)
![First Contentful Paint Next desktop](https://github.com/erikmartinjordan/Screenshots/blob/master/Captura%20de%20pantalla%202022-02-01%20a%20las%2012.04.48.png?raw=true)

The metrics were pretty good for both devices, but the first contentful paint (FCP) was ~2 s on mobile devices. 

## Next.js

Next.js has different modes, but I'm using the one which returns static pages after building the site. Next.js generates a bunch of static `html` files ready to deploy (no need to fetch the content in the client).

Here are the results:

![First Contentful Paint Next mobile](https://github.com/erikmartinjordan/Screenshots/blob/master/Captura%20de%20pantalla%202022-02-01%20a%20las%2012.07.17.png?raw=true)
![First Contentful Paint Next desktop](https://github.com/erikmartinjordan/Screenshots/blob/master/Captura%20de%20pantalla%202022-02-01%20a%20las%2012.07.32.png?raw=true)

Next.js has improved the first contentful paint (FCP), setting the bar at < 1 s. However, the time to interactive (TTI) and the total blocking time (TBT) perform quite worse than using pure React and fetch functions. 😅

Why I've decided to deploy the blog using Next.js anyway?

Because most users access the site via desktop, the performance seems better overall. Let's see if I can figure out how to improve TTI and TBT on mobile devices in the future.

This blog is built with Next.js now

Next.js

More articles