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