React Static v6!

Tanner Linsley
Dec 13, 2018 · 3 min read
Image for post
Image for post
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 :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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