Businesses live and die on their web traffic, most which comes from search engines and social media. If you’re getting paid to build websites or web apps, then you need to think about SEO and SMO — it’s just how the world works.
Now if you were building an old-school PHP or Rails app, SEO would be free and SMO would be easy — you’d just add some meta tags to the
<head> of your HTML files. But the future belongs to serverless React, and this presents a problem. You want to build a beautiful, interactive site, but you don’t want to have to eject from create-react-app to do it.
The thing is, React just wasn’t built to do SEO by itself. Sure, it has a
renderToString() method… but it doesn’t support most lifecycle methods. And while server-side Suspense is coming, it’s been coming for a year and there’s still no release date.
So here’s the deal: you’re getting paid to build websites. You need to build traffic now — but you don’t want to reimplement everything yet again 6 months down the track. And you’re not alone, so let’s do something about it.
#Have your cake and eat it too
Today I’m releasing Navi: the router and static renderer that drives Frontend Armory. Navi lets you create big, fast, CDN-delivered websites with great SEO & SMO, and all with vanilla create-react-app. Of course, Navi also works great after ejecting, or even with an express-based app. No matter how you use it, you’ll save gobs of time with:
🔥 Simple loading transitions for async content
🗺️ JSON site maps that can be built at runtime or build time
⚠️ Console warnings when a
<Link> points to a 404
📜 Scroll management that just works
<title> management for accessibility
🏷️ Great TypeScript support
👌 A dead-simple API
#Many hands make light work
Navi has around 2 years of history behind it, and its overarching design has barely changed over that time. It’s React integration was designed to work great with React Suspense - so when it arrives, your app will spontaneously grow a number of new features. And of course, Navi is 100% open source and open to contributions. Here are a few ways you could help:
- Try it out and open an issue with your feedback 😄
- Build the Vue integration (The
- Use the edit this page links to improve pages in the documentation
Speaking of documentation — the Navi website is 100% open source, and built with Navi and React itself. If you want to run it locally, just clone the navi-website repository, then run
yarn install and
yarn start and you’ll be good to go! But if you view them on Frontend Armory, you’ll get an extra special feature…
#All I want for Christmas is amazing documentation
Navi’s docs are choc-full of example code. And when viewing the docs as a Frontend Armory Pro member, many of these examples will be interactive demoboards — allowing you to quickly try out new things, and easily share the result with colleagues and friends. Pro members will also gain access to docs on niche topics like integrating Navi with react-router or react-helmet — helping to support development, and giving you peace of mind about the project’s sustainability into the future.
Of course, all of the documentation will still be completely open source, and available for you to fork and edit at your pleasure. In fact, the first three docs are already available, and I’ll be releasing a new page each day until Christmas. Here’s the plan:
- Wednesday 12th: A Minimal Example, Declaring Pages and Static Rendering
- Thursday 13th: Integrating with React and Launch! 🚀
- Friday 14th: Authenticated Routes, more live examples
- Saturday 15th: The
- Sunday 16th:
- Monday 17th: create-react-navi-app
- Tuesday 18th: Integrating with react-router
- Wednesday 19th: Video Introduction
- Thursday 20th: Integrating with react-helmet (pro exclusive)
- Friday 21st: The
- Saturday 22nd: Layouts and nested content
- Sunday 23rd: Blog example
- Coming soon: Generating JSON site maps (pro exclusive)
- 🎄 Christmas Day: it’s a surprise 😉
I’ll be linking each of these pages as they’re released, so check back each day to get a brand new link! ⏱
Thanks so much for reading! Given that you’ve read all this way, you really should give Navi a try — just head on through to A Minimal Example in the docs to try it out within the browser. And once you’re done, let me know your thoughts! Just open an issue, or send me a tweet at @james_k_nelson. Finally, if you decide to use Navi in your project, make sure to join Frontend Armory Pro to unlock access to the demoboards and integration docs.
See you again on Christmas Day with a Navi surprise! 🎁