JavaScript propose actuellement trois types d'applications que vous pouvez créer avec: Page unique Applications (SPA), pré-rendu / sites générés statiquement et applications rendues côté serveur. Les SPA présentent de nombreux défis dont l'un est l'optimisation des moteurs de recherche (SEO). Les solutions possibles sont d'utiliser Générateurs de sites statiques ou Rendu côté serveur (SSR) .

Dans cet article, je vais les expliquer en listant leurs avantages et par contre vous avez donc une vue équilibrée. Nous allons voir ce que sont les générés / pré-rendus statiques ainsi que les frameworks tels que Gatsby et VuePress qui aident à créer des sites générés statiquement. Nous allons également voir ce que sont les applications de rendu côté serveur (SSR) ainsi que les frameworks comme Nextjs et Nuxtjs qui peuvent vous aider à créer des applications SSR. Enfin, nous allons couvrir les différences entre ces deux méthodes et lesquelles utiliser lors de la création de votre prochaine application.

Remarque : Vous pouvez trouver tous les extraits de code dans ce article sur GitHub .

Qu'est-ce qu'un générateur de site statique?

Un générateur de site statique (SSG) est une application logicielle qui crée des pages HTML à partir de modèles ou de composants et d'une source de contenu donnée. Vous lui donnez des fichiers texte et du contenu, et le générateur vous rendra un site Web complet, et ce site Web complet est appelé site généré statiquement. Cela signifie que les pages de votre site sont générées au moment de la création et que le contenu de votre site ne change pas sauf si vous ajoutez de nouveaux contenus ou composants et "reconstruisez" ou si vous devez reconstruire votre site si vous le souhaitez.

Cette approche est utile pour créer des applications dont le contenu ne change pas trop souvent – les sites dont le contenu n'a pas à changer en fonction de l'utilisateur, et les sites qui n'ont pas beaucoup de contenu généré par l'utilisateur. Un exemple d'un tel site est un blog ou un site Web personnel. Examinons quelques avantages de l'utilisation de sites générés statiquement.

PROS

• Site Web rapide : Étant donné que toutes les pages et le contenu de votre site ont été générés au moment de la création, vous n'avez pas à vous soucier des appels d'API à la
• Facile à déployer : Une fois votre site statique généré, vous vous retrouvez avec des fichiers statiques et, par conséquent, il peut être facilement déployé sur des plateformes comme Netlify .
• Sécurité: Les sites générés statiquement sont uniquement composés de fichiers statiques, le risque d'être vulnérable aux cyberattaques est minime. En effet, les sites générés statiques n'ont pas de base de données, les attaquants ne peuvent pas injecter de code malveillant ni exploiter votre base de données.
• Vous pouvez utiliser un logiciel de contrôle de version (par exemple git) pour gérer et suivre les modifications apportées à votre contenu. Cela peut être utile lorsque vous souhaitez annuler les modifications que vous avez apportées au contenu de votre site.

CONS

• Le contenu peut devenir périmé s'il change trop rapidement.
• Pour mettre à jour son contenu, vous devez reconstruire
• Le temps de construction augmenterait en fonction de la taille de l'application.

Des exemples de générateurs de sites statiques sont GatsbyJS et VuePress . Voyons comment créer des sites statiques à l'aide de ces deux générateurs.

Gatsby

Selon leur site officiel

«Gatsby est un framework gratuit et open-source basé sur React qui aide les développeurs à créer des sites Web et des applications ultra-rapides. "

Cela signifie que les développeurs familiers avec React trouveraient facile de commencer avec Gatsby.

Pour utiliser ce générateur, vous devez d'abord installez-le à l'aide de NPM:

 npm install -g gatsby-cli

Cela va installer Gatsby globalement sur votre machine, vous n'avez qu'à exécuter cette commande une seule fois sur votre machine. Une fois cette installation terminée, vous pouvez créer votre premier générateur de site statique à l'aide de la commande suivante.

 gatsby new demo-gatsby

Cette commande va créer un nouveau projet Gatsby que j'ai nommé demo-gatsby . Lorsque cela est fait, vous pouvez démarrer votre serveur d'applications en exécutant la commande suivante:

 cd demo-gatsby
