Você provavelmente já ouviu muito hype em torno de uma das crianças mais novas do bloco de estrutura, Remix. Pode ser surpreendente que tenha começado em 2019, mas originalmente estava disponível apenas como uma estrutura premium baseada em assinatura. Em 2021, os fundadores levantaram financiamento inicial e abriram a estrutura para permitir que os usuários começassem a usar o Remix gratuitamente. As comportas se abriram e todo mundo parece estar falando sobre isso, bom ou ruim. Vamos mergulhar e ver alguns dos fundamentos do Remix.
Remix é um primeiro framework JavaScript de “borda” de servidor. Ele usa React, pelo menos por enquanto, para o front-end e prioriza a renderização do aplicativo no lado do servidor na borda. As plataformas podem pegar o código do lado do servidor e executá-lo como funções sem servidor ou de borda tornando-o mais barato que um servidor tradicional e colocando-o mais próximo de seus usuários. Os fundadores do Remix gostam de chamá-lo de framework “center stack” porque adapta as solicitações e respostas feitas entre o servidor e o cliente para a plataforma em que está sendo executado.
Como implantar o Remix
Como o Remix requer um servidor, vamos falar sobre como você pode implantá-lo. O Remix não fornece o servidor em si — você traz o servidor — permitindo que ele seja executado em qualquer Node.js or Deno meio ambiente, incluindo Borda Netlify e Plataforma de aplicativos da DigitalOcean. Remix em si é um compilador, um programa que traduz as requisições para a plataforma em que está rodando. Este processo utiliza desconstruir para criar manipuladores para as solicitações ao servidor. Os manipuladores HTTP que ele usa são construídos no API de busca da Web e são executados no servidor por adaptação para a plataforma em que serão implantados.
Remixar pilhas
Remix stacks são projetos que possuem algumas ferramentas comuns pré-configuradas para você. Há três pilhas oficiais que são mantidos pela equipe Remix e todos eles têm nomes de gêneros musicais. Há também uma série de pilhas de Remix da comunidade, incluindo o Pilha de K-Pop criado pela equipe de modelos da Netlify. Esta pilha é uma potência e inclui um superbase banco de dados e autenticação, Tailwind para estilizar, Cipreste teste de ponta a ponta, Mais bonito formatação de código, ESLint fiapos, e TypeScript digitação estática. Confira o post de Tara Manicsic sobre a implantação do K-Pop Stack.
Cache de rotas
Mesmo que o Remix exija um servidor, ele ainda pode aproveitar o Jamstack benefícios das rotas de cache. Um site estático ou geração de site estático (SSG) é quando todo o seu conteúdo é renderizado no momento da compilação e permanece estático até outra reconstrução. O conteúdo é pré-gerado e pode ser colocado em uma CDN. Isso oferece muitos benefícios e carregamentos rápidos do site para o usuário final. No entanto, o Remix não faz SSG típico como outros frameworks React populares, incluindo Next.js e Gatsby. Para obter alguns dos benefícios do SSG, você pode usar o nativo Cabeçalho HTTP de controle de cache em um remix função de cabeçalhos para armazenar em cache uma rota específica ou diretamente no root.tsx arquivo.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Em seguida, adicione em seu função de cabeçalhos onde você quer. Isso armazena em cache por uma hora:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Remixando roteamento
Muitos frameworks se apoiaram no roteamento baseado em sistemas de arquivos. Esta é uma técnica em que uma pasta designada é usada para definir rotas para seu aplicativo. Eles normalmente têm sintaxe especial para declarar rotas e pontos de extremidade dinâmicos. A maior diferença atualmente entre o Remix e outros frameworks populares é a capacidade de usar roteamento aninhado.
Todo aplicativo Remix começa com o root.tsx Arquivo. É aqui que toda a base do aplicativo é renderizada. Você encontrará alguns dos layouts HTML comuns aqui, como o <html> tag, o <head> marca e, em seguida, o <body> tag com os componentes necessários para renderizar o aplicativo. A única coisa a destacar aqui é a <Scripts> componente é o que habilita o JavaScript no site; algumas coisas funcionarão sem ele, mas nem tudo. o root.tsx arquivo atua como um layout pai para tudo dentro do routes diretório, tudo nas rotas é renderizado onde o <Outlet/> componente está em root.tsx. Esta é a base do roteamento aninhado no Remix.
Roteamento aninhado
Não só a Remix foi fundada por alguns membros da equipe de Roteador React, isso também usos Reagir Roteador. Na verdade, eles são trazendo algumas das coisas boas do Remix de volta ao React Router. Um problema complexo que os mantenedores do Next.js e do SvelteKit estão tentando resolver agora é o roteamento aninhado.
O roteamento aninhado é diferente do roteamento tradicional. Onde uma nova rota levaria um usuário a uma nova página, cada rota aninhada é uma seção separada da mesma página. Ele permite a separação de interesses mantendo a lógica de negócios associada apenas aos arquivos que precisam dela. O Remix é capaz de lidar com erros localizados apenas na seção da página em que a rota aninhada está. As outras rotas na página ainda podem ser usadas e a rota que quebrou pode fornecer um contexto relevante para o erro sem que a página inteira falhe.
O Remix faz isso quando um arquivo raiz em app/routes é nomeado da mesma forma que um diretório de arquivos que será carregado dentro do arquivo base. O arquivo raiz se torna um traçado para os arquivos no diretório usando um <Outlet /> componente para informar ao Remix onde carregar as outras rotas.
Componente de saída
A <Outlet /> Component é um sinal para o Remix onde ele deve renderizar o conteúdo para rotas aninhadas. É colocado no arquivo na raiz do app/routes diretório com o mesmo nome das rotas aninhadas. O código a seguir vai em um app/routes/about.tsx arquivo e inclui a saída para os arquivos dentro app/routes/about pasta:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}Estrutura de pastas
Qualquer arquivo no app/routes/ diretório torna-se uma rota na URL de seu nome. Um diretório também pode ser adicionado com um index.tsx arquivo.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxSe uma rota tem o mesmo nome de um diretório, o arquivo nomeado se torna um arquivo de layout para os arquivos dentro do diretório e o arquivo de layout precisa de um Componente de saída para colocar a rota aninhada.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxOs layouts também podem ser criados prefixando-os com um sublinhado duplo (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about ainda vai renderizar app/routes/about.tsx arquivo, mas também renderizará o que estiver em app/routes/about/index.tsx onde o Componente de saída está na marcação de app/routes/about.tsx.
Rotas dinâmicas
Uma rota dinâmica é uma rota que muda com base nas informações do URL. Pode ser o nome de uma postagem de blog ou um ID de cliente, mas não importa qual seja o $ sintaxe adicionada à frente da rota sinaliza ao Remix que ela é dinâmica. O nome não importa a não ser o $ prefixo.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxBusque esses dados!
Como o Remix renderiza todos os seus dados no servidor, você não vê muitas coisas que se tornaram o padrão de um aplicativo React, como useState() e useEffect() ganchos, em Remix. Há menos necessidade de estado do lado do cliente, pois já foi avaliado no servidor.
Também não importa que tipo de servidor você usa para buscar dados. Como o Remix fica entre a solicitação e a resposta e a traduz adequadamente, você pode usar o padrão API de busca da Web. Remix faz isso em um loader função que só é executado no servidor e usa o useLoaderData() hook para renderizar os dados no componente. Aqui está um exemplo usando o API Cat as a Service para renderizar uma imagem de gato aleatória.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}Parâmetros de rota
Em rotas dinâmicas, as rotas prefixadas com $ precisam ser capazes de acessar o parâmetro URL para lidar com os dados que devem ser renderizados. o loader função tem acesso a estes através de um params argumento.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}Outras funções de remixagem
O Remix tem algumas outras funções auxiliares que adicionam funcionalidades extras aos elementos e atributos HTML normais no API do módulo de rota. Cada rota pode definir seu próprio desses tipos de funções.
Função de ação
An action função permite adicionar funcionalidades extras a uma ação de formulário usando o padrão web API FormData.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}Função de cabeçalhos
Qualquer Cabeçalhos padrão HTTP pode ir em um headers função. Como cada rota pode ter um cabeçalho, para evitar conflitos com rotas aninhadas, a rota mais profunda — ou a URL com mais barras (/) — ganha. Você também pode obter os cabeçalhos passados, actionHeaders, loaderHeadersou parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Metafunção
Esta função irá definir as meta tags para o documento HTML. Um é colocado no root.tsx arquivo por padrão, mas eles podem ser atualizados para cada rota.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Função de links
HTML link elementos vivem na <head> tag de um documento HTML e importam CSS, entre outras coisas. o links função, não confundir com <Link /> componente, permite importar apenas coisas nas rotas que precisam delas. Assim, por exemplo, os arquivos CSS podem ter escopo e serem importados apenas nas rotas que precisam desses arquivos específicos. o link elementos são retornados de um links() funcionar como uma matriz de objetos e pode ser um HtmlLinkDescriptor do link API ou um PageLinkDescriptor que pode pré-buscar os dados de uma página.
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}Ligação entre rotas
O Remix fornece um componente para percorrer as diferentes rotas em seu aplicativo chamado <Link/>. Para obter o roteamento do lado do cliente, use o <Link to="">Name</Link> componente em vez de <a href="">Name</a>. O <Link /> componente também leva um suporte de prefetch com aceita none por padrão, intent para pré-buscar os dados se o Remix detectar que o usuário passa o mouse ou focaliza o link, ou render que irá buscar os dados da rota assim que o link for renderizado.
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}Próximos passos
Agora você conhece o básico do Remix e está pronto para começar a construir aplicativos, certo? Remix oferece Aplicativo de piadas e de um Tutorial de blog para você começar a implementar esse conhecimento básico. Você também pode começar do zero e criar um novo aplicativo Remix. Ou se você estiver pronto para mergulhar, dê o Pilha de K-Pop uma tentativa. Eu realmente gostei do meu tempo com o Remix e adoro o foco nos padrões da web e trazê-lo de volta ao básico. Agora é a sua vez de começar a criar!
