Next.js vs Remix

Over the past few years, Next.Js has grown tremendously and has gained a lot of popularity. It was bound to have competitors and better frameworks. This competition helps the technologies push themselves in terms of user experience, performance, and other features. Out of the many, one of the worthy competitors is Remix. Recently, Remix posted an in-depth blog about the features making many developers wonder if Next JS is the best server-side rendering framework or not. Let us discuss Next.js vs Remix and see what is all the fuss about and is Remix really a worthy competitor to Next JS.

Overview of Remix Blog Post

Note that both Next.JS and Remix use React JS as the underlying library. Due to this, they have a lot of similarities in terms of components, functionality, and UI architecture. But still, as a framework, they are very different.

In the blog, they made a demo example application using Next JS. They ported it in two ways, first was a minimal port where they tried to copy-paste and tweak the Next JS code to work in a Remix environment. But the second method is the rewrite option which is very interesting. In this, the additional performance benefits would unlock and make the application development interesting.

Initially, only Remix states that it is fond of Vercel as an official platform for hosting Next JS. The company which developed the framework feels it is best to have more competition as this friendly competition helps to push one another and in the end, everything can get the best of everything. This is the reason Remix uses the same hosting platform as Next JS.

Next.js vs Remix

In the blog post of Remix, they have provided a gif that displays the same demo project but the server-side is done in Remix Rewrite, Remix Port, and lastly in Next JS. These three cases are displayed in order to compare and understand the difference between them.

1. Speed

Next.JS is serving a static file and Remix rewrite, as well as Remix port, is serving cached files on CDN. These two are actually generated on the server-side. Hence Next is using the HTTP stale but it comes with its own proprietary static site generated by SSG logic which is just a vendor lock into Vercel. While on the other hand, Remix supports the official HTTP SWR feature. The Remix rewrite does not show a lot of difference in terms of performance in comparison to Next JS. Next takes time to load the same page because the cookie banner was not ready.

2. Dynamic Response

Remix is almost twice as fast as Next JS to load the same page. The Next JS site first sends the HTML quicker than Remix then it gets the data through an API call. Basically, it loads all the static components using server-side generation with incremental static regeneration then it proceeds to make API which is called on the client-side to get the dynamic components. Here the user gets the benefits of SSG. While Remix wants to render everything on the server and does not want to do even a single API call.

3. Working

All the resources in Remix are loaded parallelly giving us maximum efficiency. This means the more resources you laid parallelly, the better the performance of the application. This gives a good waterfall graph. On the other hand, Next JS loads a bunch of resources but all are done parallelly giving a bad waterfall graph in comparison to Remix.

4. Performance

Remix holds the upper hand in performance as it runs everything and renders on the edge; due to this, you would not have any delays while making API calls. While for Next, the document loads first then the document itself calls the server and if the client’s computer does hot have as much network bandwidth as the ec2 server then the speed and performance decrease.

5. Data Mutation

A good feature of Remix is that it reuses a lot of platform-level features of HTML and HTTP. Due to this, you can make a lot of complex mutations. While in Next JS if it is offline then the website does not respond. Remix, on the other hand, informs the user in such situations. Remix can make applications work without JavaScript.

6. Handling Interruption

Remix uses Native HTML input to make network calls and inform the client of all sorts of errors or interruptions. No javascript is required in this case. But for Next, when the network speed is slow then the application does not work properly and creates a bad experience for the user.

Conclusion

So, Yes! Remix is a good competitor for Next JS and might overtake it but not for now. This is because Next has a really big community and gets a lot of support, but Remix has a lot of potential. The best thing about Remix is that it focuses a lot on server-side rendering to improve the speed and overall performance of the application. But it does not come with a vendor, hence the developers should mention a way to deploy it. If you like this article, then make sure to check Codedamn for similar technical content. You can use the codedamn playground to practice coding. If you have any queries or suggestions, do let us know in the comments!