gatsby développer

Votre application Gatsby devrait être exécutée sur localhost: 8000 .

La structure du dossier pour cette application ressemble à ceci:

 - | gatsby-browser.js
- | LICENCE
- | README.md
- | gatsby-config.js
- | node_modules /
- | src /
---- | Composants
---- | pages
---- | images
- | gatsby-node.js
- | package.json
- | yarn.lock
- | gatsby-ssr.js
- | Publique/
---- | Icônes
---- | page-données
---- | statique

Pour ce didacticiel, nous allons uniquement examiner le dossier src / pages . Ce dossier contient des fichiers qui seraient générés en itinéraires sur votre site.

Pour tester cela, ajoutons un nouveau fichier ( newPage.js ) à ce dossier:

 import React from "react "
importer {Link} depuis "gatsby"
importer la mise en page à partir de "../components/layout"
importer le référencement depuis "../components/seo"
const NewPage = () => (
  
    
    
 Bonjour Gatsby 
    
 Ceci est ma première page Gatsby 
    
       Accueil 
    
  
)
exporter NewPage par défaut

Ici, nous importons React du package react . Ainsi, lorsque votre code sera transposé en JavaScript pur, les références à React y apparaîtront. Nous importons également un composant Link de gatsby et c'est l'une des balises de route de React qui est utilisée à la place de la balise d'ancrage native ( <a href = ' # '> Lien ). Il accepte un accessoire à qui prend un itinéraire comme valeur.

Nous importons un composant Layout qui a été ajouté à votre application par défaut. Ce composant gère la mise en page des pages imbriquées à l'intérieur. Nous importons également le composant SEO dans ce nouveau fichier. Ce composant accepte un accessoire title et configure cette valeur dans le cadre des métadonnées de votre page. Enfin, nous exportons la fonction NewPage qui renvoie un JSX contenant le contenu de votre nouvelle page.

Et dans votre fichier index.js ajoutez un lien vers cette nouvelle page que nous venons de créer:

 import React from "react"
importer {Link} depuis "gatsby"
importer la mise en page à partir de "../components/layout"
importer l'image depuis "../components/image"
importer le référencement depuis "../components/seo"
const IndexPage = () => (
  
    
    
 Salut les gens 
    
 Bienvenue sur votre nouveau site Gatsby. 
    
 Maintenant allez construire quelque chose de génial. 
    

      
    
     Allez à la page 2 
    {/ * nouveau lien * /}
    
       Aller à la nouvelle page 
    
  
)
exporter IndexPage par défaut

Ici, nous importons les mêmes composants que ceux utilisés dans le fichier newPage.js et ils remplissent la même fonction dans ce fichier. Nous importons également un composant Image de notre dossier composants . Ce composant est ajouté par défaut à votre application Gatsby et il aide à charger des images paresseusement et à réduire la taille des fichiers. Enfin, nous exportons une fonction IndexPage qui renvoie JSX contenant notre nouveau lien et du contenu par défaut.

Maintenant, si nous ouvrons notre navigateur, nous devrions voir notre nouveau lien en bas de la page. [19659061] Page de destination par défaut de Gatsby avec un lien vers une nouvelle page « />

Et si vous cliquez sur Aller à une nouvelle page cela devrait vous amener à votre page nouvellement ajoutée.

VuePress

VuePress est un générateur de site statique qui est alimenté par Vue Vue Router et Webpack . Il nécessite peu ou pas de configuration pour vous permettre de commencer avec. Bien qu'il existe un certain nombre d'outils qui sont des générateurs de sites statiques, VuePress se démarque du lot pour une seule raison: sa directive principale est de faciliter la tâche des développeurs pour créer et maintenir une excellente documentation pour leurs projets.

VuePress, vous devez d'abord l'installer:

 // globalement
fil global ajouter vuepress # OU npm install -g vuepress

// dans un projet existant
ajout de fil -D vuepress # OU npm install -D vuepress

Une fois le processus d'installation terminé, vous pouvez exécuter la commande suivante dans votre terminal:

 # créer le dossier du projet
mkdir demo-vuepress && cd demo-vuepress

# créer un fichier de démarque
echo '# Hello VuePress'> README.md

