TNS
VOXPOP
You’re most productive when…
A recent TNS post discussed the factors that make developers productive. You code best when:
The work is interesting to me.
0%
I get lots of uninterrupted work time.
0%
I am well-supported by a good toolset.
0%
I understand the entire code base.
0%
All of the above.
0%
I am equally productive all the time.
0%
Edge Computing / Frontend Development

Vercel Adds Remix: Integration Supports Larger Apps

Vercel will now support Remix after integrations offering edge functions, support for larger apps, and streaming SSR.
Mar 29th, 2023 10:22am by
Featued image for: Vercel Adds Remix: Integration Supports Larger Apps
Image via Pexels

Frontend developer platform Vercel will support Shopify’s Remix on its cloud platform, after investing in the framework via research and development. It’s part of Vercel’s effort to broadly support JavaScript frameworks, said Lee Robinson, Vercel’s vice president of developer experience.

“We support 35 frameworks,” Robinson told The New Stack. “Our goal is to try to support any web framework that you want deployed on the internet. So when we were looking at our metrics, we noticed a lot of people were starting to deploy — of course, Next.js — and Remix, versus maybe the traditional Create React App-style application, which is another way of deploying your React apps.”

Vercel said the investment will allow developers to deploy and scale Remix apps of any size or complexity.

Remix: A Short History

Vercel created and maintains Next.js, another open source React framework which is often positioned as a competitor to Remix. React is a JavaScript library for creating user interfaces (UIs) for single-page applications for web and mobile. React frameworks build upon this library. Remix is a React framework. It’s edge-first and full-stack, meaning it can be used to develop both frontend and backend. Created by Michael Jackson, an ex-Twitter engineer, and Ryan Florence, a software engineer who led React Training, it was released in Oct. 2020. They open sourced it under the MIT license in October 2021 and it was acquired a year later by Shopify.

React-based frameworks are built on top of the library, although Remix is less tightly coupled to it than Next.js, according to Facundo Giuliani, a developer relations engineer at Storyblok.

“Both frameworks were created on top of React, but Remix tries to decouple itself from it,” Giuliani wrote last year. “We can see that Remix provides higher levels of abstraction. Also, different Remix community members have been working on different implementations using other frameworks, like Vue.js, Angular and Svelte. Next.js depends on React, and there is no plan to change this at the moment.”

Vercel’s Investment in Remix

Vercel has been working with the Remix team to improve the framework, according to Robinson.

“Our team did contribute actual upstream changes to the repository and worked with the core team there on some suggestions for where to take it in the future,” Robinson said.

One of the suggestions came from customers who used Remix. They wanted to use Vercel edge functions with the framework. Remix was designed to focus on single runtime, he said.

“It didn’t have the ability to be more granular about wanting to use different types of runtimes for different pages. So with Vercel, for example, we have serverless and edge functions — our two compute products that we offer. You can use Node.js if you want or you can use our edge product,” he said.

Vercel contributed changes and worked with the Remix team so that the core of Remix would support multiple runtimes with serverless and edge functions. Similarly, Vercel wanted Remix to be able to break down the serverless apps into multiple separate pieces, rather than one bundle, so that when it’s deployed to a provider like Vercel, each piece could use a serverless or edge function.

“If I have 1,000 routes in my application, you’re going to run into some limits if you try to put that all into one bundle,” Robinson said. “With Remix on Vercel, it can scale to thousands and thousands of routes, because it gets broken apart into these multiple bundles. For hobby developers or small or medium-sized businesses, they love that that compute is able to scale up or down and they pay for only what they use.”

Other functions supported by the integration with Vercel include:

  • Streaming SSR, which allows developers to incrementally render parts of the UI to the client;
  • Unlocking serverless actions;
  • Stale-while-revalidating caching support, which means a request to read a value is served immediately from a cache; and
  • Support for larger apps and bundles.

Vercel posted a demo of Remix running on its platform to show the integrations at work.

Robinson said one thing Remix does really well is to help developers think about and take advantage of the web platform.

“What that means in the day-to-day is, rather than having framework-specific APIs, it’s having a framework that builds on top of the web platform itself, and it uses web APIs like request, response and fetch that are portable and interchangeable between different frameworks,” Robinson said. “For developers, this is a really powerful and exciting thing because if I learned how to use the web, fetch API, I can use Next.js or Remix or Sveltekit. And once I learned this knowledge, I can kind of write it in multiple different places… The more that developers can learn pieces and have those be interoperable and shareable between different frameworks, I think is a really great outcome for the web.”

Group Created with Sketch.
TNS DAILY NEWSLETTER Receive a free roundup of the most recent TNS articles in your inbox each day.