Remix vs Next.js - Full Context Comparison

#full context comparison#next.js#remix

Published on:

1/29/2023

by:

Avatar of Joe

Joe

The clash of titans starts right now!
WIP Comparison! I'm releasing this review based on community request, but it's not ready and won't be fully for a while. ๐Ÿ˜“ Another honest disclaimer: this is based on my two previous review that are a bit outdated by now so take it for what it's worth. Nonetheless I'm sure there are quite a lot of useful and informative things in there to enjoy.
Comparing Remix with Next might be old at this point, but I can assure you, it has never been done this way before. Why? Because instead of obsessing over technical details as usual (e.g.: comparing how you can do the same everday tasks in both frameworks, with the simplest of possible examples) I will shine a search light on the things that really matter when your goal is maximizing the chances of product success instead of attaining technical nirvana.
We all know Remix Run -the new hip kid on the block- and Next.js -the old guard- well. If you don't, the links will take you to my reviews about them. What we might don't know well enough is ourselves, specifically our developer brains. That can become dangerous because they tend to lead us astray when looking at shiny, new toys tools. Let's be honest here, we all have a part that loves to ride that hype train. When the next ground-breaking technology lands in our news feed, we all want to go, pick it up and brag about adopting it. (At least a bit, somewhere, deep-down. OK, but... sometimes? Am I the only one this messed up?) Remix perfectly hit this chord for many people in the frontend community.
In my experience, this makes the hardest thing that any developer might have to do, even harder. Which is exactly what I talked about at the beginning, translating technical details into business outcomes and making programming decision based on financial goals. What I want to give everybody through this comparison is no-nonsense, practical advice for making a ROI based decision between these frameworks for a given project. Let's dive in.
The Full Context System: I have a few special techniques up my sleeves to help with that based on this book I wrote. We will use them here to show the influence of the frameworks over the 4 pillars of business value: Increasing & Protecting Revenue and Avoiding & Reducing Costs. It's possible to connect the technical details of any technology to these outcomes through the 5 core impact factors: Business Opportunities, Customer Experience, Productivity, Utilization and Direct Costs. To hook all these up into a nice system we can use Impact Points to measure these effects and follow the Code To Money Roadmap to not miss out anything with relevant influence. The end result of doing that looks like this:

Next.jsTotal Impact: 22850

4500

2000

12250

1850

2250

RemixTotal Impact: 19400

2700

1800

10850

2250

1800

(*Data is based on the previous reviews, the higher number is always better)
These 2 charts show the combined total impact of each framework. Accordingly, Remix falls behind Next by ~15.1% in impact value. If all this doesn't make sense, you can find a nice summary of the system under the "READ FIRST" section of the Code To Money Roadmap However we can do better. There's a separation between a framework's own scores and its environment's values. If we narrow down the data to the own points, which exclude the influence of the platform and ecosystem tools available to be used with the frameworks, we will see their innate differences more clearly.

Next.jsOwn Impact: 12750

3500

1900

5250

1250

850

RemixOwn Impact: 8700

1700

1700

3350

1650

300

The bare bones impact of the frameworks shows an even larger difference. Remix is behind Next.js by a whooping -31.8%! Is that surpsising to you? There's a very good reason for each point given, I will later explain all this much better, but if you are in doubt you can always check the reviews themselves. Now we could conclude that Next.js remains king ๐Ÿ‘‘ and end the article but the real situation is more complicated. Let's not stop here and find the places where Remix has an edge over Next. There are a number of legitimate cases where it simply is the better choice, and a tad more, solid cases where it's not.
Stage 1: Business Idea
Blurred out image of glass-front skyscrapers towering over the viewer
Drawing of a man in business suite with a lightbulb over the head to represent a business idea.

Photo by Floriane Vita on Unsplash

