Remix assume Next.js em Battle of the React Frameworks

Os frameworks JavaScript Remix e Astro estão atualmente recebendo muita atenção como alternativas mais simples ao Next.js, o framework dominante da era React. Dos dois frameworks iniciantes, o Remix é mais um concorrente direto do Next.js, já que ambos são baseados na biblioteca React (o Astro é independente de framework, então você pode usá-lo não apenas com React, mas com Vue, Svelte e outros).

Outra coisa que Next.js e Remix têm em comum é o apoio corporativo. Next.js é patrocinado pela empresa Vercel, financiada por VC, enquanto o Remix foi adquirido pelo Shopify em outubro de 2022.

Portanto, Remix e Next.js parecem ter muito em comum, mas o que você pode não perceber é que as origens do Remix remontam a vários anos. antes Próximo.js. Então, para saber mais sobre a história (e o futuro) do Remix, conversei com seu cocriador e CEO, Michael Jackson.

React Router e as origens do Remix

Provavelmente o maior diferencial do Remix é sua abordagem de renderização no servidor. O Remix se descreve como “um tempo de execução contínuo de servidor e navegador” que aproveita “sistemas distribuídos e recursos nativos do navegador em vez de construções estáticas desajeitadas”. Ele é construído na API Web Fetch, em vez do Node, e “pode ser executado em qualquer lugar”.

O núcleo da abordagem de servidor do Remix remonta a 2014, quando seus criadores lançaram o React Router. Na verdade, a documentação do Remix afirma que “90% do Remix é na verdade apenas React Router”, que chama de “uma biblioteca muito antiga e muito estável que é talvez a maior dependência no ecossistema React”.

“React Router foi um projeto que iniciamos em um momento em que o próprio React ainda estava lutando para ganhar popularidade”, disse-me Jackson. “Eu sei que é meio difícil de acreditar agora, olhando para o cenário mais amplo da web onde o React é rei.”

O React Router foi criado em 2014 por Jackson, na época engenheiro do Twitter, e Ryan Florence, engenheiro de uma empresa chamada Instructure. A dupla construiu o React Router porque essa biblioteca estava faltando no próprio React. Simplificando, o React Router permite “roteamento do lado do cliente” – o que significa que novos componentes JavaScript podem ser carregados sem recarregar a página inteira.

Jackson e Florence construíram uma consultoria em torno do React Router, mas por vários anos eles não ofereceram uma maneira própria de usar o React como um todo. Guillermo Rauch os superou com Next.js, que estreou em outubro de 2016. Mas foi somente em 2020 que a empresa de Rauch, originalmente chamada de ZEIT, mas renomeada como Vercel em abril de 2020, começou a comercializar seriamente Next.js. Foi nessa época que o Remix nasceu.

“Em 2020, decidimos assumir o resto da pilha e ver se poderíamos construir algo que fosse mais completo, uma estrutura completa em cima do React Router”, disse Jackson. “E é isso que Remix é. Remix é basicamente todas as nossas opiniões sobre desenvolvimento web, construídas sobre o React Router.”

Ele acrescentou que grande parte da inspiração para o Remix veio de antigos frameworks PHP e também de Ruby on Rails, um dos frameworks web mais populares da era Web 2.0.

Como o Remix é usado na pilha do Shopify

Jackson mencionou algumas vezes durante nossa entrevista que muitas “grandes empresas” construíram sobre o React Router ao longo dos anos – e uma delas foi o Shopify. “Então eles já nos conheciam”, disse ele, “e já usavam nosso software muito antes da aquisição da Remix”.

Na verdade, o Shopify tentou construir sua própria estrutura semelhante ao Next.js. Em novembro de 2021, pouco menos de um ano antes da aquisição da Remix, o Shopify lançou uma estrutura de desenvolvimento web baseada em React chamada Hydrogen. Na época, o engenheiro principal do Shopify, Ilya Grigorik, me disse que o objetivo da empresa era “fazer com que a renderização do lado do servidor e o comércio dinâmico funcionassem bem juntos”. O hidrogênio foi sua solução personalizada para isso.

Mas quando o Remix foi adquirido em outubro de 2022, rapidamente se tornou a nova estrutura padrão do Shopify. Shopify.com foi reconstruído usando Remix, disse-me Jackson. Shop.app, o aplicativo iOS e Android da empresa, também foi reconstruído usando Remix. Mas espere, tem mais. Jackson disse que o Hydrogen foi “completamente construído em cima do Remix agora”.

“Então o Hydrogen, hoje em dia, funciona mais ou menos como uma biblioteca em cima do Remix”, disse ele. “Remix é uma espécie de base para todo o Hydrogen v2.”

Um dos projetos atuais do Shopify é reconstruir o painel que todos os seus clientes de comércio eletrônico usam. Jackson disse que é o maior software da empresa (“milhões de linhas de código”). Um aspecto interessante deste projeto é que eles estão usando o Vite como compilador no Remix, que é um software que não vem da comunidade React, mas da comunidade Vue. Jackson descreveu o Vite como “uma alternativa ao Webpack”, o empacotador de módulos para JavaScript.

Jackson também destacou que desenvolvedores terceirizados também estão sendo incentivados a usar o Remix.

“Enviamos um modelo que permite que desenvolvedores que estão trabalhando em aplicativos de terceiros também criem seus aplicativos com o Remix e, você sabe, se autentiquem no Shopify e façam tudo isso. Então (…) Remix não é apenas algo que recomendamos para nossos comerciantes, é também algo que recomendamos para desenvolvedores que estão integrando com o Shopify.”

Como o Remix está lidando com a complexidade do React

Um dos temas do ano passado no desenvolvimento de frontend foi a crescente complexidade do ecossistema React. Perguntei a Jackson se ele concordava que o React se tornou muito complexo.

“Sim, vejo a resistência”, reconheceu ele. “Há muitas pessoas que pensam, nossa, o React costumava parecer mais simples. Meu apelo para a comunidade React seria que percebessem que existem muitas boas ideias por aí. A implementação atual de muitas dessas ideias inovadoras do React é (…) Next.js. É aí que muitas dessas ideias são divulgadas e comentadas pela primeira vez, no Next.js.”

O que Jackson quer dizer é que Remix tem próprio implementações de novos recursos do React, então vale a pena os desenvolvedores conferirem.

“Esse foi o objetivo de Ryan e eu construirmos o Remix – quando olhei para o Next pela primeira vez, não consegui nem fazer com que ele retornasse os códigos de status adequados. Ficou muito claro para mim, desde muito cedo, (…) que valorizávamos coisas muito, muito diferentes.”

Ele citou o aprimoramento progressivo como uma das coisas que o Next.js não parece valorizar, mas que o Remix valoriza.

“Para aqueles de nós que já trabalham na Web há algum tempo, esse termo (aprimoramento progressivo) transmite muita compreensão e valor para nossos usuários. E isso é algo com o qual realmente nos importamos, é algo que você sempre obterá quando estiver construindo com o Remix.”

A postagem Remix assume Next.js em Battle of the React Frameworks apareceu pela primeira vez em The New Stack.