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

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:

Things we didn’t like:

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:

Things we didn’t like:

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

Client Stage

What this means for your users:

What this means for your developers:

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store