From the perspective of support for business opportunities Next.js wins ๐Ÿ† by a huge margin. Take a look at the capability range images below to see why. It coveres a much wider area with higher level of technical fit. As a consequence if you are unsure about the final complexity of a project Next.js is the safer bet.
How good fit is Next.js for the different parts of the complexity scale: Level 1 - good enough for singe page static sites, ideal for multi page static sites. Level 2 - ideal for every type of dynamic website. Level 3 - good enough for basic S.P.A.s, possible to use but great for complex client side apps. Level 4 - Not possible.
How good fit is Remix Run for the different parts of the complexity scale: Level 1 - possible but not great for singe page static sites, good enough for multi page static sites. Level 2 - ideal for every type of dynamic website. Level 3 - possible but not great for basic S.P.A.s, impossible for complex client side apps. Level 4 - Not possible.
The most significant difference between the two frameworks is the inability of Remix to support Level 3 complexity projects. Why? You can check out my extended answer in the review but here's the gist of it: Remix can't mix (pun intended) with client-side state management libraries. Technically, you can use them together but in that case all the nice capabilities of Remix are flushed down the drain. So in practice you won't build the next Excel Online with Remix.

If you check out the web complexity distribution (please scroll down until you see a bell curve) it's clear that there's still plenty of fish in the web-sea for Remix to compete for and if your project is in the upper part of the Level 1 or somewhere in the Level 2 complexity categories then the match is far from over yet.

Relevant only to a much smaller group of projects but Remix's support to work with zero JS can tilt the scale in its favor. Similarly the excellent AMP support of Next can appeal to another set of developers.

NEXT.JS SCORES

BUSINESS OPPORTUNITY

+

1000

Basic support for any kind of web project

+

300

Good for working with static sites, best for multi-page ones

+

500

Ideal for small to large-scale projects with lots of dynamic parts

+

100

Can be used to deliver even complex SPAs

-

100

Not a tool to be used by the top 0.01% of products

+

100

Super capable of delivering on SEO

+

100

Supports the creation of AMP pages

+

2000

BO - Impact Point

REMIX SCORES

BUSINESS OPPORTUNITY

+

1000

Basic support for any kind of web project

-

400

Not ideal for static sites or infrequently updated content

+

500

Optimal for working with highly dynamic or frequently updated content

-

500

Does not support delivering real SPAs

-

100

Not a tool to be used by the top 0.01% of products

+

100

Super capable of delivering on SEO

+

100

Specific match for privacy focused sites

+

700

BO - Impact Point

Stage 2: Business Vision & Mission & Strategy

People photo created by tirachardz - www.freepik.com

This stage delivers another win for Next.js ๐Ÿฅ‡ but the situation is not one-sided. Remix has some strong points here. If we put aside the fact that the strengths of Remix are not best suited for operating in a small geographical location then both frameworks can serve the whole spectrum of the userbase scale.

There are two real differentiators between them. For Remix it's the special focus on network resiliency that makes it a good fit for projects targeting locations with low-quality internet access. This is enabled by its great fit for Edge Hosting and minimized payloads on subsequent navigations. For Next.js it's maturity. Thanks to its age and adoption level it's a much more established tool along with its entire ecosystem. In financially uncertain times like we live through nowadays that makes it a way less risky choice for organizations where that matters.

Both frameworks are aligned with different strategic goals. If you aim to reduce costs then Next.js is your best bet. On the other hand if you want to increase revenue then Remix has a few unique cards up its sleeve. I would say for time-to-market they are located in roughly the same category.

NEXT.JS SCORES

BUSINESS OPPORTUNITY

+

500

Optimal for Level 1 - local userbase

+

500

Optimal for Level 2 - national userbase

+

500

Optimal for Level 3 - multi-national userbase

+

200

OK for Level 4 - global userbase

+

1700

BO - Impact Point

CUSTOMER EXPERIENCE

+

1000

Can deliver the user experience expected of today's top web-sites and applications.

+

1000

CX - Impact Point

DIRECT COSTS

+

200

The indusrty wide adoption makes it a safe bet for projects looking for long-term cost reductions

