Why you should try next.js ?

Next js is a react framework for building single page applications(SPA) with lot of benefits than react itself.Next js makes a developers life easier through several tools and conventions available out of the box. Lets discuss why you should try next js as a next step in your react stack.There are numerous but let me discuss whats essential to know from a react developers perspective.

In Performance...

Automatic code-splitting

Unlike react it wouldn't bundle your whole code into a single file and next js is clever enough to only load the javascript and css required for any given page.

This increases performance as there is less for the user's browser to download.

Image Optimization

Next js is smart enough to serve correct size images according to your device. What do I mean by that ? Lets have a look at the screenshots

I am on the next js official website. So for the larger devices the images loaded in the network tab is kinda large and for the small devices its different right. This is a very big optimization I'd say because it enhances user experience. Underneath it use next js image component is an extension of HTML img element. Excellent right!. Yes it is.

Other than this we have Minifying Files, pre-fetching assets are the notable in the performance tab.

Different Rendering Techniques

Static Site Generation (SSG)

As the name suggests, Static Site provides a content that is not dynamic in the web page.

In next js, all your content are pre-built and served to the client as an HTML file, assets such as JS and CSS and it is cached. If you try to re-navigate to the page, it will be provided from the cache.

Let's discuss about the use cases , when to use SSG ?

If you have marketing content that makes use of SEO, Blogs, rich web content that should be provided in no-time scenarios can be applied.

The biggest disadvantage of using SSG is that the build time can get very long as your application grows.

Incremental Site Generation (ISR)

As I said, If I use SSG, build would take some time, but what if I tell you that you do not want to build all the content in one go but in way you can fetch those on the go. Excellent Right!.

ISR enables the user to use Static Generation on a per-page basis, without needing to build the entire site

Static Pages can be generated at the run time instead of build time.

It provides a window-time to cache the pages after that it will be refreshed/regenerated.

Server Side Rendering (SSR)

SSR describes the process of pre-rendering the page on the server, which is then generated upon each request.

In React ,you have to wrap a server around your client application, but next js provides a handy way to make this scenario possible.

When the pre-rendered pages reaches the browser, Javascript code is run to make the page interactive. This elevates the performance makes the load speed faster.

This is what I feel the most essential to know to kickstart into Next js. Refer https://nextjs.org/ for more. Thanks