Clever Geek Handbook

Rendern auf dem Client, auf dem Server und Generieren statischer Sites

Grüße an alle Profis und Fans des Site Building! Ich mache Sie auf die Übersetzung des Artikels "Clientseitiges Rendern vs. Serverseitiges Rendern vs. Statische Site-Generierung" von Malcolm Laing aufmerksam.



Frontender verwenden diese Begriffe häufig, um ihre Anwendungen zu beschreiben. Für Menschen, die mit Webtechnologien weniger vertraut sind, sind diese Konzepte jedoch häufig irreführend. Wenn Sie Schwierigkeiten haben, die Unterschiede zwischen dem Rendern auf dem Client , dem Rendern auf der Serverseite und der Generierung statischer Sites zu verstehen, ist dieser Artikel genau das Richtige für Sie!



Clientseitiges Rendern



Das clientseitige Rendern wurde mit dem Aufkommen der Single Page Application (Spa) -Technologie populär. Dieser Ansatz wird in vielen JavaScript-Frameworks verwendet, z. B. AngularJS, ReactJS, Backbone.JS usw. In vom Client generierten Anwendungen sendet der Server JS-Dateien und statisches HTML an den Client. Der Client führt dann genügend API-Aufrufe durch, um die Rohdaten abzurufen, und die Anwendung wird gerendert.



<!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



Meiner Meinung nach bietet NextJS eine Kombination aus den besten beiden Ansätzen, sodass wir Mashups erstellen können, die sowohl serverseitiges Rendering als auch statische Site-Erstellung verwenden. NextJS bietet das, was das Framework als automatische statische Optimierung für die als statisch definierten Seiten bezeichnet. Auf diese Weise können Sie Mashups erstellen, die sowohl vom Server gerenderte Seiten als auch generierte Statiken enthalten.



More articles:


All Articles