Develop a highly-performant application with the Remix framework and deploy to the edge with Netlify Edge Functions.
What is Remix?
Remix is a full stack web framework with a client-server model built on the Web Fetch API. The Remix framework includes several tools that help developers achieve stellar user experiences for apps: nested routes, parallel data requests, and built-in error handling.
Nested routes let developers map specific components of app layouts to URL paths. This allows the page to render a whole hierarchy of UI components at the same time. It makes the code easy to reason about, and it creates nice boundaries for errors within an app’s UI, too.
Meanwhile, Remix can also pre-fetch content in the background before a user even clicks or interacts with part of the app. For end users, navigating between parts of the app will feel super snappy because content doesn’t have to be generated on the fly after each interaction.
Slow loading spinner states, skeleton states, and general “jankiness” are all elements of web apps that we’ve collectively come to tolerate over the years. The Remix framework aims to eliminate these types of loading states completely.
What are Edge Functions?
Edge Functions allow you to deploy your code at “the edge” so it’s closer to your site visitors around the globe. Edge Functions are typically used to achieve Middleware use cases, like localization, personalization, and authentication. They can also be used to deploy entire applications to the edge.
Netlify’s Edge Functions are powered by Deno, an open-source runtime standard. They’re designed to work with a number of frameworks including: Astro, Eleventy, Hydrogen, Next.js, Nuxt, SvelteKit, and — of course — Remix! Read this in-depth exploration of Netlify Edge Functions to learn more.
Benefits of Using Edge Functions with the Remix Framework
A lot of the magic of Remix is powered by server-side rendering (SSR). By deploying your Remix application to the edge with Edge Functions, you ensure that server-side rendering happens closer to the end user request, which generally results in better performance.
Note: There are some caveats where performance might be impacted if APIs or data sources aren’t also on the edge. But, the Remix framework was designed with the edge in mind, and even anticipates scenarios with distributed databases.
Ultimately, you’ll need to give some attention to delivering excellent server performance — whether you’re running Remix on the edge or not.
Additionally, when you use Edge Functions with Remix, you can take advantage of React 18 streaming. It’s built into the Remix edge template and works out of the box!
To learn more about Reach 18 streaming concepts, check out this deep dive blog post from the folks at Saeloun.
Why Developers Use Netlify for Remix Apps
As a platform, Netlify offers a number of benefits for Remix developers, including:
- The ability to program and customize an advanced build workflow with Netlify Build and build plugins;
- Easier integrations, leveraging the power of Netlify Graph to explore and develop against third-party APIs; and
- A truly open ecosystem that’s standards-based, where you can always pick the right tool for the job and bring all of your tools together on one platform.
How to Start Building with Remix and Edge Functions
You can get started with Remix and Edge Functions on Netlify today! Here’s how to deploy a simple Remix app to the edge:
First, run npx create-remix@latest --template netlify/remix-edge-template to create a new Remix project.
Install any needed packages and follow the prompts to create a root folder for your project.
Next, in the root folder of your project, run npm install netlify-cli -g to install the Netlify CLI globally so you can run netlify dev. This will give you a local environment to test edge functions.
When you’re ready to deploy your app, you can deploy manually with the Netlify CLI or add a new site connected to a Git repo for automatic deployments.
We can’t wait to see what you build!
