It’s been a while since Airbnb Engineering Team published a blog post about universal web apps. Let’s review the 2017 state of them and create a simple example using Next.js framework.

By dictionary, the word isomorphic means:

being of identical or similar form, shape, or structure

The above sentence is of true for Isomorphic (Universal) Web Apps as well.
Universal Web App is the app that shares code between backend and the server. Typically, the backend creates application state and renders its initial view. The rendered content is being sent to the browser, then every following request will be handled in browser, by the client app.

The following image ilustrates the flow:

Adopting mentioned architecture generally means that you can support both JS and non-JS clients, like search engine crawlers or older PC users.
Next.js is a framework that supports Server Side Rendering out of the box and we’re going to use it in our example app.

Getting started

I assume you have Node and NPM installed and working correctly.
The command node -v should produce output similar to this:

v8.1.3

Create an empty directory and move inside it. In my case it will be next-js-blog:

mkdir next-js-blog
cd next-js-blog/
npm init -f

The last command above will create empty package.json file. Now we’re ready to move to the main part of the example.

Install Next.js using the following command.

npm install --save next react react-dom

Add the following section to your package.json file:

"scripts": {
 "start": "next"
}

In Next.js creating new pages is super easy. What we need to do is create a new directory called pages and create a new file inside. Filename reflects page URL co be careful with that. Let’s create a file named index.js and paste the following content into it.


export default () => <div>Hello! I'm server rendered!</div>;

When you save the file using your favourite code editor, go back to the terminal and run the following command, then you should be able to see your freshly created Next.js powered site in the browser 🙂

 npm run start

The output will be like:

DONE Compiled successfully in 1585ms

> Ready on http://localhost:3000

Then you’ll be able to see the page in browser:


…and its source code, including all the markup, rendered on the server:

What to do next