React Static v6!

Tanner Linsley
3 min readDec 13, 2018

--

A door with the number 6 painted on it — by Clem Onojeghuo via Unsplash

If you’re looking for the feature list, you can skip to the following section…. you heartless beast!

The quick and sappy preface

React Static has been a passion project of mine for the last year now and it’s staggering how much support both the project and I have received among seemingly insurmountable competition in the space (quickly glances at Gatsby and Next out of the corner of his eye). React Static is not a funded venture, nor is it backed by an extremely large or successful company…yet 😉. But, despite all the roadblocks, its somehow found a comfortable spot in the React Ecosystem and continued to demand my time. It’s the support I get from users and the straight-up awesomeness of the library that keeps me going. So thanks. And keep it up!

New Features!

React Static v6 packs a punch:

  • Webpack 4 — Enough said.
  • Babel 7 — Again.
  • Faster Exporting — Static exporting is now multi-threaded by default and can have performance boosts of up to 8x in some cases (even in CI environments!)
  • Pages directory support — You can now use thepages directory in your project to create pages on your site. Just name the file with the path you want (or use directories to create nested paths) and export a react component!
  • Plugins! You can now use, build and share plugins for React Static! We already have a list of existing plugins here for things like css-in-js, preact, etc. If you’d like to build your own, see our Plugins Docs
  • Better Preloading — Preloading is now zero-config and unopinionated. By default, links are only be prefetched when they become visible in the viewport.
  • Network Stability — Preloading and navigation now behave much better for users on devices with a poor network connection and/or bandwidth and always have a graceful fallback to a loading indicator when necessary.
  • Router Agnostic — React Static no longer ships with a router. This is a big change our journey to becoming more aligned with React’s core experience, but this also means that you can do your dynamic routing however you want! We suggest trying @reach/router!
  • Shared Data for Routes — You can now create shared data fragments for pieces of static data that are repeatedly shared across your entire site and pass them to any route that needs them. Think of it as the middle-ground between site-level data and route-level data. For more information, see the docs!

What now?

  • Try out v6! npm -g i react-static then react-static create
  • Check out the complete changelog
  • Tweet, write a blog post, or make a video about using React Static to build a website
  • Suggest new features for v7! Give us feedback on the things you like or dislike.
  • Spread the Static Site love! Star us on Github and let us know you care :)
  • Follow @ReactStaticJS on Twitter, (or my personal @tannerlinsley) for future updates.

Special Thanks

Upgrading, building and trimming React Static’s feature set for v6 has been a big task and I couldn’t have done it alone. A special thanks goes out to these individuals and companies!

Whats in the pipeline for v7?

Check out our loosely compiled roadmap :)

--

--

Tanner Linsley

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