GAZAR

Principal Engineer | Mentor

Journey into RemixJS: A Comparative Exploration with NextJS

As you read this website, know that it was crafted using RemixJS. But what's the backstory? Originally, I constructed it with NextJS versions 13.5 and later 14, incorporating all the new, magical features that NextJS had introduced. However, the desire to push boundaries led me to explore RemixJS. What better way to delve into it than by rebuilding the same website and making a comparison?

So, I embarked on creating a RemixJS version of my website—same features, same components, but a different framework. The results were nothing short of fascinating to me.

Screenshot 2023-12-17 at 3.35.39 pm.png

RemixJS shines in its impressive build time efficiency. For the identical set of components and pages, RemixJS outperforms, completing the task in just one minute. In the context of a project of this scale, where every minute counts, RemixJS proves to be a standout performer, demonstrating its prowess and excellence in the build time department.

Screenshot 2023-12-17 at 3.37.13 pm.png

Curious about how the web vitals and performance stacked up, I decided to evaluate my NextJS app against RemixJS. Deployed through fly.io, the NextJS website earned a respectable B rating on GTMetrix. Remarkably, this achievement was attained without any optimization efforts on my part. The browser loaded a mere 366KB of JavaScript, showcasing a commendable performance. It's truly remarkable and exciting to witness such results with minimal optimization efforts.

Screenshot 2023-12-17 at 3.38.36 pm.png

RemixJS, while showcasing a slower performance in comparison, holds an intriguing explanation. The disparity lies in NextJS's behind-the-scenes extension of node fetch capabilities to cache responses. This feature, though powerful, can lead to automatic UI updates when changes occur—an admirable trait. However, it's essential to note that I hadn't implemented this in my NextJS version.

In contrast, RemixJS refrains from such automatic caching, providing developers with the flexibility to manage these aspects manually. Some may argue that NextJS's additional functionality is advantageous, but I appreciate the ability to tailor my approach and preferences.

The essence is clear: RemixJS builds faster, delivers a more compact JavaScript payload (around 210KB), and offers room for improvement in other areas. It's a testament to the framework's efficiency, allowing developers to make informed choices and maintain control over their application's behavior.

Screenshot 2023-12-17 at 3.51.20 pm.png

Keen to assess the performance during page transitions, I conducted a comparison between NextJS and RemixJS. Notably, NextJS exhibited a transition time of approximately 3 seconds. Interestingly, RemixJS demonstrated a comparable performance, hovering around the same transition duration. This alignment in page transition speeds further underscores the competitive capabilities of both frameworks in delivering smooth and efficient user experiences.

Screenshot 2023-12-17 at 3.52.29 pm.png

RemixJS impressively maintains a 3-second transition time, even when juxtaposed with NextJS, where the fetch is cached. This achievement underscores RemixJS's commendable performance.

Now, let's delve into the developer experience with both frameworks. As a developer, I find immense value in enjoying my time spent working on a project. Comparing both frameworks, the experience with RemixJS stands out. The developer-friendly environment and tools provided by RemixJS contribute to a more seamless and enjoyable development process. This aspect, coupled with its robust performance, enhances the overall satisfaction of building and refining applications using RemixJS.

Screenshot 2023-12-17 at 3.54.02 pm.png

RemixJS's routing system stands out with its clarity and ease of comprehension. While the file lengths might be longer, the overall structure remains concise and readable. In comparison, NextJS often involves navigating through multiple layers of folders and numerous additional files, including layouts and pages. This complexity in NextJS makes the codebase more challenging to read and understand. RemixJS, with its straightforward and visually intuitive routing, provides a developer-friendly experience that fosters better code comprehension and maintainability.

Screenshot 2023-12-17 at 3.55.37 pm.png

RemixJS places a premium on respecting developers' autonomy and acknowledges the diverse needs and opinions regarding routing systems. It seamlessly facilitates customization, allowing developers to tailor the route system according to their preferences. This flexibility empowers developers to take charge, fostering a sense of ownership and control over the routing structure. In essence, RemixJS not only provides a robust default routing system but also respects and supports the individuality of developers, offering the freedom to shape their routing experience.

Screenshot 2023-12-17 at 3.57.46 pm.png

NextJS appears to be evolving towards a more opinionated structure, reminiscent of older frameworks like Ember. While Ember, with its undeniable beauty, continues to have a user base, its extensive opinions posed a learning challenge for many and somewhat limited its widespread adoption.

Drawing parallels, frameworks like Loopback, which heavily relied on JSON for development, and Meteor, with its framework-specific libraries, faced similar challenges. Their specialized approaches made them powerful within their ecosystems, but also created barriers to entry and collaboration beyond those confines.

In considering NextJS's growing level of opinionation, it prompts thoughtful reflection on the balance between framework structure and developer freedom. Striking the right equilibrium ensures both a powerful, opinionated framework and a welcoming environment that encourages broader community engagement and sustained longevity.

Screenshot 2023-12-17 at 4.00.27 pm.png

Undoubtedly, my experience with RemixJS has been overwhelmingly positive. In fact, I was so impressed that I not only migrated the default version of my website, gazar.dev, to Remix but also embarked on building additional features on this framework. The accelerated development pace, improved readability of the project, and the ability to customize seamlessly have all contributed to a more enjoyable development experience.

What sets Remix apart is its potential applicability to more advanced or long-term projects. With Shopify backing Remix and leveraging its expertise, the framework is poised for continuous improvement. The fact that the Remix team is synonymous with the highly regarded React Router team, known for their sustained innovation and commitment to staying current with emerging technologies, further solidifies the confidence in RemixJS's future.

It's not a stretch to envision RemixJS emerging as a preferred option for developing frontend applications, particularly for those seeking an advanced and feature-rich framework. As Shopify and the Remix team continue to invest in its evolution, RemixJS is poised to become a prominent player in the frontend development landscape.