Book Image

Next.js Quick Start Guide

By : Kirill Konshin
Book Image

Next.js Quick Start Guide

By: Kirill Konshin

Overview of this book

Next.js is a powerful addition to the ever-growing and dynamic JavaScript world. Built on top of React, Webpack, and Babel, it is a minimalistic framework for server-rendered universal JavaScript applications. This book will show you the best practices for building sites using Next. js, enabling you to build SEO-friendly and superfast websites. This book will guide you from building a simple single page app to a scalable and reliable client-server infrastructure. You will explore code sharing between client and server, universal modules, and server-side rendering. The book will take you through the core Next.js concepts that everyone is talking about – hot reloading, code splitting, routing, server rendering, transpilation, CSS isolation, and more. You will learn ways of implementing them in order to create your own universal JavaScript application. You will walk through the building and deployment stages of your applications with the JSON API,customizing the confguration, error handling,data fetching, deploying to production, and authentication.
Table of Contents (9 chapters)

Nuances of fetching data on the client and on the server

Servers and clients have different libraries that allow you to load data. In the browser, there are XMLHttpRequest and WhatWG Fetch API, and, on the server side, there are the Node.js default http and https packages. In order to load data universally (such as in an isomorphic manner,both on the server and on the client, using the same code base), we need to install an additional network layer.

There are two options here:

  1. The first option is to simply polyfill the WhatWG Fetch API, since it's natively available on the client side in browsers.

In order to do that, we should install a package:

      $ npm install isomorphic-fetch --save

And then, we require/import it anywhere before fetch() usages:

      import 'isomorphic-fetch';

(async () => {
const res = await fetch(...); // already polyfilled...