Catégories
Astuces et Design

Différences entre les sites générés statiques et les applications rendues côté serveur – Smashing Magazine

A propos de l'auteur

Développeur front-end basé à Lagos, Nigeria. Il aime convertir des conceptions en code et créer des choses pour le Web.
Plus à propos
Timi

Les sites générés statiquement ou les applications de rendu préalable et côté serveur sont deux façons modernes de créer des applications frontales à l'aide de frameworks JavaScript. Ces deux modes, pourtant différents, sont souvent confondus comme la même chose et dans ce tutoriel, nous allons découvrir les différences entre eux.

JavaScript propose actuellement trois types d'applications avec lesquelles vous pouvez créer: des applications à page unique (SPA), des sites générés avant le rendu / statique et des 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 consistent à utiliser des générateurs de site statiques ou le rendu côté serveur (SSR).

Dans cet article, je vais les expliquer en énumérant leurs avantages et leurs inconvénients afin que vous ayez 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 examiner 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 cet 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 "reconstruire" ou vous devez reconstruire votre site si vous souhaitez qu'il soit mis à jour avec un nouveau contenu.

Diagramme expliquant le fonctionnement de la génération de site statique
Fonctionnement de la génération de sites statiques (grand aperçu)

Cette approche est bonne pour créer des applications dont le contenu ne change pas trop souvent – des sites que le contenu n'a pas à changer en fonction de l'utilisateur et des 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. Voyons quelques avantages de l'utilisation de sites générés statiquement.

AVANTAGES

  • Site 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 au serveur pour le contenu, ce qui rend votre site très rapide.
  • 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.

LES INCONVÉNIENTS

  • Le contenu peut devenir périmé s'il change trop rapidement.
  • Pour mettre à jour son contenu, vous devez reconstruire le site.
  • 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 démarrer avec Gatsby.

Pour utiliser ce générateur, vous devez d'abord l'installer en utilisant NPM:

npm install -g gatsby-cli

Cela installera Gatsby globalement sur votre machine, vous n'avez à exécuter cette commande qu'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 develop

Votre application Gatsby devrait fonctionner sur localhost: 8000.

Page de destination par défaut de Gatsby
Page de démarrage par défaut de Gatsby (Grand aperçu)

La structure des dossiers de cette application ressemble à ceci;

--| gatsby-browser.js  
--| LICENSE        
--| README.md
--| gatsby-config.js
--| node_modules/  
--| src/
----| components
----| pages
----| images
--| gatsby-node.js     
--| package.json   
--| yarn.lock
--| gatsby-ssr.js      
--| public/
----| icons
----| page-data
----| static

Pour ce tutoriel, nous allons seulement regarder le src / pages dossier. 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) dans ce dossier:

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
const NewPage = () => (
  
    
    

Hello Gatsby

This is my first Gatsby Page

) export default NewPage

Ici, nous importons React du react package donc lorsque votre code est transpilé en JavaScript pur, les références à React y apparaîtra. Nous importons également un Link composant 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 ( '#'>Link). Il accepte un to accessoire qui prend une route comme valeur.

Nous importons un Layout composant 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 SEO composant dans ce nouveau fichier. Ce composant accepte un title prop 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 index.js fichier, ajoutez un lien vers cette nouvelle page que nous venons de créer:

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = () => (
  
    
    

Hi people

Welcome to your new Gatsby site.

Now go build something great.

Go to page 2 {/* new link */}
) export default IndexPage

Ici, nous importons les mêmes composants que ceux utilisés dans newPage.js fichier et ils remplissent la même fonction dans ce fichier. Nous importons également un Image composant de notre Composants dossier. 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.

Page de destination par défaut de Gatsby avec lien vers une nouvelle page
Page de destination Gatsby avec nouveau lien (Grand aperçu)

Et si vous cliquez sur Accéder à une nouvelle page, il devrait vous amener à votre page nouvellement ajoutée.

Nouvelle page contenant quelques textes
Nouvelle page Gatsby (Grand aperçu)

VuePress

VuePress est un générateur de site statique 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.

Pour utiliser VuePress, vous devez d'abord l'installer:

//globally
yarn global add vuepress # OR npm install -g vuepress

//in an existing project
yarn add -D vuepress # OR npm install -D vuepress

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

# create the project folder
mkdir demo-vuepress && cd demo-vuepress

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
vuepress dev

Ici, nous créons un dossier pour notre application VuePress, ajoutons un README.md déposer avec # Hello VuePress comme seul contenu dans ce fichier, et enfin, démarrez notre serveur.

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

Une page Web VuePress avec un texte disant «Bonjour VuePress»
Page de destination VuePress (Grand aperçu)

VuePress prend en charge la syntaxe et le balisage VueJS dans ce fichier. Mettez à jour votre README.md fichier avec les éléments suivants:

# Hello VuePress
_VuePress Rocks_
> **Yes!**
_It supports JavaScript interpolation code_
> **{{new Date()}}**

{{i}}

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

Page VuePress mise à jour
Page Vuepress mise à jour (grand aperçu)

Pour ajouter une nouvelle page à votre 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 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

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

Une page Web VuePress contenant Hello World
Une page «Hello World» dans VuePress (Grand aperçu)

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

Le rendu côté serveur (SSR) consiste à afficher des pages Web sur le serveur et à 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 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. Les applications pour lesquelles SSR est activé sont appelées applications rendues côté serveur.

