⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!
Looking for the follow-up article? Find it here: Dogfooding React Static for a month: Static-site heaven, upgrades, community growth and roadmap!
Why another static-site generator?
At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these goals, but we have yet to find one that satisfies our requirements completely. Though each tool was unique and useful in its own way, we managed to pare down our list to the two following libraries:
Next is technically a “minimalistic framework for server-rendered React applications”, but just recently announced support for exporting to a static site. At first glance it looked like the easiest library to get started with, so we gave it a try. Initially, Next felt very promising. It can do exactly what it claims, which is export a Next.js app to a static site. How well that static site performs and how easily you can build that site is another story.
- Very easy to get started
- Well documented
- Subpar dev experience for static functionality & static hot-reloading
- Large per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.
- Difficult root component customization
- Destructive routing. This also means no routing animations, and no lifecycle purity, even for layout-level components. :(
- Exporting was very slow. Most likely because it is creating a JS bundle per page.
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 speed of export and navigation performance. After a very painful migration, it did get us even closer to where we wanted to be, but we still had a few hiccups:
- Fast browsing & exporting
- Aggressive preloading
- Intelligent code splitting (templates + page data)
- Mature plugin ecosystem
- Gatsby can be very configuration heavy, even for achieving simple data flows. Most of that configuration relies on plugins being installed as node_modules or local file-system directories. Though there seemed to be a plugin and a knob for just about everything in gatsby, we really missed the simplicity of tools like create-react-app and create-react-native-app.
Having our cake and eating it too.
We were finally realizing how much we had been spoiled building traditional apps with React and it became very clear to us at this point that we need something that behaves more like a React app and less like a Wordpress templating system. We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.
Most importantly, we needed a tool that would allow us to build things like an SPA and make us static-site superheroes without us even knowing.
The tool we started dreaming up just a few months ago 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 apps to a static-site-generator.
Finally, React Static.
A framework designed to make our wildest static-site dreams come true and help everyone painlessly build next generation, high-performance websites for the web.
react-static you can deliver an amazing experience for your users and developers alike, without compromising React in any way. It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.
Let’s get to it.
How does it work?
react-staticstarts by exporting a single JS bundle, which includes every template for your entire site. Next, it exports an HTML and JSON file for every route. Any of these routes can provide data to connected components that render on that page. To connect a component to this data, you use a convenient HOC called
- The HTML files generated by
react-staticensure that pages load instantly and are optimized for SEO.
- Once the page is loaded, your site invisibly and instantly transitions to your react app.
- At this point, navigating around your app will feel instantaneous because only the necessary JSON for the next page is prefetched prior to displaying it.
Why is this so great?
- 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 standard react build system. And, if you’re already using React-Router, you likely won’t have to change anything at all!
- Redux, Lifecycle Security, Route Animations & more!
react-staticdoesn’t use any strange routing techniques or custom lifecycle methods, which means there is absolutely no
ReactDOM.render(), or any other destructive methods being used for navigation. It’s just good old React, so you can thoroughly rely on everything functioning how you would normally expect it to, including component lifecycles and state managers.
- Data & Query Agnostic. You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages. With
react-static, supplying and using your data is as simple. Fetch it at build time, supply it to your routes, and use the
getRoutePropsHOC. It’s heavenly, and it also makes testing your data and your components a breeze.
- Lean builds for today and 2 years from now.
react-static’s approach to code-splitting ensures your page data is optimized and stored separately from your JS bundle as JSON files. This means the main JS bundle will not grow in size with the amount of content on your site. Not only does this significantly improve build times for sites small and large, but also decreases the amount of duplicate code required to be downloaded by the client. All of this means faster browsing for your users, and more productivity for the developer.
See it in action!
Visit Nozzle.io to see it in action!
Get started in 60 seconds
react-static as a global:
yarn global add react-static
$ npm install -g react-static
Create a new project:
$ react-static create
Follow the instructions and start hacking!
Read the follow-up article: Dogfooding React Static for a month: Static-site heaven, upgrades, community growth and roadmap!