⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

Tanner Linsley
Oct 5, 2017 · 9 min read

Last updated on June 26th, 2018

At Nozzle.io, we take performance and user/developer experience very seriously. We’ve built and launched tons of sites using different static site tools that claim to solve the worlds problems, but we had yet to find one that satisfies our wildest dreams. While we highly appreciate the following libraries and the insight they provided us, our evaluations left us wanting more. Here’s our review:

Next.js

Next started as a “minimalistic framework for server-rendered React applications”, then later announced support for exporting to a static site. Given the massive amount of stars it had acquired on Github and the fairly quick and easy setup, it seemed very promising. When it comes down to its isomorphic functionality, it’s hard to match. But when it we started using the static export features, we were dropped on our faces with a very ungraceful transition from isomorphic to static that came with a cold side of faulty hot-reloading, strange routing strategies and highly bloated bundles:

Things we liked:

  • Very easy to get started

Things we didn’t like:

  • Great experience for isomorphic apps, but experience for static functionality & static hot-reloading was second-class (most of the time, hot-reloading didn’t work at all for static routes).

Gatsby

Gatsby is a very popular static-site generator for React. Some very notable sites like reactjs.org and segment.io/blog are built using Gatsby, so it’s definitely a library to be taken seriously. We, like many others, were drawn to it because of it’s specific focus on static sites, better build speeds and navigation performance. To say the least, it was 10x better than using Next. After using it for a few weeks, we ended up much closer to where we wanted to be, but not without a few annoying bumps in the road:

Things we liked:

  • Very fast browsing & exporting. This served as the inspiration for React-Static’s similar architecture.

Things we didn’t like:

  • When it came time to introduce dynamic data into our sites we were faced with the decision to use an existing Gatsby source plugin, or build our own. When deciding to build our own, the process and API was very confusing, lightly documented and not as fluid as we hoped it was going to be.

The Post-Mortem Realization

We finally knew how much we had been spoiled building enterprise apps with React and it was very clear we needed a tool that behaves more like an SPA and less like an isomorphic rendering framework. We desperately wanted to ditch any overly opinionated or proprietary schemas (including GraphQL) and finally put the kibosh on component-colocated data queries.

The flow of data from your site’s source to finished product should be dead simple and give you all of the flexibility you need.

The tool we started architecting from these experiences made us feel more confident than ever that we could achieve a better experience for both users and developers, and bring the freedom we took for granted building React SPA’s to a static-site-generator.

Introducing React Static!

A progressive static-site framework for React, designed to deliver an amazing experience for your users and developers alike, without compromising React in any way. It’s insanely fast, SEO-ready, and is the most React-friendly static-site library on the planet.

Let’s get to it.

How is it different?

Contrary to most other static site generator for react, React-Static is very direct with how data flows from its source to a route. Not only does this provide a convenient abstraction point for managing all of your static data, but by keeping the data pipelining and react templating as separate as possible, your site can be built as a “function of state” with only a single pass of SSR!

Dev Stage

  1. All of the data your site needs to render is gathered up-front in a configuration file using any means you want. This data can come from Markdown files, headless CMS's, Graphql endpoints, public API’s... anywhere!

Client Stage

  1. On the user’s first page, the statically exported HTML and CSS are downloaded to show the content as quickly as possible.

What this means for your users:

  • Instant browsing & instant gratification. Your site works at the speed of React, and there is no waiting for a page to load

What this means for your developers:

  • Painless development & migration. There are very few differences (or changes to be made, if migrating) when compared to apps created with create-react-app, or any other SPA style react build system. There are no schema’s to learn, and no syntax to get used to. It’s just good ol’ React & Javascript!

Ready to see it in action?

We have a growing list of sites that are built with React-Static!

Get started in 60 seconds

Install react-static as a global:

$ yarn global add react-static
# or
$ npm install -g react-static

Create a new project:

$ react-static create

Follow the instructions and start hacking!

Built with ❤️ from Nozzle.io

Tanner Linsley

Written by

Working on building better #react-tools for everyone! · Front-End Dev & Co-Founder @nozzleio · #react-static #react-table #react-form #react-move⚛