High Level Introduction to React Static

Chris Dolphin

React Static is a modern static-site generator built for the React ecosystem, with a focus on flexible, data-agnostic, tooling.

It provides SSR (server-side rendering), code-splitting, automatic prefetching, and more out-of-the-box. Along with providing a functional data flow, there is no rigid dependency on data shape or sources. These architecture decisions allow for a developer experience and codebase that is flexible and scalable.

Features

Build a full-blown SPA for your users while still taking advantage of SEO and the progressive/distributed super powers of a static-site. -Tanner Linsley

Beyond the traditional features of a static-site generator, React Static provides a modern React developer with the flexibility and tooling the ecosystem requires:

  • Simple SSR and static export
  • Ability to easily customize Webpack config
  • Automatic and customizable page prefetching
  • Provides a straightforward place to implement the AppShell model
  • Minimal hardcoded dependeny allows for a more movable codebase
  • Smooth scrolling to in-page hashes
  • Autogenerated sitemaps

Gatsby vs Next vs React Static

Gatsby is already one of the most stable and popular static site solutions for the React community. While it solves a lot of problems, there are a few compromises when choosing the Gatsby ecosystem. The most prominent is an expected dependence on GraphQL as the data source.

Next.js, another alternative with a large community, doesn’t have the GraphQL requirement. The being said, like Gatsby, “colocation of data” creates cognitive complexity and performance issues at a large scale.

For an extended comparison of Gatsby, Next.js, and React Static, check out the original blog post by one of the creators, Tanner Linsley.

Upcoming Changes with v6

As of this writing React Static’s latest major version is v5. For v6 there have been a few API changes made to improve and stabilize the project. Some specific changes include:

  • Components like Link and NavLink are no longer imported directly from react-static.
  • Added support for a variety of router solutions without a dependency on React Router.
  • In preparation for React Suspense, the Loading component has been removed

For all the details on the coming changes, check out this Youtube stream covering the API changes and an explanation of the internals.

Diving-In

To learn more about getting started and specifics on implementation head over to the official docs.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#