Clever Geek Handbook

クライアント、サーバーでのレンダリングと静的サイトの生成

サイト構築のすべての専門家とファンへのご挨拶！MalcolmLaingによる記事「クライアント側のレンダリングとサーバー側のレンダリングと静的サイトの生成」の翻訳に注目します。



フロンテンダーは、これらの用語を使用してアプリケーションを説明することがよくあります。ただし、Webテクノロジーにあまり詳しくない人にとって、これらの概念は誤解を招くことがよくあります。あなたはそれが難しいとの違いを理解するために見つけた場合は、クライアント上でレンダリング、サーバー側でレンダリングし、静的なサイトの生成を-この記事はあなたです！



クライアント側のレンダリング



クライアント側のレンダリングは、シングルページアプリケーション（Spa）テクノロジーの台頭とともに普及しました。このアプローチは、AngularJS、ReactJS、Backbone.JSなどの多くのJavaScriptフレームワークで使用されます。クライアント生成アプリケーションでは、サーバーはJSファイルと静的HTMLをクライアント側に送信します。次に、クライアントは生データを取得するのに十分なAPI呼び出しを行い、アプリケーションがレンダリングされます。



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



私の意見では、NextJSは両方のアプローチの最良の組み合わせを提供し、サーバー側のレンダリングと静的サイトの作成の両方を使用するマッシュアップを作成できるようにします。NextJSは、フレームワークが静的として定義するページの自動静的最適化と呼ぶものを提供します。これにより、サーバーでレンダリングされたページと生成された統計の両方を含むマッシュアップを作成できます。



More articles:


All Articles