+

200

It's relatively easy to hire for

+

400

CO - Impact Point

REMIX SCORES

BUSINESS OPPORTUNITY

-

100

Can't shine on projects targeting local business

+

400

Quite good for national level projects

+

500

Optimal for large-scale, multi-national projects

+

200

OK for global products

+

100

Optimal for loading speed sensitive products

+

100

Optimal in low connection quality areas

+

1200

BO - Impact Point

CUSTOMER EXPERIENCE

+

200

Big plus for Usability on bad network connections

+

1000

Great UX thanks to fast loading and update speeds

+

1200

CX - Impact Point

DIRECT COSTS

-

200

Early adoption is risky on projects looking for long-term cost reductions

-

200

CO - Impact Point

Stage 3: Product Strategy & Roadmap

Infographic vector created by freepik - www.freepik.com

This is the first stage where Remix beats Next.js! ๐ŸฅŠ The reasons for the defeat are Next's limitations in terms of product possibilities. While SSR can become costly for both frameworks, Next.js has the additional problem of hitting a build time and cost wall with SSG. ISR and on-demand ISR can alleviate the build time part but the cost factor remains and they create additional complexity around caching, revalidation timing or integrations.

Besides this, the capabilities of the built-in router is what can interfere with your product development. Delivering dynamic, client-side navigation is not possible without trade-offs and hacky solutions. Multi-tenant applications and localized routing also have some serious issues to keep an eye on.

Remix doesn't suffer from these limitations. Allowing you more options in terms of domain setup and localization, while offering a simpler data freshness architecture leading to better maintainability. (I just made up this term to refer to decisions abour rendering strategy, caching and revalidation.)

In terms of roadmap planning, development speeds are comparable. Next currently have an advantage for long term delivery performance thanks to the wider selection of community resources and support, while Remix has an edge at the intial phases of a project thanks to the "Stacks" capability of its CLI. The clonable examples that Next.js provides are useful but inferior to what Remix delivers.

REMIX SCORES

BUSINESS OPPORTUNITY

-

200

The need to custom build your app can rule out Remix for low-complexity projects where time-to-market is top priority

-

200

BO - Impact Point

PRODUCTIVITY

+

300

Offers efficient built-in tools and conventions to work with primarily backend/DB data that help with time-to-market

+

100

Lots of love and premade stuff from the community (including stacks)

-

100

Troublesome to integrate with complex, client-side only data processing

+

300

PR - Impact Point

DIRECT COSTS

-

50

SSR can become more costly than static content or pure SPAs

-

50

CO - Impact Point

NEXT.JS SCORES

BUSINESS OPPORTUNITY

-

200

The need to custom build your app can rule out Next for low-complexity projects where time-to-market is top priority

-

200

BO - Impact Point

PRODUCTIVITY

+

100

A number of community packages help with faster development speed

-

50

Impossible to create real, SPA style, dynamic, client-side navigation using only the built-in router

+

50

PR - Impact Point

DIRECT COSTS

-

100

All SSG, ISR and SSR can eat into the budget on large projects if you are not careful

-

100

CO - Impact Point

Stage 4: Organization & Processes

Photo by Hugo Rocha on Unsplash

Practically speaking the frameworks are in a tie here, but to give Remix its due by the numbers, Remix comes out on top ๐Ÿ’ช at this stage as well! Why do I say it's a tie? The moral raising effects of adopting a new technology might be temporary. If we discount that from Remix, both frameworks have the same impact. But I won't discount it, the maturity benefits of Next just as well might be temporary but this is a comparison in June 2022 and these effect apply right now.

There are two main differences affecting the performance of the frameworks at this stage. What puts Remix ahead by a huge margin are the powerful built-in tools it offers to speed up full stack development. Next.js has some nice capabilities in this area as well but Remix clearly innovated beyond that. These translate into improved developer productivity, and the way I see this, as long as your project fits into the categories well supported by Remix, you will ship features (sometimes considerably) faster with it.

