Server side rendered React with Next.js

The idea of building a server side rendered application in React seems like a dream to many PWA enthusiasts.

Perhaps to more audaciously put it, the holy grail for an isomorphic universal web application.

Since it's initial release back in March 2013, React has taken the javascript world by storm, with it's painless yet highly intuitive way of building UI components that can manage their own state.

As React grew in popularity, thanks in large to the consistent input and support from the wider community, including that of React's Core Engineering team at Facebook, a bolder question began to be asked: could an app be both client and server rendered as a means to leverage the SEO benefits that most search engines hold web developers to account. To better put it, a server rendered website built on top of a client application.

An application rendered on the client (e.g. browser) presents a fundamental issue at the heart of the this articles topic

What you see in the page source (the body content rendered by the server) is what ultimately get's crawled by the search engine.

For client-side applications, this mean't that a bunch of compiled, uglified and most likely polyfilled javascript code was at the heart of the content crawled the search engine.

This played havok for apps looking to leverage SEO as a means of building the userbase. The idea of not making Page 1 for a Google Search is something akin to web graveyard.

The introduction of React Router to the fold presented an opportunity to utilize both Static and Browser Router methods as higher order component wrappers, but came with excessive boilerplate, plus challenges with configuring middleware for param routing and asynchronous data fetching.

These days you'll find plenty of SSR/React/Router templates or generators within the Github community, however over the last year or two, a much simpler approach to this problem has joined the fold.

Next.js

Next.js is a lightweight framework that simplifies the way of creating static and server rendered react applications.

Built with automatic code splitting, Babel 7 transpilers, static file serving, hot code reloading, a file system API that renders each `.js` page as a route

and setup in as little as 5 minutes

Blazingly fast load times

Once your project has been built

and compiled, we can deploy our app to production

and analyse the load time for each page transition.

For the home page of this website, we registered a load time of 1.34s

Very impressive!