Next.js Improves Data Fetching

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.

{laodposition comment}

Last Updated ( Thursday, 19 March 2020 )