Remix Vs React

Posted on  by admin

Finally, a killer React framework from the creators of React Router. If you have been developing Single Page Applications (SPAs) using React you know that there are a couple of problems that creep into our application because of the way react basically works by default.

For example, the most common problem, it is very difficult to have good SEO if you are using client-side rendering (CSR) in React. This is because, in the case of CSR, the data you see on the page is generated by the JavaScript in the browser itself. It is also very difficult to have dynamic Metadata on such websites.

Single-page applications (SPAs) due to these reasons are commonly regarded as non-SEO friendly websites. You can learn more about the pros and cons of SPAs here. To solve this problem (along with other problems with CSR), we use different technics like Server-side rendering (SSR), prerendering, etc.

Since it is a bit difficult to do React SSR manually, we have different React frameworks to make our job easy. One of such React frameworks which is very popular is Next.js.

Similar to frameworks like Next.js, the people who developed React Router (The most popular routing library for React) are working on a NEW React framework to solve all the problems we face while developing with React.

They have named it Remix. Some of the highlighted features of Remix are as follow-. File system routes. Route layout nesting. Automatic code splitting. Data-driven meta tags.

What is React Remix: features recap

Built-in data loading. Location-based Suspense cache. Streaming server rendering.

Zero-config build. Server rendering in dev. Deploy anywhere. Here is the first preview of Remix on YouTube. You'll get a preview on routing, layouts, data loading, meta tags, data caching, and scroll restoration etc.

Deployment

You can subscribe to follow their progress and get early access here- https://remix.run/. Personally, I'm very excited about it. I know its gonna be a big thing because of the people behind it. Hope you liked this post.

You can follow me for more such interesting stories. You can also connect with me at LinkedIn, Twitter, Github, shubhamprakash.dev. Recently a new React framework has been launched and its name is Remix.

How to use React 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.

Web standard APIs vs. Node.js APIs

  • People are gonna love using your stuff. 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.
  • 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.

Data loading

  • 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.

Pre-fetching Everything

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.

Background for comparing Remix and Next.js

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.

Static site generation and server-side rendering

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.

Focused on web standardsand modern web app UX, you’re simply going tobuild better websites

So, keep reading! 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.

React Remix features

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.

Meta-frameworks built on React + Router

Here we are talking about a framework, as it provides a 360 degree platform to build better websites, as they say.

Error Handling

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.

Miscellaneous extra features

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?"

As I mentioned before, React Remix seems to be similar to NextJS or to GatsbyJS at a first glance.

React Remix story

If you know them, you can think they are equal. But you should change your mind as I did. And let's see why. 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.

Auth

The same does React Remix, using a folder called routes. React Remix builds the routes based on the File System too.

Database access

And this is the biggest innovation in React Router. By the way, instead of just replicating NextJS or GatsbyJS, they added Nesting Routes!

Should you use Remix or Next?

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.

When React Remix is out

What is React Remix - Project structure. And what about React Suspense?

Route Error Boundarieskeep the happy path happy.

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.

What is React Remix?

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.

Form handling

And to conclude with the routing features, they included a great functionality called scroll restoration.

React Remix goal

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. 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. Another great improvement has been done when we talk about forms. User data submission always needs some extra development by our side.

Data fetching

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.