Clever Geek Handbook

Rendu sur le client, sur le serveur et génération de sites statiques

Salutations à tous les professionnels et fans de la construction de sites! J'attire votre attention sur la traduction de l'article "Rendu cÎté client vs rendu cÎté serveur vs génération de site statique" de Malcolm Laing.



Les frontenders utilisent souvent ces termes pour décrire leurs applications. Cependant, pour les personnes moins familiarisées avec les technologies Web, ces concepts sont souvent trompeurs. Si vous avez du mal à comprendre les différences entre le rendu sur le client , le rendu cÎté serveur et la génération de sites statiques, cet article est pour vous!



Rendu cÎté client



Le rendu cÎté client est devenu populaire avec l'essor de la technologie des applications à page unique (Spa). Cette approche est utilisée dans de nombreux frameworks JavaScript, par exemple AngularJS, ReactJS, Backbone.JS, etc. Dans les applications générées par le client, le serveur envoie des fichiers JS et du HTML statique cÎté client. Le client effectue ensuite suffisamment d'appels d'API pour obtenir les données brutes, puis l'application est rendue.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


, HTML — . HTML JS, , noscript. HTML JS, div ID root React-.







  1. , . CDN . .


  2. . - , .




  1. SEO

    . Google , , JS, . , .
  2. UX

    . , .


  3. API . , , .




HTML . API . , , , .



— . . , NextJS, , . , , .







  1. , , , . , .
  2. SEO.

    SEO . Google , , . Google -, .






  1. , , . API, HTML .


  2. React . , , NextJS.




, HTML- . API HTML- . , -, API HTML, HTML-.



, . HTML- . , .



Gatsby NextJS — , React. Hugo — .







  1. HTML- , , , , . ( : ).


  2. HTML-, CDN .






  1. . , - . , , , . , .


— NextJS



À mon avis, NextJS offre une combinaison du meilleur des deux approches, nous permettant de crĂ©er des mashups qui utilisent Ă  la fois le rendu cĂŽtĂ© serveur et la crĂ©ation de sites statiques. NextJS offre ce que le framework appelle l'optimisation statique automatique pour les pages qu'il dĂ©finit comme statiques. Cela vous permet de crĂ©er des mashups contenant Ă  la fois des pages rendues par le serveur et des statiques gĂ©nĂ©rĂ©es.



More articles:


All Articles