<aside> 📖 A brief comparison between Remix and Next.js frameworks
</aside>
Remix describes itself as:
Remix is an edge native, full-stack JavaScript framework for building modern, fast, and resilient user experiences. It unifies the client and server with web standards so you can think less about code and more about your product.
Compared to Next.js, which is one of the most React frameworks used for server-side rendering and has been there for a significant time, Remix appears as a new strong competitor. Developers have started to wonder what the difference between these two frameworks is.
In this post, we will mainly focus on Remix and highlight what makes it unique and where it shines the most.
Despite the same idea of creating websites that are rendered on the server before being sent to the client, Remix and Next.js go with distinct approaches.
Remix doesn't support Static Site Generation (SSG) but it suggests using HTTP stale-while-revalidate caching directive (SWR) as an alternative. The key here is that static routes are cached using a CDN. These routes are then served to users on each visit and automatically revalidated for the next visitor.
Both Remix and Next.js follow a file-based routing system.
In Next.js, each file inside the /pages directory will be automatically set as a route.
pages/index.js ==> /
pages/users/index.js ==> /users
pages/users/create.js ==> /users/create
Remix also does the same but the route directory is /app/routes:
app/routes/index.js ==> /
app/routes/users/index.js ==> /users
app/routes/users/create.js ==> /users/create
Built on top of React Router, Remix shines when it comes to nested routing. It comes with a very powerful route nesting mechanism that can put one or many routes inside another route and those act like children components that can be mounted and unmounted depending on the active URL path. We need to use an Outlet component to render the route hierarchy from the parent routes.
Next.js, on the other hand, comes with its own router and has support for routes nesting but it’s not so easy to do so compared to Remix.
Next.js supports different ways for loading data on the server-side like getServerSideProps and getStaticProps based on the type of web app.