Probabilmente hai sentito molto clamore attorno a uno dei ragazzi più recenti del blocco framework, Remix. Potrebbe sorprendere che sia iniziato nel 2019, ma originariamente era disponibile solo come framework premium basato su abbonamento. Nel 2021, i fondatori hanno raccolto fondi iniziali e aperto il framework per consentire agli utenti di iniziare a utilizzare Remix gratuitamente. Le cateratte si sono aperte e sembra che tutti ne parlino, nel bene e nel male. Immergiamoci e diamo un'occhiata ad alcune delle basi di Remix.
Remix è un primo framework JavaScript "edge" del server. Usa Reagire, almeno per ora, per il front-end e dà priorità al rendering lato server dell'applicazione al limite. Le piattaforme possono prendere il codice lato server ed eseguirlo come funzioni serverless o edge rendendolo più economico di un server tradizionale e avvicinandolo ai tuoi utenti. Ai fondatori di Remix piace chiamarlo un framework "center stack" perché adatta le richieste e le risposte fatte tra il server e il client per la piattaforma su cui viene eseguito.
Distribuire Remix
Poiché Remix richiede un server, parliamo di come distribuirlo. Remix non fornisce il server stesso - porti il server - consentendone l'esecuzione in qualsiasi Node.js or Deno ambiente, compreso Netlify Bordo ed La piattaforma dell'app di DigitalOcean. Remix stesso è un compilatore, un programma che traduce le richieste per la piattaforma su cui è in esecuzione. Questo processo utilizza costruire per creare gestori per le richieste al server. I gestori HTTP che utilizza sono basati su API di recupero Web e vengono eseguiti sul server da adattamento per la piattaforma su cui verranno distribuiti.
Remixa le pile
Gli stack Remix sono progetti che hanno alcuni strumenti comuni preconfigurati per te. Ci sono tre pile ufficiali che sono mantenuti dal team Remix e prendono tutti il nome da generi musicali. C'è anche un certo numero di stack Remix della comunità tra cui il Pila K-Pop creato dal Team Templates di Netlify. Questo stack è una centrale elettrica e include a supabase database e autenticazione, Tailwind per lo styling, Cipresso test end-to-end, Prettier formattazione del codice, ESLint pelucchi, e Dattiloscritto digitazione statica. Dai un'occhiata al post di Tara Manicsic sull'implementazione dello Stack K-Pop.
Percorsi di memorizzazione nella cache
Anche se Remix richiede un server, può comunque sfruttare il pila di marmellata vantaggi da percorsi di memorizzazione nella cache. Un sito statico o generazione di siti statici (SSG) è quando tutti i tuoi contenuti vengono visualizzati in fase di compilazione e rimangono statico fino a un'altra ricostruzione. Il contenuto è pregenerato e può essere inserito su una CDN. Ciò offre molti vantaggi e caricamenti rapidi del sito per l'utente finale. Tuttavia, Remix non esegue il tipico SSG come altri framework React popolari, inclusi Next.js e Gatsby. Per ottenere alcuni dei vantaggi di SSG, puoi utilizzare il nativo Intestazione HTTP di controllo della cache in un remix funzione di intestazioni per memorizzare nella cache un determinato percorso o direttamente nel file root.tsx file.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"Quindi aggiungi il tuo funzione di intestazioni dove lo vuoi. Questo memorizza nella cache per un'ora:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};Routing di remix
Molti framework si sono appoggiati al routing basato su file system. Questa è una tecnica in cui una cartella designata viene utilizzata per definire percorsi per l'applicazione. In genere hanno una sintassi speciale per la dichiarazione di percorsi ed endpoint dinamici. La più grande differenza attualmente tra Remix e altri framework popolari è la capacità di utilizzo instradamento annidato.
Ogni app Remix inizia con il root.tsx file. Qui è dove viene visualizzata l'intera base dell'app. Troverai alcuni dei layout HTML comuni qui come il <html> tag, il <head> tag, quindi il <body> tag con i componenti necessari per il rendering dell'app. L'unica cosa da sottolineare qui è il <Scripts> il componente è ciò che abilita JavaScript sul sito; alcune cose funzioneranno senza di essa, ma non tutto. Il root.tsx il file funge da layout principale per tutto ciò che si trova all'interno del file routes directory, tutto in route viene visualizzato in cui il file <Outlet/> componente è in root.tsx. Questa è la base del routing nidificato in Remix.
Instradamento nidificato
Non solo Remix è stato fondato da alcuni membri del team Reagire Router, anche usa Reagire router. In effetti, lo sono riportando alcune delle cose buone di Remix su React Router. Un problema complesso che i manutentori di Next.js e SvelteKit stanno cercando di risolvere in questo momento è il routing nidificato.
Il routing nidificato è diverso dal routing tradizionale. Laddove un nuovo percorso porterebbe un utente a una nuova pagina, ogni percorso nidificato è una sezione separata della stessa pagina. Consente la separazione delle preoccupazioni mantenendo la logica aziendale associata solo ai file che ne hanno bisogno. Remix è in grado di gestire gli errori localizzati solo nella sezione della pagina in cui si trova il percorso nidificato. Gli altri percorsi nella pagina sono ancora utilizzabili e il percorso interrotto può fornire un contesto pertinente all'errore senza che l'intera pagina si arresti in modo anomalo.
Remix fa questo quando un file di root è in app/routes ha lo stesso nome di una directory di file che verranno caricati all'interno del file di base. Il file radice diventa a disposizione per i file nella directory utilizzando un <Outlet /> componente per dire a Remix dove caricare gli altri percorsi.
Componente di uscita
I <Outlet /> Component è un segnale per Remix per dove dovrebbe rendere il contenuto per i percorsi nidificati. Viene inserito nel file alla radice del file app/routes directory con lo stesso nome delle rotte nidificate. Il codice seguente va in a app/routes/about.tsx file e include l'uscita per i file all'interno app/routes/about cartella:
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 />
</>
)
}Struttura delle cartelle
Qualsiasi file nel app/routes/ directory diventa un percorso all'URL del suo nome. Una directory può anche essere aggiunta con un index.tsx file.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxSe un percorso ha lo stesso nome di una directory, il file denominato diventa un file di layout per i file all'interno della directory e il file di layout necessita di un Componente di uscita in cui posizionare il percorso nidificato.
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxI layout possono essere creati anche anteponendoli con un doppio trattino basso (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about renderà ancora il app/routes/about.tsx file, ma renderà anche tutto ciò che è in app/routes/about/index.tsx dove Componente di uscita è nel markup di app/routes/about.tsx.
Percorsi Dinamici
Un percorso dinamico è un percorso che cambia in base alle informazioni nell'URL. Potrebbe essere il nome di un post del blog o un ID cliente, ma non importa quale sia $ la sintassi aggiunta alla parte anteriore del percorso segnala a Remix che è dinamica. Il nome non conta se non il $ prefisso.
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxPrendi quei dati!
Poiché Remix esegue il rendering di tutti i suoi dati sul server, non vedi molte delle cose che sono diventate lo standard di un'app React, come useState() ed useEffect() ganci, in Remix. È meno necessario lo stato lato client poiché è già stato valutato sul server.
Inoltre, non importa quale tipo di server utilizzi per recuperare i dati. Poiché Remix si trova tra la richiesta e la risposta e la traduce in modo appropriato, puoi utilizzare lo standard API di recupero Web. Remix lo fa in a loader funzione che esclusivamente viene eseguito sul server e utilizza useLoaderData() hook per eseguire il rendering dei dati nel componente. Ecco un esempio usando il Cat come API di servizio per eseguire il rendering di un'immagine di gatto casuale.
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 />
</>
)
}Parametri del percorso
In percorsi dinamici, percorsi preceduti da $ devono essere in grado di accedere al parametro URL per gestire i dati che devono essere visualizzati. Il loader la funzione ha accesso a questi tramite a params discussione.
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>
}Altre funzioni Remix
Remix ha alcune altre funzioni di supporto che aggiungono funzionalità extra ai normali elementi e attributi HTML nel file API del modulo di percorso. Ciascun percorso può definire il proprio di questi tipi di funzioni.
Funzione d'azione
An action La funzione consente di aggiungere funzionalità extra a un'azione del modulo utilizzando il Web standard 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}`);
}Funzione intestazioni
Qualsiasi Intestazioni standard HTTP può entrare a headers funzione. Poiché ogni route può avere un'intestazione, per evitare conflitti con le route nidificate, la route più profonda o l'URL con le barre più in avanti (/) — vince. Puoi anche far passare le intestazioni, actionHeaders, loaderHeaders, o parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}Meta funzione
Questa funzione imposterà i meta tag per il documento HTML. Uno è ambientato nel root.tsx file per impostazione predefinita, ma possono essere aggiornati per ogni percorso.
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};Funzione collegamenti
HTML link gli elementi vivono nel <head> tag di un documento HTML e importano CSS, tra le altre cose. Il links funzione, da non confondere con il <Link /> componente, ti consente di importare solo cose nei percorsi che ne hanno bisogno. Quindi, ad esempio, i file CSS possono essere classificati e importati solo sui percorsi che richiedono quei file specifici. Il link gli elementi vengono restituiti da a links() funzionano come un array di oggetti e possono essere sia a HtmlLinkDescriptor dal link API o PageLinkDescriptor che può precaricare i dati per una pagina.
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" }
]
}Collegamento tra percorsi
Remix fornisce un componente per passare tra i diversi percorsi nella tua app chiamato <Link/>. Per ottenere il routing lato client, utilizzare il <Link to="">Name</Link> componente invece di <a href="">Name</a>. <Link /> componente prende anche un sostegno di prefetch con accetta none per impostazione predefinita, intent per precaricare i dati se Remix rileva che l'utente passa con il mouse o mette a fuoco il collegamento, oppure render che recupererà i dati del percorso non appena il collegamento verrà visualizzato.
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>
);
}Prossimi passi
Ora conosci le basi di Remix e sei pronto per iniziare a creare applicazioni, giusto? Remix fornisce un App Scherzi e Tutorial sul blog per iniziare a implementare queste conoscenze di base. Puoi anche iniziare da zero e creare una nuovissima app Remix. O se sei pronto per tuffarti, dai il Pila K-Pop un tentativo. Mi è piaciuto molto il mio tempo con Remix e amo l'attenzione agli standard web e il ritorno alle origini. Ora tocca a te iniziare a creare!