On the flip side, Remix didn't really prove itself yet to be scalable at massive organizations like Next.js. As a less mature tool it's no wonder and is likely to change in the future.

REMIX SCORES

PRODUCTIVITY

+

600

The variety of deployment targets offers an option for most projects that can fit into their processes

+

500

A match made in heaven for efficient fullstack development => improved developer productivity

-

100

If you struggle with process quality, don't adopt a tool that has no battle tested best practices

+

100

A fresh start levels the playing field and opens up opportunities to keep more employees happy

+

1100

PR - Impact Point

UTILIZATION

+

1500

A match made in heaven for efficient fullstack development => high utilization of developers

+

1500

UT - Impact Point

NEXT.JS SCORES

PRODUCTIVITY

+

500

Thanks to the variety of deployment targets, most projects can find an option that can fit into their processes

+

400

Good support for efficient fullstack development => improved developer productivity

+

500

Many best practices are built-in or enforced leading to great organizational scalability

+

1400

PR - Impact Point

UTILIZATION

+

1000

Good support for efficient fullstack development => high utilization of developers

+

100

Many best practices are built-in or enforced, leading to shorter ramp-up times for newcomers and internal project switching

+

1100

UT - Impact Point

Stage 5: Product Design

Photo by Theme Photos on Unsplash

NEXT.JS SCORES

PRODUCTIVITY

+

1000

Pre-made UI resources are available for most common project needs

+

200

Integration options with the dominant design tools

+

200

Dedicated tooling for fast UI design & development

+

100

Framer Handshake & URL Imports

+

1500

PR - Impact Point

UTILIZATION

+

500

With the right skills and processes, some tools can enable your designers to contribute to development

+

50

Framer Handshake & URL Imports are especially good techniques to increase the utilization of designers

+

550

UT - Impact Point

DIRECT COSTS

+

500

pre-made UI resources are very competitive in pricing (many completely free)

+

500

CO - Impact Point

REMIX SCORES

PRODUCTIVITY

+

800

Pre-made UI resources are available for most common project needs

+

200

Integration options with the dominant design tools

+

200

Dedicated tooling for fast UI design & development

+

50

Remix ๐Ÿ’— Tailwind

+

1250

PR - Impact Point

UTILIZATION

+

500

With the right skills and processes, some tools can enable your designers to contribute to development

+

500

UT - Impact Point

DIRECT COSTS

+

500

pre-made UI resources are very competitive in pricing (many completely free)

+

500

CO - Impact Point

Stage 6: Software Design

Methodology photo created by rawpixel.com - www.freepik.com

NEXT.JS SCORES

PRODUCTIVITY

+

500

Next.js has many established best practices and can utilize the maturity of React + (Node / Serverless) to set up scalable and maintainable projects

-

100

The router limitations, however, can bite you in the back in certain setups

-

100

Scaling self-hosted Next apps that use ISR pages can be complicated or even force you to use SSR instead

+

200

Optimizing frontend performance is very well supported by Next and the wider ecosystem

+

200

There's a rendering mode available for every use-case out there

+

500

Gradual migration to the framework is possible through well-documented methods

-

100

But incremental adoption can also create extra complexity

+

1100

PR - Impact Point

CUSTOMER EXPERIENCE

+

100

Persistent shared layouts and link prefetching gives back some of the nice UX enabled by SPA style, true client-side navigation

+

100

Using the right rendering strategy can improve the perceived performance of the sites that in turn stimulates user engagement

+

500

With the automatic paged-based code splitting and all the available manual tools, we can deliver top site performance and UX for our customers

+

700

CX - Impact Point

REMIX SCORES

PRODUCTIVITY

+

500

Remix can utilize the maturity of React + Serverless to follow scalable and maintainable architectural practices

+

100

The Remix abstractions simplify designing API endpoints and HTTP communication for common use cases

+

400

