Dans cet article, nous allons créer une application React simple qui est rendue côté serveur avec Deno.

Au fil des ans, les navigateurs ont évolué et sont maintenant plus puissants. Nous avons commencé à créer des sites Web entiers et des applications Web avec JavaScript côté client. Ceci est appelé «Application à page unique». Cela nous amène à créer des applications Web mises à jour en temps réel plus interactives.

Maintenant, l'alternative au rendu côté client est l'utilisation du rendu côté serveur . Dans cet article, nous prendrons cette route alternative pour créer une application React simple qui est rendue côté serveur à l'aide de Deno. Avant de plonger, parlons un peu du rendu côté serveur.

Qu'est-ce que rendu côté serveur ? Il s'agit d'une technique permettant de rendre une application à page unique (SPA) normalement côté client uniquement sur le serveur, puis d'envoyer une page entièrement rendue au navigateur. Alternativement, dans rendu côté client le HTML initial rendu par le serveur est un espace réservé et toute l'interface utilisateur et les données sont rendues dans le navigateur une fois que tous vos scripts sont chargés.

Avantages du rendu côté serveur

• Performances: Dans le rendu côté serveur (SSR), les performances de l'application dépendent des ressources du serveur et de la vitesse du réseau de l'utilisateur. Cela le rend très utile pour les sites à contenu important.
• Optimisation des moteurs de recherche: Google n'est pas le seul moteur de recherche. Si vous évaluez SEO alors le rendu côté serveur est votre seul moyen garanti pour les robots d'exploration de voir les données que vous voulez qu'ils voient.

Inconvénients du rendu côté serveur

• Augmentation de la complexité de l'application
• Le serveur sera plus occupé, ce qui l'obligera à exécuter moins de requêtes par seconde
• Rechargement de la page entière après le changement des routes

Condition requise

Mise en route

Créez un répertoire de projet:

 mkdir deno-ssr
cd deno-ssr

Configurer les dépendances

Nous devons importer nos dépendances depuis leur URL, et aussi les exporter pour les utiliser dans leurs fichiers appropriés. Créez le fichier dep.ts dans le dossier du projet et collez le code suivant.

 touch dep.ts

 export   {  default   as  React }   from   "https://dev.jspm.io/react@16.13.1" [19659025]; 
 export   {  default   as  ReactDOMServer }   from   "https://dev.jspm.io/react-dom@16.13. 1 / serveur "; 
 export   { opine }   from  " [https://deno.land/x/opine@0.21.2/mod.ts] (https://deno.land/x/opine@0.21. 2 / mod.ts) "; 

Remarque: J'ai utilisé jspm pour importer React et ReactDOMServer, mais vous pouvez utiliser n'importe quel autre CDN qui fournit les mêmes modules.

Maintenant, créez les fichiers suivants dans le dossier du projet.

 touch server.tsx
touch app.tsx 

Créez votre composant React

Voici à quoi ressemblera notre composant app.tsx :

 import {React} from "./dep.ts";
// importer './style.css'
déclarer global {
  namespace JSX {
    interface IntrinsicElements {
      bouton: n'importe lequel;
      div: tout;
      h1: n'importe lequel;
      p: n'importe lequel;
    }
  }
}
const App = () => {
  revenir (
    

      
 Bonjour! j'étais prêt avant d'arriver ici 
    
  );
}
exporter l'application par défaut;

Tout d'abord, nous importons React. Ensuite, nous déclarons certains éléments intrinsèques à utiliser par TypeScript lors de la compilation de notre application. Enfin, nous avons créé un composant React appelé App qui utilise un hook pour modifier le texte.

Remarque: j'ai casté React comme n'importe lequel dans cet exemple, mais vous pouvez également utiliser React entièrement typé en important les types depuis le DefinatelyTyped GitHub repo ou en utilisant l'indication Deno Types au-dessus de toute ligne d'importation pour React. Par exemple:

 import  React  from   "https://dev.jspm.io/react@16.13.1" 

Configurer le serveur

Voici le code que nous allons utiliser pour server.tsx :

 import {
  opine,
  Réagir,
  ReactDOMServer,
} à partir de "./dep.ts";

importer l'application depuis "./app.tsx";

const app = opine ();
const browserBundlePath = "/browser.js";

const js =
ʻImport React de "https://dev.jspm.io/react@16.13.1";nimport ReactDOM de" https://dev.jspm.io/react-dom@16.13.1";nconst App = $ {App};  nReactDOM.hydrate (React.createElement (App), document.body); `;

const html =
`$ {
    (ReactDOMServer comme n'importe quel) .renderToString ()
}  »;

// serveur le code de notre application afin que nous puissions hydrater l'application React sur le client
app.use (browserBundlePath, (req, res, next) => {
  res.type ("application / javascript"). send (js);
});

// servir une page HTML simple contenant notre application rendue
app.use ("/", (req, res, next) => {
  res.type ("texte / html"). send (html);
});

app.listen ({port: 3000});
console.log ("App écoutant sur le port 3000");

Voici ce qui se passe: Premièrement, nous importons nos principales dépendances; nous importons ensuite l'application React que nous venons de créer.

Remarque: Contrairement à Node.js, dans Deno, les extensions de fichier sont obligatoires, alors faites attention à inclure l'extension .tsx .

Ensuite, nous avons créé une application Opine un peu comme vous le feriez avec Express.js, et définissez des routes: une pour servir une simple page HTML contenant notre application rendue, et une autre route /browser.js pour servir le code de notre application. nous pouvons hydrater l'application React sur le client. Enfin, nous démarrons le serveur en utilisant la méthode listen () sur le port 3000.

Remarque: L'hydratation est l'ensemble du processus de réintroduction de fonctionnalités dans le HTML qui était déjà rendu dans React côté serveur. Donc, fondamentalement, c'est le processus de re-rendu sur le HTML une fois rendu.

Exécutez l'application

Nous pouvons maintenant exécuter notre application React SSR en utilisant la commande deno suivante:

 deno lancez --allow-net --allow-read ./server.tsx

Assurez-vous d'ajouter les indicateurs appropriés comme spécifié. Toute action qui doit accéder au Web, lire ou écrire dans des fichiers ou même consommer des variables d'environnement doit avoir l'autorisation accordée avant que Deno ne l'autorise.

Dois-je utiliser le rendu côté serveur?

Si les éléments suivants sont importants pour votre projet, alors vous devez envisager d'utiliser SSR.

• SEO
• Partage social
• Assez de ressources serveur

Conclusion

J'espère que vous avez apprécié le bref tutoriel illustré dans l'article. Gardez à l'esprit qu'il ne s'agit que d'une configuration de base du serveur et de l'application destinée à vous donner une compréhension de base. À partir de là, vous pouvez continuer à créer ou à porter des applications plus complexes.