React Static: A progressive static-site generator for React

Performance and user/developer experience are highly important to us at Nozzle.io. We've created and launched a ton of sites using various static site solutions that promise to fix the world's issues, but we haven't yet discovered one that lives up to our highest expectations. Even while we really value the following libraries' contributions and the knowledge they gave us, our evaluations left us wanting more. Here's how we rate it:

Next.js

As a "minimalistic framework for server-rendered React apps," Next first introduced exporting to a static site as a feature. It appeared to have a lot of potential given the enormous number of stars it has amassed on Github and the relatively quick and simple setup. It is difficult to match in terms of isomorphic functionality. However, as soon as we began utilizing the static export capabilities, we were met with an ungracious switch from isomorphic to static, complete with erroneous hot-reloading, odd routing schemes, and bloated bundles:

What we liked

  • very simple to begin
  • properly documented
  • a sizable community

Things that we disliked

  • Excellent experience with isomorphic apps; nevertheless, static functionality and static hot-reloading were subpar (hot-reloading frequently failed for static routes).
  • Data needs and template colocation. (Much more below, but to give you a little preview: it sounds like a wonderful concept, but it turns out to be quite disastrous for performance and DX.)
  • JS packages that are excessively big and many! Every route featured a JS bundle, which amounts to a lot of extra duplicate code being created and downloaded, as we discovered. For some strange reason, Next provided us a big bundle not only each template but also every route. Normally, code-splitting functions on the template level, providing extremely little and bite-size portions of code to be gradually loaded as you traverse. That is a lot of webpacking, and we don't like it when it goes beyond what is required.
  • damaging route. According to our observations, this led to excessive amounts of pointless component redrawing and poor lifecycle integrity between pages. Even components at the layout level have trouble keeping their state throughout navigation, according to our research. Overall, it simply didn't perform as you would anticipate a react app to.
  • Exports moved slowly. We discovered that the major reason for this was data colocation in templates along with a tree-walking SSR technique. Additionally, Next's demand that a large JS bundle be created per route rather than per page template cripples speed.
  • Complex and challenging codebase. We want to contribute to the programs we use since we are open source developers, and we have even tried! Unfortunately, Next has a fairly sophisticated codebase for a static site generator, mostly because it depends on supporting its primary isomorphic use-case. When we sought to further the development of its static-export capabilities, this made it a very challenging process.

Gatsby

A well-liked static site generator for React is Gatsby. Gatsby is a library that has to be taken seriously because it's been used to build some extremely well-known websites, like reactjs.org and segment.io/blog. We were lured to it, like with many others, because of its emphasis on static sites, faster production times, and improved navigational performance. It was, to put it mildly, 10 times better than using Next.

  • Fast exporting and browsing. The comparable architecture of React-Static was influenced by this.
  • aggressive loading before.
  • code splitting done right.
  • mature community and ecosystem for plugins.
  • processing images

data query colocation with templates This choice adds a lot of cognitive and processing overhead to the project and builds, similar to Next. It mandates that the data be retrieved and queried from the database at dev and build time by running all of the queries listed in the template files.

We weren't sure where the data was coming from or how it was getting into our components because it appeared to be placed on the template's properties by magic once the query was resolved.

Most people believe that colocation makes it simpler to reason about component data at the microcosmic level, but at the broader level, it dilutes the abstraction point for managing data from a central place. We wished we had a more centralized area to manage data as well as a clearer method of consuming it. Our components, in our opinion, should be data consumers, not creators.

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

A progressive static-site framework for React that is intended to provide a fantastic user and developer experience without jeopardizing React in any manner. The world's most React-friendly static-site library, it is crazy quick and SEO-ready.

Let's start now.

How is it unique?

React-Static is highly direct with how data travels from its source to a route, in contrast to the majority of other static site generators for react. Additionally, by keeping data pipelining and react templating as distinct as possible, your site can be created as a "function of state" with just one pass of SSR! This offers a nice abstraction point for handling all of your static data!

Dev Stage

  1. Any method you choose is used to gather all the information your site requires to render in advance in a configuration file. Markdown files, headless content management systems, Graphql endpoints, open APIs, and more may all provide this data.
  2. The next step is to create a list of every route on your website, establish a template for rendering it, and then provide each one the necessary data. It's as simple as giving out kudos!
  3. You may access the data for each route and develop your app as usual using React-components Static's like RouteProps and SiteProps.
  4. Then, React-Static can accurately and quickly export each page on your site.
  5. Upload your website to your preferred CDN or static-site server!

Customer Stage

  1. To display the information as rapidly as possible on the user's initial page, the statically exported HTML and CSS are downloaded.
  2. The minimal minimum of JS is simultaneously downloaded so that React may bootstrap on top of the displayed HTML.
  3. The remainder of the webpage is as soon as feasible pre-fetched and cached using code splitting and data splitting.
  4. All subsequent navigation is immediate!

How this affects your users

  • Instant satisfaction and instant browsing. Your website loads pages quickly thanks to React, so you never have to wait.
  • Interactivity with React at full speed. For your consumers, you could create a full-fledged SPA while still utilizing SEO and the progressive/distributed superpowers of a static-site.

How your developers should interpret this:

  • Development and migration are painless. When compared to apps generated with create-react-app or any other react build system in the SPA paradigm, there are relatively few differences (or adjustments to be done, if migrating). There aren't any schemas or syntaxes to become acclimated to. It's just plain old Javascript and React!
  • Route animations, lifecycle security, and more! React-static does not utilize dangerouslySetInnerHTML or any other damaging navigational techniques because it is based on react-router version 4 and never employs custom lifecycle methods. Everything, including component lifecycles and state managers, will work as you would expect it to because it's simply plain old React.
  • Data and Query Neutral. The last thing you need is an extraneous GraphQL layer or custom component lifetime getting in the way of your data and your pages because you've already put a lot of effort into gathering and arranging all of the data for your website. It's simple to provide data to your routes with react-static. Simply gather what you want and send the information to your routes all at once. To consume this data anywhere on your site (render props, HOCs, we've got it all! ), utilize a variety of react-static components. You can write 3x less code for your data pipeline and have a central spot to control the form of your data by consolidating data intake, querying, and prop mapping into one area.
  • Lean builds for now and in two years. The extremely distinctive way that react-static approaches data-splitting guarantees that each route's template and data are optimized and provided as a materialized and distributed API. This implies that even if your website has tens of thousands of pages, it will still load quickly. Again, react-build static's times are incredibly quick because all data fetching is done at the same single stage.

Awaiting its execution?

A rising number of our webpages were created 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!