Remix Vs Next.js – Which One To Choose?

There are lots of frameworks built on top of React. Some of them are Next.js, Remix, Gatsby, Redwood, Blitz etc. Next.js has gained a lot of popularity because of the performance, developer experience and tight integration with deployment platforms that it offers. However recently, Remix has been heavily discussed and compared to Next.js as an alternative. Lots of programmers are using Next.js as a potential tool to build apps. Remix is being presented as another option, but developers need to know the comparison and why they would want to pick one over other. Hence here we came with a comparison of Remix vs Next.js. Let’s compare Remix and Next.js on the basis of various parameters. 

Remix Vs Next.js-

1. Web Standard APIs Vs Node.js APIs-

Remix is built on top of standard Web APIs, whereas Next.js is built on Node APIs. With Remix you won’t have to learn as many extra abstractions over the web platform. You just need to learn useful concepts no matter what tool you decide to use later. Also, APIs, the core of Remix doesn’t rely on Node dependencies. As Remix doesn’t depend on Node, it is more portable to non-Node environments like Cloudflare Workers and Deno Deploy.

This will let you to run Remix on the edge easily. Running on the edge means server hosting your apps are distributed around world rather than being centralized in a single physical location. Whenever a user visits website, they are routed to the data center closest to them for fast response times. 

2. The Router-

Route is one of the most important parts of application because we are building a web application. In Next.js, they have their own router using the file system, hence you can create a pages folder and put files there,

pages/
  index.js
  about.js
  Contact.js

These files are going to becomes pages inside the application, with below URLs.

- / (this is index)
- /about
- /contact

They also have useRouter hook to access data from router like search (query) params or methods such as reload or push to navigate to another URL.

In Remix, they use React Router v6 internally but they provide a file system based system, rather than pages Remix call them routes, but the general is similar.

routes/
  index.js
  about.js
  Contact.js

Those files are going to become routes with same URLs as in Next. Main difference comes with the introduction of Layout Routes.

3. Layout Routes-

Most common requirement of user interfaces is to re-use a layout between two URLs, a common example is to keep header and footer on every page, however this can become more complicated. Amazing example of this is Discord, let’s analyze-

You can see four main areas-

• Left column with list of servers
• Next column with list of channels
• Widest column with list of messages
• Right column with list of users of server
• It’s not image but not you can have list of messages for thread replacing users

Whenever you want to build this UI in Next.js, you need to create a file at pages/[serverId]/[channelId].tsx, get the data os each list and render a component like- 

function Screen() {
  return (
    <Layout>
      <Servers />
      <Channels />
      <Messages />
      <Users />
    </Layout>
  )
}

When the user navigate to another server or channel, according to the data loading strategy you used, you may need to get load everything again with the new channel or server. This is because Next doesn’t have support for layout routes, hence each page renders everything on the screens, including shared layouts between screens. 

As opposed to Next.js, Remix has support for that, so in Remix we would make a file structure like this:

routes/
  __layout.tsx
  __layout/
    $serverId.tsx
    $serverId/
      index.tsx
      $channelId.tsx
      $channelId/
        index.tsx
        $thread.tsx

While you have more documents, this will assist you with keeping the code more coordinated and to make stacking information more improved.

Know more

What Is Remix? All You Need To Know About

There are lots of React frameworks available in the market. However, the React framework has something special to offer. Remix is a react framework used for server-side rendering(SSR). Means both backend and frontend can be made using a single Remix app. Data is rendered on the server and served to the client side with minimum Javascript. In contrast to vanilla React, where data is fetched on the frontend and then rendered on screen, Remix fetches data on backend and serves HTML directly to the user. Here we’ll discuss all the basics of React Remix.

What Is React Remix?

React Remix is a new react framework that  lets you focus on user interface and work back through web fundamentals to deliver a fast, slick and resilient user experience. Main goal of React Remix is to provide new development tool to boost build time, performance on runtime and development fluidity. Also it is focussed on SEO improvements and accessibility.

Benefits Of Using React Remix-

1. Transitions-

