Un cadre SSR alternatif pour React

Razzle est un outil qui résume toute la configuration complexe de la SSR en une seule dépendance. Apprenez à utiliser Razzle dans les applications React de rendu sur serveur.

Il est difficile de configurer des applications React universelles et les configurations ne sont pas simples à gérer. Il existe des solutions de contournement telles que l'utilisation d'un cadre tel que Next.js, le bricolage, ou peut-être vous-même.

Toutes ces options existantes ont leurs pièges et, dans certains cas, vous fournissent plus de problèmes à venir que prévu. . C’est là que Razzle entre en jeu. Razzle est un outil qui résume toute la configuration complexe nécessaire à la SSR en une seule dépendance, vous donnant ainsi l’expérience de create-react-app tout en laissant le reste de votre application. décisions architecturales concernant les frameworks, le routage et la récupération des données jusqu'à vous.

Avec cette approche, Razzle fonctionne non seulement avec React, mais également avec Reason, Elm, Vue, Angular et, plus important encore, avec tout le système. vient ensuite. Dans cet article, nous allons voir comment commencer à utiliser Razzle et explorer les fonctionnalités qu’il apporte à la table.

Installation

Pour installer Razzle sur votre système, exécutez simplement la commande:

 $  npm   installez  -g create-razzle-app

Razzle sera installé dans le monde entier.

Etant donné que Razzle fonctionne exactement comme le très populaire créer-réagir-application vous pouvez créer une nouvelle application Razzle de la même manière en exécutant le . Commande create-razzle-app :

 $ create-razzle-app mon-app

Maintenant, pour lancer l'application, naviguez dans le répertoire des applications et exécutez npm start:

 $  cd  my-app
    [ npm  $ début

Ceci devrait maintenant ouvrir votre application sur localhost: 3000 et vous devriez obtenir la page d'accueil par défaut sur le navigateur, comme suit:

une application React avec SSR tous configurés sans configuration unique, tout comme l'ARC.

Principes de base de Razzle

Création d'un composant personnalisé
Expliquons comment créer un composant personnalisé dans l'application Razzle que nous ' Je viens de mettre en place. Ouvrez le fichier Home.js dans le répertoire src et mettez-le à jour avec le code:

     import . Réagissez  dans   'react' . ; 
     import  logo  de   './ react.svg' ; 
     import   './ Home.css' ; 
     classe 
     19659029] Accueil   s'étend   React .  Composant   {
       render  ()   {
         retour   (
           < div className  =  "Accueil" > 
             < p >  Bonjour le monde ! !  <[19659041] /  p > 
           < /  div > 
        ) ; 
      } 
    } 
     export   par défaut  Accueil ; 

Lorsque vous enregistrez, le navigateur se recharge automatiquement et vous devriez pouvoir voir votre page Hello World s'afficher comme la mienne ici:

Routage et navigation
Un atout formidable de Razzle est qu’il utilise React Router 4 par défaut, contrairement à Next.js. En conséquence, avec Razzle, gérer la navigation et le routage devient un jeu d'enfant. Comme nous avons déjà un composant personnalisé Home voyons comment créer un nouveau composant et y afficher un contenu plus personnalisé. Nous allons créer une page About.js et la configurer comme suit:

     import  Réagissez  à partir de   'react' ; 
     import   ] './ Home.css' ; 
     classe   Environ   s'étend   Réagir .  Composant   {
       rendre  ( ])   {
         return   (
           < div > 
             < p >  Vous avez été dirigé vers la page À propos.  < /  p > 
           < /  div > 
        ) ; 
      } 
     / 
    } 
     ] export   default  À propos de ; 

