Using React Fiber with itsa-react-server

Itsa-react-server is a MVC framework for building server side rendered single page apps (SPAs) with React.js. In case you missed it: see here.

This article is about how to build your web application with React Fiber: FaceBook’s oncoming version of React(v16), which upgraded core algorithm significant increases rendering.

Introduction

When building pages with Itsa-react-server, you can use external packages in three different ways:

  • require/import a package inside your view or any React Component
  • require/import a package inside src/modules-general.js
  • define a package as an external module

Inside the view file or React Component:

In most cases, you will require/import them in the view or any other React Component where you need it. Doing it this way, webpack will bundle the package in the chunk that belongs with the view.

Inside src/modules-general.js:

This way, the package will be available in every view: webpack will bundle the package in every chunk. This is handy because you don’t need to require the same package in every view over and over again. However, it will lead to increased chunk sizes. If the package is not really small, you may consider defining it as an external module

As an external module:

When defined as an external module, the package will be inserted in the html-page as an external css (<link>) or javascript (<script>) element. This will lead into an extra request, however it will be cached on the client. We advise to do this with large packages only, because you don’t want first time visitors having too many initial requests.

React is typically a package that you need to define as an external module.

How to setup

Defining external modules takes two steps:

  • define the external module inside src/manifest.json
  • install/download the package

Defining external modules

Making a definition of your external modules is done inside src/manifest.json. There is a difference between external css vs. javascript files: css should be referenced by string, javascript files by an object. This is, because a javascript package will be bound to global variable by webpack: you can use its global reference.

In the first example, I created an external reference to the current version of React (v15), where the package is installed through npm i -S react.

Example external modules in src/manifest.json:

Note: External javasrcipt modules can be used by a global as specified by ref. Or, you can require them by the name of module

Because the default installation of React will give you React v15, you won’t be able to use React Fiber this way. To solve this, you have to download the package manually and put it into the folder externals. The folder externals is created for you to store packages that cannot be downloaded by npm.

Note: When itsa-react-server sees it should use external modules, it looks first in the folder externals. If the package isn’t found there, it looks in the folder node_modules.

The next example shows how to setup React Fiber.

Example external module React Fiber in src/manifest.json:

Note: there will be no folder react-fiber created inside node_modules. You will have to download it and put it in the folder externals. See the next paragraph.

Install/download the package

As told earlier: when itsa-react-server sees an external modules definition inside manifest.json, it looks first in the folder externals. If the package isn’t found there, it looks in the folder node_modules.

The second manifest.json example uses three external modules. We have to install them this way:

purecss.io:

npm i -S purecss

moment:

npm i -S moment

React Fiber:

Download the current master repository of React Fiber (or see https://github.com/facebook/react). Unzip the content and store it in the folder externals. To make the example work, the sub-folder should be renamed into react-fiber.

Note: npm i -S react isn’t working at the time I wrote this article: it would install React v15.

Now you’re ready to go!

During the build, your external packages will be copied to the folder: build/public/assets/_itsa_server_external_modules/version/package and therefore be part of your build.

Note: because the build automatically uses the version-nr of the external package, you are assured that package-updates will be used by your clients.

In the next article, I will discuss how to make itsa-react-server work with a cdn.