Recently a new React framework has been launched and its name is [Remix](https://remix.run). 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](
https://res.cloudinary.com/flaco-dev/image/upload/v1638375663/remix_folder_structure_75defbbbe4.png)

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](https://esbuild.github.io/ "esbuild bundler")). 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](https://res.cloudinary.com/flaco-dev/image/upload/v1638380100/remix_form_submission_1ec6122093.png)

### 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](https://res.cloudinary.com/flaco-dev/image/upload/v1638380790/remix_error_boundaries_9b79163e30.png)

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](https://res.cloudinary.com/flaco-dev/image/upload/v1638378408/remix_data_loader_896afa8e9c.png)

### 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](https://res.cloudinary.com/flaco-dev/image/upload/v1638378733/remix_seo_meta_tags_7676641c26.png)

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:

```bash
npx create-remix@latest
```

![What is React Remix - Start](https://res.cloudinary.com/flaco-dev/image/upload/v1638375656/medium_remix_start_216666d262.png)

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**):

```bash
npm run dev
```

![What is React Remix - Start](https://res.cloudinary.com/flaco-dev/image/upload/v1638376992/remix_start_app_2a94a75c93.png)

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](https://res.cloudinary.com/flaco-dev/image/upload/v1638376717/remix_homepage_b17ac6dc1d.png)

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](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](https://www.youtube.com/watch?v=wsJaUjd1rUo). 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:

1. Leave a like by clicking on the heart icon below;
2. Share this post on your social accounts or with your friends;
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna);
4. 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!

thumbnail_what-is-react-remix.jpg

thumbnail_what-is-react-remix.png

thumbnail_what-is-react-remix.webp

Let's find out what is React Remix, a new React Framework based on React Router and developed by top developers to improve SEO, build times and performances.

What is React Remix? A new React Framework

Let's find out what is React Remix, a new React Framework based on React Router and developed by the same React Router creators to improve SEO, build times and performances.

Discover what are Web Components, a tool to build UI elements independently from the Front End stack.

What are Web Components and how to use them

Let's discover the content that flaco.dev offers in this new blog. It will not be the classic Front End blog but it will contain other interesting topics.

A new Front End blog: why you should read it and why not

Too many blogs around, and here there is one more. But this is gonna change your mindset.

Discover in this roadmap the latest programming languages, the libraries, and the frameworks you must know to become a Front End Developer in 2022.

The Front End Developer Roadmap 2022

Find out the differences between Front End and Back End: goals, the languages used, the skills and the tasks they do.

React

Latest articles in React

What is React Remix? A new React Framework

Courses of React

What is React Remix? A new React Framework

What are Web Components and how to use them

A new Front End blog: why you should read it and why not

The Front End Developer Roadmap 2022

Differences between Front End and Back End: objectives, languages, skills and tasks.