Un diagramme expliquant le fonctionnement du rendu côté serveur
Fonctionnement de la SSR (Grand aperçu)

Cette approche est idéale pour créer des applications complexes qui nécessitent une interaction de l'utilisateur, s'appuient sur une base de données ou lorsque 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.

Avantages

  • 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 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 de pertinence pour le temps de chargement de votre page, ce qui améliore les performances.

LES INCONVÉNIENTS

  • Plus d'appels d'API au serveur car ils sont effectués par demande;
  • Impossible de déployer sur un CDN statique.

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. Comme 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
# or
yarn create next-app

Vous serez invité à choisir un nom pour votre candidature, j'ai nommé ma candidature demo-next. L’option suivante serait de sélectionner un modèle et j’ai sélectionné le Application de démarrage par défaut après quoi il commence à configurer votre application. Lorsque cela est fait, nous pouvons maintenant démarrer notre application

cd demo-next
yarn dev 
# or npm run dev

Votre application devrait fonctionner sur localhost: 3000 et vous devriez le voir dans votre navigateur;

Page de destination par défaut Nextjs
Page de destination Next.js (Grand aperçu)

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 du Home fonction, il se refléterait dans votre navigateur. Remplacez le JSX par ceci:

import Head from 'next/head'
export default function Home() {
  return (
    
Hello Next.js

Welcome to Next.js!

Nextjs Rocks!

) }

Dans ce fichier, nous utilisons le composant Next.js Head pour définir le titre des métadonnées et le favicon de notre page pour cette page. Nous exportons également un Home fonction qui renvoie un JSX contenant le contenu de notre page. Ce JSX contient notre Head avec 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é comme suit:

Page de destination de Nextjs contenant le texte "Bienvenue dans Nextjs"
Page de destination mise à jour (grand aperçu)

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

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

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

import Head from 'next/head'
export default function Hello() {
  return (
    
Hello World

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 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 / bonjour, nous devrions voir notre nouvelle page:

Une page Web Nextjs contenant ‘Hello world’
Une page «Bonjour tout le monde» dans Next.js (Grand aperçu)

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

# index.js
import Link from 'next/link'

#Add this to your JSX


  Next

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ènerait à notre /hello page.

Nuxt.js

Selon leur documentation officielle:

«Nuxt est un framework 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). Le but 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 que la connaissance de Vue.js est requise pour utiliser ce cadre.

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

yarn create nuxt-app 
# or 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 index.vue fichier. Donc, si vous le mettez à jour avec ce qui suit:




Et lancez votre application:

cd demo-nuxt
# start your applicatio
yarn dev # or npm run dev

Votre application doit fonctionner sur localhost: 3000 et vous devriez voir ceci:

Page de destination Nuxtjs par défaut
Page de destination Nuxt.js (Grand aperçu)

Nous pouvons voir que cette page affiche le contenu que nous avons ajouté à index.vue. La structure du routeur fonctionne de la même manière que le routeur Next.js; il rend chaque fichier à l'intérieur /pages dossier dans une page. Ajoutons donc une nouvelle page (bonjour.vue) à notre application.




Donc, si vous ouvrez localhost: 3000 / bonjour, vous devriez voir votre nouvelle page dans votre navigateur.

Une page Web Nuxtjs contenant ‘Hello World’
Page "Hello World" dans Nuxtjs (Grand aperçu)

Regardons de plus près les différences

Maintenant que nous avons examiné à la fois les générateurs de sites statiques et le rendu côté serveur et comment les utiliser en utilisant des outils populaires, examinons les différences entre eux.

Générateurs de sites statiques Rendu côté serveur
Peut être facilement déployé sur un CDN statique Ne peut pas être déployé sur un CDN statique
Le contenu et les pages sont générés au moment de la construction Le contenu et les pages sont générés par demande
Le contenu peut devenir vicié rapidement Le contenu est toujours à jour
Moins d'appels d'API car il ne le fait qu'au moment de la construction Effectue des appels API chaque fois qu'une nouvelle page est visitée

Conclusion

Nous pouvons voir pourquoi il est si facile de penser que les sites générés statiquement et les applications rendues côté serveur sont identiques. Maintenant que nous connaissons les différences entre eux, je vous conseille d'essayer d'en savoir plus sur la façon de créer des sites générés statiquement et des applications rendues côté serveur afin de bien comprendre les différences entre eux.

Autres ressources

Voici quelques liens utiles qui vous aideront à démarrer en un rien de temps:

  • «Premiers pas avec Gatsby», site officiel de Gatsby
  • «Premiers pas avec VuePress», site officiel de VuePress
  • «VuePress: la documentation simplifiée», Ben Hong, Smashing Magazine
  • «Premiers pas avec Next.js», site officiel de Next.js by Vercel
  • «Pourquoi les gens utilisent-ils un générateur de site statique?», Quora
  • «Générateur de site statique», site officiel de Gatsby
  • «Une introduction à VuePress», Joshua Bemenderfer, DigitalOcean
  • «Qu'est-ce que le rendu côté serveur?», Edpresso, Educative.io
  • «Qu'est-ce qu'un générateur de site statique? Et 3 façons de trouver la meilleure », Phil Hawksworth, The Netlify Blog
  • «Les avantages du rendu côté serveur par rapport au rendu côté client», Alex Grigoryan, Medium
Smashing Editorial(ks, ra, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *