Progressive enhancement

Jusqu'ici, nous avons une application fonctionnelle, qui marche sans exécution de Javascript dans le navigateur. Mais le Javascript nous permet lorsqu'il est chargé de fournir une meilleure expérience aux utilisateurs. Notamment, en évitant le rechargement complet d'une page lors d'une navigation ou lors de la soumission d'un formulaire.

Exercice

Inclure les scripts Javascript dans vos pages.

Guide

💿 Ajouter le composant <Scripts />

Pour inclure, les scripts Javascript dans vos pages, il suffit inclure le composant <Scripts /> que Remix nous fournit dans le fichier root.tsx de l'application.

Ce composant va permettre inclure le code client Javascript généré lors de la phase de compilation.

Voir la section Scripts dans la doc.

Voir une solution

app/root.tsx
import { Scripts } from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

👏 Votre application propose maintenant une expérience améliorée lorsque le Javascript est chargé.

Voyons maintenant comment améliorer les temps de chargement de nos pages.