Front-end development has changed dramatically in the past decades – from Ajax and applets to WordPress to frameworks like React. Now, if you plan to create a web app, you must conduct extensive research to determine which stack, frameworks, and meta-frameworks are the best fit for your project.
Many online comparisons provide a feature-by-feature meta-frameworks comparison, but these features have different significance for different business goals!
But first, we need to outline the comparison criteria. We'll compare them based on: Rendering methods, Protocols of data exchange, routing, and other features.
TL;DR: You might not need Next.js alternatives If you are developing a big project. If you are not constrained by size, pick either Gatsby or Next.js. If you aren’t a fan of Jamstack, pick Remix.
In this article, we cover
- Modern Front-End Development Challenges
- Rendering Methods
- How do the Frameworks Compare on Rendering Methods?
- Protocols of Data Exchange
- Routing
- Other Features
- Ready to build a web application with Next.js?
Modern Front-End Development Challenges
When choosing a front-end meta-framework, you should remember that the contemporary web's main priority is excellent user experience.
Your website should be fast to load, even on the slowest connection, and easy to navigate. So, most modern meta-frameworks were built with performance in mind.
What happens if your service becomes extremely popular in a short time? It needs to be easily scalable. Otherwise, your clients will experience delays, and you’ll fail to provide for their needs.
Then, developer experience has great importance. Your meta-framework won’t gain popularity if it doesn’t offer ease of development. That’s why pre-built components are tailored to minimize developers' input.
Rendering Methods
When comparing meta-frameworks, they first consider the rendering methods they support. Different rendering methods optimize load latency for different page scenarios.
First, let’s recap what’s there on the scene and then see how the meta-frameworks compare to rendering methods!
Server Side Rendering/Static Site Generation
There are many reasons to avoid client side rendering (CSR) and pick server-side rendering (SSR) or static site generation (SSG) instead.
In SSR, each page is generated anew upon request, which takes time. Conversely, all website pages are rendered upon build time at once in SSG. Upon request, a pre-rendered page is retrieved from the storage or a content delivery network (CDN) and served to the client.
So, in SSG, pages are served faster! But they may become stale and won’t be refreshed until the next build.
Incremental Static Regeneration/Deferred Static Generation
If you want to build an extra-large website like Aliexpress, you may combine SSR and SSG: pre-render a small quantity of the pages and render the others upon request. But there’s more you can do.
Next.js introduces one more trick: when a page is generated upon request, it is saved for a predefined amount of time. If the following request comes after the timeout, the page will be re-rendered and saved again. This mechanism, called Incremental static regeneration (ISR), helps to profit from SSG without pages getting stale for a long time.
There is an issue, however: the data displayed on the main/grid page and the item page may diverge. The main page is re-rendered upon consequential builds (once a day or even rarer), and item pages are re-rendered upon timeout (seconds or minutes).
Gatsby introduces deferred site generation (DSG), which tackles the issue of inconsistent data in big websites, but at the price of data getting stale: all the data is cached upon build time, and when item pages are re-rendered, they refer to this data layer.
React Server Components
Two years ago, React introduced React Server Components (RSC). The objective of RSC was to make the client and the server collaborate on rendering.
How does it work? The components that interact with other APIs are generated on the server, and others are rendered in the browser. Server component updates are also rendered on the server and sent to the client in a JSON-like format.
That way, the JS bundle shipped to the client gets much smaller than in CSR, the data doesn’t get stale as in SSG, and the page doesn’t take much time to load. Profit!
You can combine RSC and SSR in the hydration phase to achieve partial hydration.
How do the Frameworks Compare on Rendering Methods?
You don’t have to pick a single rendering method for the whole website. So, the more rendering methods are available to you, the better you will be able to optimize your website for various behavior scenarios.
Next.js and Gatsby support SSR, SSG, ISR/DSG, and RSC.
Next.js’s initial focus was on SSR, but lately, they have recommended using SSG.
Conversely, Gatsby is made to be used with SSG. V.4. introduces SSR support, but the framework authors discourage using it.
As for ISR and DSG, picking one is a matter of taste. The two methods are very similar, but Gatsby prioritizes data consistency, while Next.js promotes the view that data should not get stale.
Gatsby now offers RSC support, but it comes two years later than Next.js introduced it. (Next.js is generally very fast in responding to React’s new features.)
Remix is different regarding rendering methods, as it only supports SSR. The language authors claim that coupled with Edge deployment (locating computing and storage capacities close to the end user), the method will score the same as SSG on the load latency.
While this may be true, deploying on the Edge costs more than just deploying on the cloud server, and using edge functions requires knowledge. By the way, Next.js and Gatsby provide Edge computing support, but they are not “Edge-first.”
| - | Next.js | Gatsby | Remix |
|---|---|---|---|
| SSR | + | +/- | + |
| SSG | + | + | - |
| ISR / DSG | + | + | - |
| RSC | + | + | - |
| Edge Support | + | + | + |
Protocols of Data Exchange
The two most popular data exchange protocols are REST API and GraphQL. The latter is gaining popularity now because it has no over fetching and fewer queries than REST.
It’s good for a framework to support both protocols, and that’s what Next.js and Remix do.
Gatsby is designed to be used with GraphQL and features a dedicated data layer for ease of development. While it also supports REST APIs, it advises against the method. Though, it’s not always possible to use GraphQL: you often need to deal with external APIs that are using a protocol you can’t change.
| - | Next.js | Gatsby | Remix |
|---|---|---|---|
| REST API | + | +/- | + |
| GraphQL | + | + | + |
Routing
Next.js comes with file-system-based routing: when a file is added to the ‘pages’ directory, it’s automatically available as a route. So, you don’t need to have a dedicated router file. Gatsby and Remix routers are also file-system-based, with slight differences in syntax.
Nested routing is simple in all the meta-frameworks: you place the nested pages inside a folder.
For dynamic routing, specify the file or the folder name in the square brackets, like [itemId].jsx (for Next.js) or $itemId.jsx (for Gatsby). There’s also a catch-all-routes feature to eliminate excessive route nesting.
The Remix router is positioned as standing out by its authors. Why? It’s based on the React Router, allowing you to utilize related React hooks, i.e., useParams or useNavigate, or its partial routing feature. Remix routing is coupled with data loading, which makes code more structured: all loading states are handled for you.
Remix’s nested routing allows children to inherit the graphic layout of the parent, which was a feature unique to the framework until Next.js introduced nested routes with nested layouts support in October 2022 (v.13).
| - | Next.js | Gatsby | Remix |
|---|---|---|---|
| Nested Routing | + | + | + |
| Dynamic Routing | + | + | + |
| Nested Routes w/Nested Layouts | + | - | + |
Other Features
While Next.js scales well, Gatsby still has issues with scaling. Meanwhile, it’s hard to say how Remix scales: some benchmarks use CDN caching, with which it scales better.
A plugin ecosystem simplifies development, as you don’t have to integrate the needed modules manually. With Gatsby, it’s simple: you install the needed plugin and provide the API key. It’s not the same for Next.js or Remix, though: there’s no excessive plugin ecosystem, and you must read the API documentation to integrate.
Gatsby has a major issue with documentation: many APIs are not documented, and terminology is imprecise. Remix and Next.js both have very detailed documentation.
As for image optimization, all three meta-frameworks provide it, but in each framework, it is spiced up in a specific manner.
Gatsby’s philosophy promotes a supportive and broad community. Same with Next.js: its vast community can be found on GitHub and Discord.
Conversely, Remix is a one-person play, even though the framework was open-sourced some time ago.
Remix’s inspirational leader, Ryan Florence, believes that things have gotten overly complicated on the modern web while the core of user actions stays the same. So, Remix’s purpose is to bring back the simplicity of Web1.0!
That’s why it has a set of distinct traits: it’s built on top of standard Web APIs, while Next.js and Gatsby depend on Node APIs.
It comes with a distinct approach to form handling, which resembles how we dealt with forms in plain old HTML; it doesn’t support less formatting, etc. While some like it, many prefer to stay away.
| - | Next.js | Gatsby | Remix |
|---|---|---|---|
| Scaling | + | - | ? |
| Plugin Ecosystem | - | + | + |
| Documentation | + | - | + |
| Image Optimization | + | + | + |
| Community Support | + | + | - |
Closing thoughts
Let’s now turn back to the metrics we defined earlier. The first one is the quality of user experience. It’s highly dependent on the load latency. Offering multiple rendering methods is crucial for a meta-framework because different pages and even components may be faster to render on the client or the server.
Among the meta-frameworks, Next.js and Gatsby feature the highest number of supported rendering methods, with slight differences in minutiae. However, Next.js doesn’t push you to use one method over the other.
Additionally, Next.js scales well, so it is recommended for larger projects, while for small ones, either meta-framework is good.
As for the developer experience, Remix’s claim to be the best withstands critique only for some people. Also, many design patterns are new to developers.
Meanwhile, Next.js and Gatsby also have perks for developers. Next.js embraces the idea of simplicity and pragmatism. Its core is small and won’t take much time to explore. The meta-framework has high modularity and adheres to the DRY principle.
Gatsby, on its side, adheres to the progressive disclosure complexity principle, meaning that you can start coding with only a brief framework knowledge.
Additionally, from a larger perspective, user and developer experiences matter unequally. You will lose your customers if your framework offers a great developer experience but is not user-friendly.
Top comments (0)