Next.js meets Firebase and mobx | I

Episode 1 | next.js SSR fundamentals

Just recently I wrote about not using meteor any more as a “one size fits all” solution — not because meteor is bad — but because there’s other cool stuff which will no doubt convince you by giving it a chance. In this short tutorial series we are going to use the next.js shiny thing in combination with firebase as the database layer and mobx as state manager.

This is not a next.js, firebase promo tour :) I will certainly find things which are super annoying and I’ll also report them (until now next.js css handling is irritating to use, but they are working on it).

Vision

Over the next few articles we’ll recreate https://tagbag.today. The app consists of an individual input field which allows you to enter one single word or sentence per day. Originally, this was a hackathon project from a few months ago using create-react-app, mobx and firebase.

Topic

This article will cover the basics of ssr with mobx and next.js and not touch firebase at all — if this is boring stuff for you, you may enjoy the followup firebase-auth article.

Preparation

Let’s first initiate a new project and add all the dependencies we need.

npm init

npm install --save next react react-dom mobx mobx-react firebase

npm install --save-dev babel-plugin-transform-decorators-legacy babel-root-import

̶U̶s̶i̶n̶g̶ ̶b̶e̶t̶a̶.̶1̶8̶ ̶h̶e̶r̶e̶ ̶a̶s̶ ̶i̶n̶ ̶b̶e̶t̶a̶.̶1̶9̶/̶2̶0̶ ̶i̶s̶ ̶a̶ ̶b̶u̶g̶ ̶w̶i̶t̶h̶ ̶m̶o̶b̶x̶.̶ ̶I̶’̶l̶l̶ ̶u̶p̶d̶a̶t̶e̶ ̶t̶h̶i̶s̶ ̶p̶o̶s̶t̶ ̶a̶s̶ ̶s̶o̶o̶n̶ ̶a̶s̶ ̶t̶h̶e̶ ̶i̶s̶s̶u̶e̶s̶ ̶a̶r̶e̶ ̶r̶e̶s̶o̶l̶v̶e̶d̶.̶ (issue was resolved in beta.26)

Babel

The babel plugins are optional, but I included them as they make things more readable.

Decorators: I like the decorators pattern — if you don’t, just use the wrapper functions instead. The mobx documentation is pretty awesome so you’ll figure out how to refactor the @ decorators :)

Root-import: I tend to be confused by relative ../../../ madness — babel-root-import basically allows you to write ~/ instead (where ~/is the root of your source code).

Next.js automatically parses your .babelrc so let’s add the file containing the plugins.

{

"presets": [

"next/babel"

],

"plugins": [

"transform-decorators-legacy",

"babel-root-import"

]

}

Next

Last thing left is to add the next.js scripts in package.json so that we can easily start/build from command line.

”scripts”: {

“dev”: “next”,

“build”: “next build”,

“start”: “next start”

},

Getting started With SSR

Why

Server-side rendering is an important part of almost every js based web-application. There are two main goals we want to archive:

serve a useful initial DOM, so that e.g. twitter and facebook can display rich snippets of your website. performance — there are edge cases in which ssr can also slow you down, but we won’t go into that

I won’t go into it too deeply as there are already good articles on why and where to use SSR: just to name one

How

SSR basically works like this:

The server initially generates the DOM and sends it down to the client. The client renders the DOM. The client waits until resources are loaded and javascript is evaluated.

Just after that, the client generates the initial DOM itself and compares its hash to the servers one. To avoid unnecessary re-renders the server should generate the same DOM as the client. This means that the first render must be deterministic!