Dans cet article, je vais essayer d’examiner plus en détail la question de la SSR et de la RSE , que j’ai déjà abordée . J'expliquerai les méthodes de rendu dans un article.

Dans cet article, je vais passer en revue l'article de Jason Miller et Addy Osmani sur le rendu sur le Web et essayer d'expliquer ce sujet.

L'article est basé sur mon article Où doit être effectué le rendu HTML ? que j'ai écrit il y a quelque temps. Cela commence par la question posée dans l’article de blog.

Lors du développement d'un site Web, il existe la possibilité d'effectuer une logique et un rendu à différents endroits. Comment les développeurs décideront-ils quelle approche privilégier lorsqu’il existe différentes méthodes de développement d’une page Web ?

Pour prendre cette décision, les développeurs doivent avoir une bonne compréhension des méthodes de rendu et des compromis de performances qui en résultent.

A.Rendu

Si vous vous demandez quel est le sujet du rendu. Vous pouvez lire les détails dans l'article de blog où j'ai expliqué ce sujet
.

B. Web statique vs Web dynamique

Une autre chose à comprendre est la différence entre le Web statique et le Web dynamique . Les pages Web statiques sont des pages qui ne reviennent pas au serveur et font des requêtes avec AJAX après avoir récupéré la page du serveur (HTML, CSS, JS), leur contenu ne change pas en fonction de l'utilisateur ou ne contient pas de données dynamiques (taux de change, météo, etc.) en raison du changement de données qu'il contient. Par exemple, les blogs, les actualités, etc. Au contraire, les pages dynamiques sont des pages Web qui nécessitent AJAX, API, base de données, etc. où le contenu de la page change en fonction de l'intervalle de temps appelé et des paramètres.

C. Conditions d'exécution

• TTFB (Time to First Byte) Le temps entre le clic sur le lien et la réception du premier bit de contenu.
• FP (First Paint) Le temps nécessaire pour afficher le premier pixel à l'utilisateur.
• FCP (First Contentful Paint) Le temps nécessaire pour afficher le premier contenu logique dans la requête.
• TTI Time To Interactive Le temps pendant lequel la page est prête à interagir avec l'utilisateur (connexion de tous les événements)

• SSR (Server Side Rendering) : Il s'agit de la méthode dans laquelle le processus de rendu est effectué côté serveur et les pages dynamiques sont produites en les récupérant de la base de données à l'aide de méthodes telles que ASP.Net, JSP, PHP. Ici, comme JS aura un rôle beaucoup moins important dans la création de l'écran, FP et FCP seront très rapides, tandis que le temps nécessaire aux données pour arriver du serveur sera plus long dans TTFB .
• CSR (Client Side Rendering) : Il s'agit de la méthode où le rendu est effectué côté navigateur avec des méthodes telles que Angular, React, Vue, Svelte, les pages dynamiques sont extraites avec AJAX et les écrans sont créés sur l'écran en combinant Template + Data avec la méthode Template Rendering. Dans cette méthode, même si nous exécutons le TTFB et le FP plus rapidement, nous ne pouvons pas accélérer le TTI, c'est-à-dire le temps qu'il faut à l'utilisateur pour interagir avec la page Web concernée.
• Rendu statique : Dans cette méthode utilisée pour les pages statiques, étant donné que les pages changent très peu et qu'il n'y a pas besoin d'une base de données, les pages sont amenées à leur état final avec la méthode de pré-rendu avant d'être envoyées au serveur et sont envoyées au CDN, ou aux environnements de mise en cache de périphérie, et sont servies très rapidement à partir de là. Récemment, il est devenu beaucoup plus facile de produire ce type de pages avec les outils Gatsby et Jekyll. Sur ces pages, les temps TTFB et TTI sont assez courts. Les besoins d'exécution JS ou d'interaction de telles pages sont très faibles et limités.
• Rendu hybride : bien qu'il soit judicieux de créer un SSR pour certaines pages en fonction de leur charge de contenu, il est judicieux de créer certaines des pages à forte charge avec un CSR paresseux. Des frameworks tels que Next, Nuxt, Nest, Sapper ont émergé pour prendre en charge de telles situations. Ce framework a des capacités similaires tout en adoptant la méthode de développement de composants Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte dans le développement de code.

Références

• Rendu sur le Web
• Différence entre les pages Web statiques et dynamiques
• Où le rendu HTML doit-il être effectué ?

Vous pouvez cliquer sur ce lien pour accéder à la suite de cet article ou à d'autres articles du groupe d'articles .