Gradual migration to the framework is possible to do through the standard methods

-

100

But each migration method has its drawbacks

-

50

Developers need to get used to handle API calls as form submissions with custom form field to encode data

-

50

It's not yet clear how will the Remix route/loader convention scale up with UI complexity and traffic

+

800

PR - Impact Point

DIRECT COSTS

-

50

Interaction heavy apps should think carefully about route/loader composiion to keep operational costs down

-

50

CO - Impact Point

Stage 7: Implementation & QA

Photo by Israel Andrade on Unsplash

NEXT.JS SCORES

PRODUCTIVITY

+

1000

Next.js can utilize the full ecosystem of React development and testing tools

+

1000

Choosing the right deployment target can remove a lot of the development work

+

300

Top-quality official docs to learn from and use as the go-to reference

+

100

Plenty of community created, free and paid learning materials to lower the learning-curve

+

400

One of the best online communities out there in the JS world to get help and guidance from

+

400

Tons of built-in features help to speed up regular development tasks (including the preview mode)

+

100

The community built tools for handling concerns like SEO (and more...) help in doing the same, too

+

200

API routes simplify designing API endpoints and speed up delivery

+

100

The new _middleware allows efficient handling of cross-cutting concerns in an integrated way

+

50

Superb zero-config support for all styling approaches and tools

+

50

PostCSS preconfigured and polyfills handled out of the box

+

50

Debug overlay with rich contextual information to speed up handling issues

+

50

Easy exception handling with the documented patterns

+

200

Local development has one of the quickest feedback loops in the JS ecosystem

+

100

There are some useful VSCode plugins to speed up common coding tasks

+

4100

PR - Impact Point

CUSTOMER EXPERIENCE

+

200

The official and community implementation of common web-app functionalities help to lower time to market and incease customer engagement

+

200

CX - Impact Point

UTILIZATION

+

100

Developers will spend less time picking up Next.js and more time shipping with it as it has some of the best training materials

+

100

UT - Impact Point

REMIX SCORES

PRODUCTIVITY

+

300

The used architecture and conventions greatly reduce the required development effort to deliver performant web applications on typical enterprise projects

+

200

High-quality official docs to learn from

-

50

Missing coverage of some usual but less-central topics

+

200

Developing community around the project to get help and guidance from

+

100

Easy exception handling with the provided error boundary functionality

-

50

The best official way of handling CSS can result in lots of boilerplate code

+

100

Local development has a quick feedback loop in most cases out of the box

-

50

Some tooling requires manual setup: TypeScript, CSS pre/post compilers even server hot-reload in a few cases

+

50

Easier to navigate your codebase thanks to colocation across the client/server boundary

+

100

The "Stacks" functionality of the CLI can automatically set up complex application stacks which removes a lot of initial complexity from projects

+

1000

Using the right deployment targets can remove a lot of the otherwise necessary development work

+

1000

Can utilize the full ecosystem of React development and testing tools

+

2800

PR - Impact Point

CUSTOMER EXPERIENCE

+

200

The built-in implementation of common web-app functionalities help new projects to lower time-to-market

+

200

Similarly the efficient API creation and built-in data handling solution speeds up delivery

+

50

Easy to implement optimistic UI updates improve UX directly and also through better DX

+

50

Gracefully handling errors on the UI leads to a better user experience

+

500

CX - Impact Point

UTILIZATION

+

100

Experienced React developers will spend more time developing and less time learning as Remix is easy to pick up for them

+

50

The focus on web standards makes it an easier switch target for non-js backend developers than most SPA metaframeworks

+

150

UT - Impact Point

Stage 8: Delivery

Binary System image from pixabay.com

REMIX SCORES

PRODUCTIVITY

+

500

Existing projects or developers heavily invested in certain cloud providers can most likely integrate Remix into their platform of choice without problems

+

500

New projects can choose from nearly the full range of modern deployment infrastructure to create their most effective setup

+

1000