# commencez à écrire
vuepress dev

Ici, nous créons un dossier pour notre application VuePress, ajoutons un fichier README.md avec # Bonjour VuePress comme seul contenu à l'intérieur de ce fichier, et enfin, démarrons notre

Lorsque cela est fait, notre application devrait fonctionner sur localhost: 8080 et nous devrions le voir dans notre navigateur:

Grand aperçu )

VuePress prend en charge la syntaxe et le balisage de VueJS dans ce fichier. Mettez à jour votre fichier README.md avec ce qui suit:

 # Hello VuePress
_VuePress Rocks_
> ** Oui! **
_Il prend en charge le code d'interpolation JavaScript_
> ** {{nouvelle date ()}} **
 {{i}} 

Si vous revenez à votre navigateur, votre page devrait ressembler à ceci:

Pour ajouter une nouvelle page à votre Sur le site VuePress, vous ajoutez un nouveau fichier de démarque au répertoire racine et le nommez comme vous voulez que l'itinéraire soit. Dans ce cas, je suis allé de l'avant pour le nommer Page-2.md et j'ai ajouté ce qui suit au fichier:

 # hello World
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercice ullamco laboris nisi ut aliquip ex ea commodo
conséquat.

Et maintenant, si vous accédez à / page-2 dans votre navigateur, nous devrions voir ceci:

Qu'est-ce que le rendu côté serveur? (SSR)

Rendu côté serveur (SSR), est le processus d'affichage des pages Web sur le serveur et de les transmettre au navigateur / côté client au lieu de les afficher dans le navigateur. Côté serveur envoie une page entièrement rendue au client; le bundle JavaScript du client prend le relais et permet au framework SPA de fonctionner.

Cela signifie que si vous avez une application qui est rendue côté serveur, votre contenu est récupéré côté serveur et transmis à votre navigateur pour être affiché à votre utilisateur. Avec le rendu côté client, c'est différent, vous devez d'abord accéder à cette page avant de récupérer les données de votre serveur, ce qui signifie que votre utilisateur devra attendre quelques secondes avant de recevoir le contenu de cette page.

Cette approche est bonne pour la construction. des applications complexes qui nécessitent une interaction utilisateur, s'appuient sur une base de données ou dont le contenu change très souvent. En effet, le contenu de ces sites change très souvent et les utilisateurs doivent voir le contenu mis à jour dès qu'ils sont mis à jour. Il convient également aux applications dont le contenu est personnalisé en fonction de la personne qui le consulte et aux applications dans lesquelles vous devez stocker des données spécifiques à l'utilisateur, comme les e-mails et les préférences des utilisateurs, tout en assurant également le référencement. Un exemple de ceci est une grande plate-forme de commerce électronique ou un site de médias sociaux. Voyons quelques-uns des avantages du rendu côté serveur de vos applications.

Pour

• Le contenu est à jour car il récupère le contenu en déplacement;
• Votre site se charge rapidement car il récupère son contenu sur le côté serveur avant de le rendre à l'utilisateur;
• Étant donné que dans SSR JavaScript est rendu côté serveur, les appareils de vos utilisateurs ont peu d'importance pour le temps de chargement de votre page, ce qui améliore les performances.

CONS [19659018] Plus d'appels d'API au serveur car ils sont effectués par demande;

D'autres exemples de frameworks qui offrent la SSR sont Next.js et Nuxt .js .

Next.js

Next.js est un framework React.js qui aide à créer des sites statiques, des applications rendues côté serveur, etc. Depuis qu'il a été construit sur React, la connaissance de React est requise pour utiliser ce framework.

Pour créer une application Next.js, vous devez exécuter ce qui suit:

 npm init next-app
# ou
fil créer la prochaine application

Vous serez invité à choisir un nom pour votre application, j'ai nommé mon application demo-next . L'option suivante serait de sélectionner un modèle et j'ai sélectionné l'application de démarrage par défaut après quoi elle commence à configurer votre application. Une fois cela fait, nous pouvons maintenant démarrer notre application

 cd demo-next
fil dev
# ou npm run dev

Votre application devrait être exécutée sur localhost: 3000 et vous devriez voir ceci dans votre navigateur;

