In 2006 everybody wanted to introduce dynamic data loading (aka “Ajax”) into their PHP websites. Then we spent a decade with JavaScript rendered single-page applications. Finally, it’s 2022, and we combine 20 years of experience to create fast and secure websites in the cloud. Remix delivers just that: decades of experience.
We created a reference application to compare Remix to some of the best practices popular with our enterprise clients. You can use these findings to help you decide whether to make a move to Remix or to pass.
What is Remix?
Remix is a modern framework for building websites with React. Your users will enjoy the top-notch performance delivered by the built-in server-side rendering (SSR) engine. Of course, it’s not quite the same kind of SSR you know from Next, Gatsby, and other well-established systems, but we’ll talk about that later.
To fully understand Remix, you need to know the masterminds behind it. The core team at Remix are the ambitious open-source community superstars known for React Router, UNPKG, training courses, and other projects. They decided to combine their collective know-how into a framework that anyone can use repeatedly.
NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.
Routing is built into Remix, and it plays a vital role in setting up the architecture. Your Remix website’s file structure will be scaffolded to replicate the routes. It’s an interesting spin on how front-end routing works because the information is picked up from the file system instead of elaborate configuration files. This doesn’t mean that you need to hardcode all the routes, but the system rewards those who plan ahead.
Deploying a Remix website is as simple as selecting several possible strategies. Most popular cloud providers are supported, such as AWS Lambda, Cloudflare, Vercel, or a custom Express server. The only downside is that you have to select your deployment when creating the app. However, it is possible to switch, and you can read about it in the Best Practices section.
Key Features of Remix
Remix has a lot to love, but we assembled our top three capabilities because they can create incredible value.
Remix is a Developer-Friendly Full-Stack Framework
Remix is a full-stack JavaScript framework. In fact, front-end developers might not even notice that parts of their code, like form actions, are executed on the server. The framework will set up most of the deployment infrastructure, allowing engineers to focus on efficiency and business value.
We feel that front-end developers will effortlessly convert to full-stack because the integration step is almost completely removed in favor of efficiency.
The Significance of Nested Routes
Nested Routes don’t necessarily define page hierarchy. Instead, they construct a content hierarchy. Any dynamic content that can change if commanded by user interaction is a candidate for Nested Routes.
Routes could easily scaffold the entire Spotify-like media player user interface, as an example: /browse/playlist/123/play/789. We can convert this path into a set of commands:
- render the UI for browsing playlists
- Load playlist ID 123
- The audio player is visible
- Song ID 789 is playing, so load the metadata
Since routes store a part of the application state, we can leverage exciting benefits:
- The server-side renderer can update fractions of UI when needed
- Caching efficiency is improved due to increased fragmentation
- Users can use browser buttons to navigate between state changes
- Users can share links to the wanted UI state
Explaining the advantages of Nested Routes in Remix to a business executive is simple:
- The website is cheaper to run because updating content is cheaper
- Users will reach conversion goals faster because the website is easier to navigate
- The website will improve the reach on social networks because we make it easier to share content
- Marketing and Product will gain better insights into valuable content as they can track sharing intentions
- The business can use A/B testing on content fractions to generate better insights
This doesn’t mean you should go crazy with splitting your UI into nested routes. On the contrary, a reasonable, unsaturated, and well-tested level of UI decoupling will do the magic.
Let the Cloud Make API Calls
You will never see YouTube API calls in our Video Channel reference app. This improves security by hiding tokens from the user and boosts performance by managing caching in the cloud. Moreover, we reduced the load on the YouTube endpoint, which helped stay within hit rate limits.
You can use this capability effortlessly. Remix ships with all the necessary groundwork, and you might not even know that you’re getting all these benefits.
Is Remix a JAMstack Framework?
JAMstack conceptually offers the same benefits as Remix, but a key difference sets them apart. JAMstack apps are generated in advance, at build time. Therefore, data updates require a full or a partial re-build, and that process must be custom configured.
In contrast, Remix renders views in real-time, which means that the website is always fresh. JAMstack’s static file serving may seem like it will beat a dynamically generated Remix site. After all, this is precisely why organizations have moved away from CMS engines like WordPress. However, Remix shows its true colors when deployed in a modern CDN environment. A Remix website will re-render a page only if it needs to. Then the content gets cached in the CDN until a new update is required. It’s a potent combination that takes the best of all worlds.
Should Your Company Migrate to Remix?
Remix isn’t a revolutionary idea. Instead, it combines best practices that help deliver outstanding performance, excellent maintainability for developers, and a stellar user experience. Most organizations want to utilize the features offered in Remix out of the box. However, they’ll invest considerable time and effort to implement it manually.
Remix version 1 is excellent for internal projects and small company websites. Full-stack engineers should take the opportunity to take a deep dive into the documentation, sample projects, and Remix source code. There is an incredible amount of information to learn from.
Software architects responsible for a mission-critical, highly-scalable enterprise project may want to spend time experimenting with Remix. A quick prototype is usually an excellent investment to learn if the framework will meet the requirements. The existing tooling is good, but we expect future versions to introduce further advances in flexibility for large teams.
If your business already has a React-based website, migration will become much easier. You will probably have to rewrite your routes, but any custom components you move over will work as expected. The Strangler Pattern is a viable migration strategy, especially if you decide to deploy on the CDN. A cross-cloud system will also work like a charm.
Remix Best Practices
As we worked on our very own Remix project, we learned a few lessons that we want developers to take away:
Cross-Cloud Remix is Node-Agnostic
Remix can run in the most popular CDNs and serverless environments. However, some run NodeJS, and the others, like Cloudflare, use Service Workers as the serverless engine. Therefore, to maintain a proper cross-cloud codebase, you should avoid NodeJS internals. Sadly, many NodeJS libraries will not work well as they depend on Node internals. For example, not even “process.env” will work in Cloudflare’s serverless.
Know Your Dependencies
Since Remix streamlines full-stack development in a single codebase, it’s easy to confuse backend and front-end dependencies. Some libraries like “gaxios” or “chalk” or internals like “fs” or “path” are made to work with NodeJS and might fail in a browser environment. Another reason you want them away from the browser is the increased bundle size, which degrades performance. Remix allows you to designate server-only and client-only code by introducing an optional filename suffix like “utils.server.ts” and “utils.client.ts.” Learn about your dependencies and use this capability to signal Remix to only use some dependencies just on the server.
Move More Business Logic to the Server
CDNs are so fast that it makes sense to decouple more business-logic code to the backend. For example, we moved YouTube loading APIs to the backend in our Remix sample app, which helped with security and server-side rendering capacity. Even if most users will have JavaScript enabled, planning for browsers that disable JavaScript will help develop with performance in mind.
Check Out Our Remix Reference Application
If you want to set up a website that utilizes many of the best practices from development to deployment, but you don’t want to invest lots of effort to implement it, then Remix is what you are looking for.
We created a sample application with Remix to help the community get up to speed faster. Our Remix Video Player leverages Nested Routing and deploys the website to Cloudflare Pages. Take a look at our online demo, and feel free to fork the GitHub repository.
