Next.js Improves Data Fetching
Written by Kay Ewbank   
Thursday, 19 March 2020

There's a new version of Next.js that focuses on static site generation. Next.js is an open-source toolkit for universal, server-rendered (or statically pre-rendered) React.js applications.

Next.js is described as an intuitive page-based routing system with support for dynamic routes. It automatically statically optimizes pages when possible, and carries out server-side rendering of  pages with blocking data requirements. It has client-side routing with optimized page prefetching, built-in CSS support, and support for any CSS-in-JS library. API routes are used to build your API with serverless functions, with the same simple router used for page, and it is customizable with community plugins and with your own Babel and Webpack configurations.

nextjs

The first change to the new release is the addition of new data fetching methods that add built-in optimized static generation. The team behind Next.js says it is the first hybrid framework, letting you choose between static generation (SSG) or server-side rendering (SSR) on a page by page basis. Next.js 9.0 introduced the concept of Automatic Static Optimization, meaning when a page doesn't have blocking data fetching requirements, it will be automatically rendered to HTML at build time. Even with blocking data fetching, you might want to render a page to static HTML at build time, though.

The new release adds two new data fetching methods: getStaticProps and getServerSideProps, along with include a way to provide parameters to statically generate static pages for dynamic routes: getStaticPaths. The new methods provide a clear distinction between what will become SSG vs SSR. The new release also adds a preview mode that can bypass statically generated pages to display drafts from a CMS.

There's now built-in Sass support for global stylesheets, and applications can now directly import .scss files as global stylesheets. Built-in Sass CSS module support for component-level styles has also been added. This makes use of the .module.scss convention, meaning locally scoped CSS can be imported and used anywhere in your application. The runtime size for all Next.js applications has also been reduced through optimizations.

nextjs

More Information

Next.JS Site

Next.JS On GitHub

Related Articles

Next.js 5 Improves Webpack Support

TypeScript 2.7 Improves Type Inference 

React 16 Adds Fragments

 

 

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, Facebook or Linkedin.

Banner


Google Launches Learn For Developers
08/10/2020

Google has announced the launch of Learn, described as a new one-stop destination for developers to achieve the knowledge and skills needed to develop software with Google's technology.



Couchbase Connect Goes Online
02/10/2020

Couchbase has virtualized its annual NoSQL developer conference, Couchbase Connect, and is offering three days of free content on Couchbase for developers - who can sit on their own com [ ... ]


More News

{laodposition comment}

Last Updated ( Thursday, 19 March 2020 )