#The Motivation behind Navi

Navi lets you create big, fast, CDN-delivered websites with great SEO & SMO, and all with vanilla create-react-app.

#It’s Business Time

Businesses live and die on their web traffic. And on the modern web, the majority of traffic comes from search engines and social media. If you want your site to be seen by anyone, then you need to design for SEO and SMO — there’s really no way around it.

Now if you were building an old-school PHP or Rails app, SEO and SMO would be easy — you’d just add some meta tags to the <head> of your HTML files. But say that you’ve spun up a project with create-react-app. There’s just a single HTML shared file between every page. So where do your page-specific meta tags go?!

You might ask, perhaps we don’t need meta tags anymore? After all, Google is pretty smart — it can probably figure out some relevant info without them. But while this might work for a hobby, it doesn’t work when you have bills to pay. You can’t lose control over how your site is presented when your traffic depends on it.

Luckily, there’s a fix. By implementing static or server rendering, you’ll be able to serve page-specific metadata and regain control over SEO and SMO. And while it used to be that doing so meant ejecting from create-react-app and writing a ton of code, Navi makes it ridiculously easy.

And there’s a surprisingly simple reason that Navi is able to accomplish this.

If you take a look around the industry, the vast majority of real-world apps rely on some kind of asynchronous data — whether it’s fetched from an API, pulled from a database, or dynamically imported from other JavaScript files. And for the most part, React handles this asynchronous data pretty well; component state and lifecycle methods make it easy to show a loading spinner until the data is ready. But here’s the thing…

Outside of the browser, component state and lifecycle methods just plain don’t work — and neither do the tools that use them. This is because React takes a completely different approach to rendering; on the browser, you call ReactDOM.render(), while on the server, you call ReactDOMServer.renderToString(). And while renderToString() will happily render your page’s initial content, this doesn’t help when the initial content is a loading spinner.

renderToString() results in a loading spinner

So what’s the secret sauce? Navi isn’t just a router; it’s a loader too! It lets you declare how URLs map to content using async functions, and then await the result before rendering.

Navi allows you to await the content before calling renderToString()

By avoiding a mess of component state and lifecycle methods, Navi makes SEO with renderToString() a walk in the park! But that’s not all it does…

“Always bet on the web”

Tom Dale, JavaScript thinkfluencer

Navi assumes that you’re building for the web. It does not — and will not — support react-native. And while this means that there are some things that Navi can’t do, it also means that it makes creating websites and web apps ridiculously easy.

  • Instead of declaring abstract “routes”, you declare pages with title, content and meta.
  • It sets the page <title> as the user navigates.
  • Deep linking to headings with # links works out of the box.
  • Your routing tree is statically analyzable, allowing you to generate maps of all of your site’s URLs and their metadata.
  • It includes a tool for statically rendering create-react-app projects.
  • You’ll even get warnings when a <Link> component points to a 404!

There’s just one last thing: while this sounds great and all, how do you know that it’ll actually work? Well as it happens, you’re using Navi right now! You see, Navi started its life as the routing code for Frontend Armory. It’s the reason that this site is snappy, interactive, and social-media friendly — just tweet this page to see for yourself!

Jump into the Minimal Example »