PR - Impact Point

DIRECT COSTS

+

500

Building and deploying a site or app is usually not free. With Remix, you have many options to find a setup that works for you financially

+

100

You don't have to worry about vendor lock-in and excessivly high costs resulting from it - unless you adopt too many host specific features

+

600

CO - Impact Point

NEXT.JS SCORES

PRODUCTIVITY

+

300

Existing projects can most likely integrate Next.js into their platform of choice easily, with a few major exceptions

+

300

New projects can choose from a wide range of modern deployment infrastructure to create their most effective setup

+

600

PR - Impact Point

DIRECT COSTS

+

500

Building and deploying a site or app is usually not free. With Next.js, you have many options to find a setup that works for you financially

+

50

You don't have to worry too much about vendor lock-in and excessively high costs resulting from it - if you go with a static export, use Node or AWS

+

550

CO - Impact Point

Stage 9: Operation

Internet vector created by macrovector - www.freepik.com

REMIX SCORES

PRODUCTIVITY

+

2000

You can choose basically any setup or provider to operate and monitor your Remix project. Some can offer tremendous savings on the required dev/ops effort

+

500

Integration of the industry leading customer support services is possible through the standard web tools

+

2500

PR - Impact Point

UTILIZATION

+

100

If you have hardware and infrastructure to use, you can choose a setup that utilizes it

+

100

UT - Impact Point

DIRECT COSTS

+

500

The wide range of supported ops, maintenance and customer support tools and providers enable you to handpick a setup that fits your budget

+

500

CO - Impact Point

NEXT.JS SCORES

PRODUCTIVITY

+

2000

You can choose basically any setup or provider to operate and monitor your Next.js project. Some can offer tremendous savings on the required dev/ops effort

+

500

Integration of the industry leading customer support services is possible through the standard web tools

+

2500

PR - Impact Point

UTILIZATION

+

100

If you have hardware and infrastructure to use, you can choose a setup that utilizes it

+

100

UT - Impact Point

DIRECT COSTS

+

400

The wide range of supported ops, maintenance and customer support tools and providers enable you to handpick a setup that fits your budget

+

400

CO - Impact Point

Stage 10: Feedback

Label vector created by freepik - www.freepik.com

REMIX SCORES

BUSINESS OPPORTUNITY

+

1000

The web platform offers amazing tools for gaining insights into application usage and user needs, that in turn enables a lot of product improvements and new business opportunities.

+

1000

BO - Impact Point

CUSTOMER EXPERIENCE

+

100

When your users *want* to give feedback, you can adopt the necessary tools to let them do it delightfully

+

100

CX - Impact Point

PRODUCTIVITY

+

1000

Ready-made, high-quality solutions for feedback and insight collection takes a lot of effort off the development teams

+

1000

PR - Impact Point

DIRECT COSTS

+

500

The wide range of available solutions (and the possibility to build your own) ensures you can find the tools that fit your budget

+

500

CO - Impact Point

NEXT.JS SCORES

BUSINESS OPPORTUNITY

+

1000

The web platform offers amazing tools for gaining insights into application usage and user needs, that in turn enables a lot of product improvements and new business opportunities.

+

1000

BO - Impact Point

CUSTOMER EXPERIENCE

+

100

When your users *want* to give feedback, you can adopt the necessary tools to let them do it delightfully

+

100

CX - Impact Point

PRODUCTIVITY

+

1000

Ready-made, high-quality solutions for feedback and insight collection takes a lot of effort off the development teams

+

1000

PR - Impact Point

DIRECT COSTS

+

500

The wide range of available solutions (and the possibility to build your own) ensures you can find the tools that fit your budget

+

500

CO - Impact Point

Get new posts like this straight to your inbox by subscribing to my newsletter

ยฉ 2021 - 2023 All Rights Reserved

Jรณzsef Miskolczy

Find me on

Twitter

Reddit

Terms of Service

|

Privacy Policy

|

Other Legal