Remix handles all loading states for you, you just need to tell Remix what to show when the app is loading. IN frameworks such as Next.js, you want to set the loading state using some state management library like Redux or Recoil. Libraries can help you to do the exact same in other frameworks, Remix has this built-in. 

2. Nested Pages-

Any page in the route folder is nested in this route rather than being separate. Meaning that, one can embed these components into your parent page, that means less loading time. Benefit of doing this is that, we can enforce error boundaries to embedded pages, that will help with error handling.

3. Traditional Forms-

Previously, when developers used PHP, they used to specify a form method and action with a valid PHP URL; we’ll use a similar approach in Remix.It doesn’t sound fun as we are used to onClick, onSubmit, and HTTP calls. Remix manages this situation in a different way by providing functions such as action and loader for server side operations. In these functions, form data is easily available, means there’s no need to serve Javascript to the frontend to submit a form.

Consider that, you have a simple website and you don’t actually need to serve javascript to frontend. This traditional form method works best for this situation. In other frameworks, you might need to serve Javascript to make a fetch or an axios call, but you don’t need to do it in Remix. It keeps things simple.

4. Error Boundaries-

Consider a case that, you get an error in a Remix component or a nested route, errors are restricted to the component and the component will fail to render or simply it will show error. In other frameworks, it will break the entire page, and will see a huge error screen. 

While error boundaries can be implemented in Next.js also, Remix has this built-in and it’s a great feature for production builds and so user doesn’t get locked out of the entire page for simple error.

Features of React Remix-

1. React Remix Routing, Nesting Routes, Suspense Cache, Scroll Restoration-

NextJS builds the routes based on project structure. We declare inside the pages folder the files we want and the framework uses the names to build all application routing system.  React Remix does the same using a folder called routes. It builds the routes based on the File System too. And this is biggest innovation in React Router. Rather than only replicating GatsbyJS or NextJS, they added Nesting Routes. Meaning that, we can have nested routes where children inherit parent layout without replicating in the code the container component.

Project Structure

In react router is used to provide loader for component and then will cache the rendered component. In this way, it doesn’t take care of browser history. Means if you change the order to get to a particular page, the cache will pick the rendered component as usual. In React Remix, they need to change this way, enabling a Suspense Cache based on Location. Whenever we push a page to 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 same page again by visiting it from the navigation link, it will be another record.

Concluding with routing features, it included a great functionality called scroll restoration. Every page will cache the scroll position if we get back to it and can continue from where we stop. Here main role is played by the Suspense that can store same pages but with different scrolls, if they are part of different location in history state.

2. React Remix Error Handling-

One more great feature of Remix is about Error boundaries. In React we can catch app errors having a top level component with function like componentDidCatch. In Remix, you can use Nested Error Boundaries and once more it is an export function, as far as the others before. Remix is easing everything.

// Use for runtime errors
export function ErrorBoundary({ error }: { error: Error })
{
console.error(error);
return (
  <div>
   <h1>There was an error</h1>
   <p>{error.message}</p>
  </div>
   );
  }

//Used for loaders or actions
export function CatchBoundary() {
const caught = useCatch();

let message;
switch (caught.status) {
case 401:
message = (
 <p>Oops! The page does not exist.</p>
);
break;

default:
 throw new Error(caught.data || caught.statusText);
}

return (
<div>
<h1>
{caught.status}. {caught.statusText}
</h1>
{message}
</div>
);
}

You can export ErrorBoundary for general runtime errors. You can use CatchBoundary for loaders or actions errors.

3. Server Side Rendering-

Simple answer to “What is React Remix” is Server Side Rendering. It is performant at runtime so helps to build better website particularly for first time user visit. This can improve SEO as NextJS is doing. Also, SSR can run in development mode and there is a small difference more and it is related with data loading. 

4. SEO tags-

SEO improvement is another goal of React Remix and they perfectly achieved it. A React Router can be used to improve SEO without using other libraries to improve meta tags or page title and react router uses an export to set meta tags. It is possible to set the page title and description. 

Read more