Pour accéder à cette page que nous venons de créer, mettons à jour notre fichier App.js comme suit:

     import  Réagissez  à partir de   'react' [19659021
     import  Itinéraire  de   'react-router-dom / Route' ; 
     import  Commutateur  de   'react-router- dom / Switch '; 
     import  Home  de  ' ./ Home '; 
     import  ' ./ App.css '; 
     import  À propos de  de   '. / À propos de' ; 
     const   App   =   ()   => [19659032] (
       < Commutateur > 
         < Itinéraire exact chemin  =  "/"  composant  =  {. Accueil }   / > 
         < L'itinéraire exact chemin  =  "/ environ"  composant  =  { à propos de }   / [19659041]> 
       < /  Commutateur > 
    ) ; 
     export   défaut  App ; 

Vous voyez comme c'était simple? Oui, vous avez fait. Maintenant, lorsque vous accédez à localhost: 3000 / about vous serez redirigé vers notre page À propos de :

] Maintenant, nous avons une petite application Razzle que nous pouvons étendre pour faire exactement ce que nous voulons – construisez-la en une application Web à part entière, construisez votre prochain Airbnb, etc. "

Commandes Razzle

Tout comme CRA, Razzle a une tonne de commandes utiles qui vous permettent d'accélérer le développement et de travailler de manière transparente avec le terminal. Voici quelques exemples qui pourraient vous être utiles:

Commandes de démarrage

 $  npm  start
    $ début de fil

L'une ou l'autre de ces commandes exécutera le projet en mode développement. Une fois la commande exécutée et le serveur en cours d'exécution, vous pouvez afficher votre application à l'adresse http: // localhost: 3000 . La page sera rechargée si vous apportez des modifications.

Les commandes de construction

 $  npm  run build
    fil de construction

Ces commandes permettent de créer l'application de production dans le dossier de construction. La construction est minifiée et les noms de fichiers incluent les hachages. Une fois la commande exécutée, votre application est prête à être déployée!

Commandes de production

 $  npm  run start: prod
    $ début de fil: prod

Cette commande exécutera l'application compilée en production. Vous pouvez à nouveau afficher votre application en cours d'exécution à l'adresse suivante: http: // localhost: 3000 .

Autres fonctions

Rechargement à chaud
Comme les autres cadres modernes, Razzle est livré avec le module universel chaud hot rechargement, afin que le client et le serveur se mettent à jour chaque fois que vous apportez des modifications. Pas de redémarrage ennuyeux nécessaire. C'est une chose merveilleuse, étant donné que l'application est restituée sur le serveur.

Universel dans tous les cadres
Razzle exécute deux instances de WebPack. L'un gère le bundle client et l'autre le serveur, ce qui lui donne la capacité de fonctionner sur tous les frameworks disponibles, puisqu'il s'agit essentiellement de webpack et pas nécessairement de React.

Cette fonctionnalité est également ce qui la rend futuriste, car elle le peut Adoptez facilement tous les nouveaux frameworks à venir sans changements majeurs.

Familiarité
Razzle propose des goodies JavaScript ES6 (via babel-preset-razzle ) et la même configuration CSS. comme create-react-app ce qui le rend très familier. Razzle out of the box vous permet de faire beaucoup de choses

Conclusion

Razzle est un framework SSR alternatif pour React et à peu près tout autre framework JavaScript disponible et à venir. Il existe des frameworks tels que Next.js et le react-server mais ils ne résolvent pas tous les problèmes liés au rendu du serveur.

Razzle est une amélioration de l'offre de ces technologies existantes, dans la mesure où il offre non seulement plus de simplicité et de flexibilité, il permet également de restituer au serveur toute application JavaScript, quel que soit le cadre sur lequel elle a été initialement construite. Pour acquérir des connaissances approfondies sur Razzle et en savoir plus sur des fonctionnalités impressionnantes, consultez la documentation Razzle .

Pour plus d'informations sur la création d'applications avec React

Vous souhaitez en savoir plus sur la création De superbes applications avec React? Consultez Kendo UI pour React notre bibliothèque de composants d'interface utilisateur complète pour React qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans. En savoir plus sur la façon dont vous pouvez démarrer avec KendoReact .