|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.
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
|Last Updated ( Thursday, 19 March 2020 )|