La page en cours de rendu se trouve dans pages / index.js donc si vous ouvrez ce fichier et modifiez le JSX à l'intérieur de la fonction Accueil cela reflètera dans votre navigateur. Remplacez le JSX par ceci:

 importez la tête de 'next / head'
exporter la fonction par défaut Home () {
  revenir (
    

      
        
        
      
      

        

           Bienvenue dans  Next.js! 
        
        
 Nextjs Rocks! 
      
  )
}

Dans ce fichier, nous utilisons Next.js Composant Head pour définir le titre des métadonnées et le favicon de notre page pour cette page. Nous exportons également une fonction Accueil qui renvoie un JSX contenant le contenu de notre page. Ce JSX contient notre composant Head ainsi que le contenu de notre page principale. Il contient également deux balises de style, l'une pour le style de cette page et l'autre pour le style global de l'application.

Maintenant, vous devriez voir que le contenu de votre application a changé en:

Maintenant, si nous voulons ajouter une nouvelle page à notre application, nous devons ajouter un nouveau fichier à l'intérieur du / pages . Les itinéraires sont créés automatiquement en fonction de la structure de dossiers / pages cela signifie que si vous avez une structure de dossiers qui ressemble à ceci:

 - | pages
---- | index.js ==> '/'
---- | about.js ==> '/ about'
---- | projets
------ | next.js ==> '/ projets / suivant'

Donc, dans votre dossier pages ajoutez un nouveau fichier et nommez-le hello.js puis ajoutez-y ce qui suit:

 importez la tête de 'next / head'
exporter la fonction par défaut Hello () {
  revenir (
    

       
        
        
      
      

        

          Bonjour  Le monde 
        
        
 Lorem ipsum dolor assis amet, élite adipisice consectetur. Voluptatem provident soluta, sit explicabo impedit nobis accusantium? Nihil beatae, accusamus modi assumenda, optio omnis aliquid nobis magnam facilis ipsam eum saepe! 
      
  )
}

Cette page est identique à la page de destination que nous avons déjà, nous avons seulement changé le contenu et ajouté un nouveau style au JSX. Maintenant, si nous visitons localhost: 3000 / hello nous devrions voir notre nouvelle page:

Enfin, nous devons ajouter un lien vers cette nouvelle page sur notre page index.js et pour ce faire, nous utilisons le lien suivant composant. Pour ce faire, nous devons d'abord l'importer.

 # index.js
importer le lien de 'suivant / lien'

#Ajouter ceci à votre JSX


   Suivant 

Ce composant de lien est la façon dont nous ajoutons des liens vers des pages créées dans Next dans notre application.

Maintenant, si nous revenons à notre page d'accueil et cliquons sur ce lien, cela nous amènera à notre / bonjour [19459052

Nuxt.js

Selon leur documentation officielle :

«Nuxt est un cadre progressif basé sur Vue.js pour créer des applications Web modernes. Il est basé sur les bibliothèques officielles de Vue.js (vue, vue-router et vuex) et sur de puissants outils de développement (webpack, Babel et PostCSS). L'objectif de Nuxt est de rendre le développement Web puissant et performant avec une excellente expérience de développeur à l'esprit. »

Il est basé sur Vue.js, ce qui signifie que les développeurs de Vue.js trouveraient facile de commencer avec et de connaître Vue.js

Pour créer une application Nuxt.js, vous devez exécuter la commande suivante dans votre terminal:

 yarn create nuxt-app 
# ou npx
npx create-nuxt-app 

Cela vous inviterait à sélectionner un nom ainsi que d'autres options. J'ai nommé le mien demo-nuxt et sélectionné les options par défaut pour les autres options. Lorsque cela est fait, vous pouvez ouvrir votre dossier d'application et ouvrir pages / index.vue. Chaque fichier de ce fichier de dossier est transformé en itinéraire et notre page de destination est donc contrôlée par le fichier index.vue . Donc, si vous le mettez à jour avec ce qui suit:

Et lancez votre application:

 cd demo-nuxt
# commencez votre applicatio
fil dev # ou npm run dev

Votre application doit être exécutée sur localhost: 3000 et vous devriez voir ceci: