Recently a new React framework has been launched and its name is Remix. The founders of React Router have been working hard to develop and present this new framework to the entire community and in this article I am so pleased to answer the question "What is React Remix?".
I tried Remix on my own, after getting impressed by the video presentation and I can confirm that it is going to be a nice player among the others React frameworks, like NextJS and Gatsby. For sure I will give it a chance for my next projects.
Now it's time to start analyzing the specs of React Remix but before read what the founders say about Remix:
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
React Remix story
Everything started last year when two developers announced a new React Framework that was going to be a new player in the web development sector. They called it Remix, even if they disappeared for a while, without disclosing any interesting information, and keeping everything top secret. Until now.
On Monday 22nd of November of 2021 they released it officially and presented it on streaming to show off the power of React Remix as a new React Framework. You could think that we probably don't need another framework as there is already a wide range of solutions. By the way, they didn't care about this and here we are: Remix is the new React Framework.
When I talk about two developers I am not talking about two random guys. They are the creators behind React Router!
Let's discover now in deep what is React Remix, its features and how to use React Remix in an application.
What is React Remix?
React Remix is a new React Framework which develop started on 2019. The developers behind it are Michael Jackson (Co-Founder, CEO) and Ryan Florence (Co-Founder), the same developers behind React Router. Any software engineer that has been working with React, a little bit knows React Router, so we know what we are talking about. In case you don't know React Router, it is "simply" the most used routing library in React, capable of working everywhere that React runs: on the web, on the NodeJS, and on React Native. It is also the core of others most well-known routing libraries like react-router-dom and react-router-native.
So starting from React Router, they have built a framework based on it: Remix. Now, to answer the question "What is React Remix?" we can assert that React Remix is a React Framework based on React Router, that faces some of the issues of Client Side Rendering and many others. If you know a little bit NextJS, it is going to be very similar, but with several important differences that we are going to see in the next section. So, keep reading!
React Remix goal
But wait a moment. Before starting listing all the features, we need to understand why a web developer should need it. Answering this question helps us on understanding what is React Remix for.
The main goal of React Remix is to provide a new web development tool to boost the build time, performance on runtime and development fluidity. Moreover, it is focused on SEO improvements and accessibility. All of this thanks to a new Server Side Rendering approach and a new build tool.
As you can notice, we are not talking anymore about a library as React is already. Here we are talking about a framework, as it provides a 360 degree platform to build better websites, as they say.
In my humble opinion, they wanted to create a union between NextJS and React Router. The goal is to provide an easy Server Side Rendering website builder but better, including some cool features of React Router and some faster approach to develop some heavy parts of an app. To check which are those, keep reading!
Now we are ready to start discovering the new features included in React Remix, finally one step closer to answering the question "What is React Remix?".
React Remix features
As I mentioned before, React Remix seems to be similar to NextJS or to GatsbyJS at a first glance. If you know them, you can think they are equal. But you should change your mind as I did. And let's see why.
React Remix Routing, Nesting Routes, Suspense Cache, Scroll Restoration
If we think on NextJS, it builds the routes based on the project structure. We declare inside the pages folder the files we want and the framework uses the names to build all the application routing system. The same does React Remix, using a folder called routes. React Remix builds the routes based on the File System too. And this is the biggest innovation in React Router.
By the way, instead of just replicating NextJS or GatsbyJS, they added Nesting Routes! It means that we can have nested routes where children inherit the parent layout without replicating in the code the container component. And still using only the File System. So cool!
What is React Remix - Project structure
And what about React Suspense? In React Router is used to provide a loader for a component and then will cache the rendered component. By the way, it doesn't take care of browser history. It means that if we change the order to get to a specific page, the cache will pick the rendered component as usual. In React Remix they want to change this approach, enabling a Suspense Cache based on Location. Every time we push a page to the history state, it becomes unique and Suspense caches the component based on the Location and not on the properties. If we navigate back and forward, or if we push again the same page by visiting it from a navigation link, it will be another unique record.
And to conclude with the routing features, they included a great functionality called scroll restoration. Each page will cache the scroll position in case we get back to it and can continue from where we stop. And a big role here is played by the Suspense that can store same pages but with different scrolls, if they are part of different Location in the history state.
I think a big improvement on this side. Now let's see what's left.
React Remix Faster Build and Refresh Time
Did I mention faster build time? Yeah, you are right! To achieve it they integrated esbuild.
Don't worry if you don't know it, as you should only know that is the fastest JavaScript bundler (you can read more about it here). And I can confirm it! While watching the preview, I have seen how fast it is, even when doing the Fast Refresh. And while testing it on my own, I can see a really big difference with previous bundlers like Webpack or Browserify. This is going to be a real nice advantage to reduce builds locally and in CI.
Remix Form optimization
Another great improvement has been done when we talk about forms. User data submission always needs some extra development by our side. We need to manage at least the form data and the submission state. So, we would use useState and we would have some instruction to access to the form data.
But how does Remix manage a form? It can't be easier. First of all we talk about actions. You can export a function called action on the same file and it would be the handler of the post received by the form present in that page. It is a real post to a Back End, to the Remix Server. It is great because you don't need to access to the form elements to get every input and to extract their values. Moreover, we can use an hook, useTransition, to manage the form submission state without performing any set state as we are doing right now. We have now a really clean flow to manage a form. This is one of the best features I have seen by far in Remix.
What is React Remix - Form optimization
React Remix Error Handling
Another great feature that Remix has is about Error Boundaries. In React we can catch app errors having a top level component with some function like componentDidCatch. But in Remix we have a different approach. We can use Nested Error Boundaries and once more it is an export function, as for the others before. It is great how Remix is making everything easier. So look at the following image:
What is React Remix - Error Handling
We can export ErrorBoundary for general runtime errors. And we can use CatchBoundary for loaders or actions errors. Amazing! But the features haven't stop here.
React Remix Server Side Rendering
One of the first answer to "What is React Remix for" is Server Side Rendering. Introducing this new system helps on building better website as they are more performant at runtime, specially for the first user visit. This can boost our SEO as NextJS properly is doing. Furthermore, SSR can run also in development mode. And there is one little difference more and it is related with the data loading. Let's see below what's happening.
React Remix Data Loading
React Remix is going to use the full HTTP Cache to manage the way it should get the data again from the original source. If we export the loader function in a React Remix page, the value returned is accessible by the component that will be server side rendered. Great! But what about if I want fresh data, without taking it from the cache? Well, they built an hook for it. It sounds impressive how it will be easy to clean the cache and to get newly generated data.
What is React Remix - Data Loaders
React Remix Search Engine Optimization tags
One of the goals of React Remix is the SEO improvement and they achieved it. Thanks to Server Side Rendering, React Router can be used easily to build performant apps. And to improve the SEO without using other libraries to change meta tags or the page title, React Remix uses an export to set meta tags. It is possible to set the page description and title. It sounds great for me for example that I am used to install Helmet.
What is React Remix - SEO Meta Tags
With this latest feature we finished our list. Here below there is a little recap to see a nice overview.
What is React Remix: features recap
Now it is time to make a recap of "What is React Remix?". I did a list of some of the most known features here below:
- File system routes
- Route layout nesting
- Suspense cache based on Location
- Scroll restoration
- ESBuild:
- Automatic code splitting
- Faster refresh
- Faster build
- Zero config
- Form optimization
- Production and development Server Side Rendering mode
- Data-driven meta tags
- Built-in data loading
By the way, the features don't stop here, as the founders said. They are going to implement many more stuff to make Remix more complete.
How to use React Remix
Before launching Remix we didn't know if it was free or not. There were rumors about a license to buy in order to get the code but then they confirmed that is going to be completely free and open source.
And thanks to that I had the chance to try out Remix. The following command will start a guided procedure to create your app:
npx create-remix@latest
What is React Remix - Start
Once you run the command, it asks you some questions:
- The name of your Remix app
- How you want to deploy (many options here, but I have selected Remix App Server)
- If you are going to use Typescript or plain JavaScript
- If you want to run a npm install just after
Once the process has been finished, you are ready to go with the following command (you can also use yarn):
npm run dev
What is React Remix - Start
The starter contains a lot of features to look at. It can be useful to understand how Remix works. At the end, the app built will look like this:
What is React Remix - Starter Homepage
And it's simple as it is.
If you want to start using Remix more in deep, you can read the documentation available in the official website at https://remix.run.
When React Remix is out
React Remix has been launched on Monday 22nd of November of 2021. The presentation is available on the Remix YouTube Channel. The video has been presented by Kent C. Dodds, the Director of Developer Experience, Michael Jackson (Co-Founder, CEO) and Ryan Florence (Co-Founder).
Now it is time to hear your voice. If you liked this article and you want to support me, just follow these simple, easy and free steps:
- Leave a like by clicking on the heart icon below;
- Share this post on your social accounts or with your friends;
- Follow me on Instagram, Facebook, Twitter and on Github;
- Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).
Thank you so much for your attention and have a nice day!
