SSR (Server Side Rendering)

ブラウザではなくサーバでWebページをレンダリング

ブラウザはGET要求をサーバのURIに送信し、サーバは指定したウェブページファイルをブラウザ

に送信する.

サーバのWebページがブラウザに到着すると、

が完全に表示されます.

サーバがウェブページをブラウザに送信する前に、サーバは完全にレンダリングされるので、サーバ側レンダリング

と呼ぶ.

Webページのコンテンツにデータベース内のデータが必要な場合、サーバはデータベース内のデータを読み込み、Webページを完全にレンダリングされたページに変換し、ブラウザに応答して送信します.

ページを閲覧するユーザがブラウザの別のパスに移動すると、ブラウザが別のパスに移動するたびに、サーバは再びこの操作

を実行する.

CSR (Client Side Rendering)

通常、CSRはSSRとは逆であり、SSRがサーバ側からページをレンダリングする場合、CSRはクライアント側からページをレンダリングする

Web開発において最も代表的なクライアントはWebブラウザ

である.

ブラウザの要求がサーバに送信されると、サーバはウェブページをレンダリングするのではなく、ウェブページのスケルトンとなる単一のページをクライアントに送信し、サーバはウェブページとともにJavaScriptファイル

を送信する.

クライアントがウェブページを受信すると、ウェブページとともに渡されるJavaScriptファイルは、ブラウザでウェブページを完全にレンダリングされたページ

に置き換える.

Webページで必要なコンテンツがデータベースに格納されているデータである場合、ブラウザはデータベースに格納されているデータをWebページにインポートしてレンダリングする必要があります.
このためAPI가 사용APIリクエストによるWebページのレンダリングに必要なデータの消去

ブラウザが他のパスにジャンプした場合、CSRはSSRとは異なり、サーバはWebページを再送信せず、ブラウザが要求したパスに従ってページを再レンダリングします.
このとき、最初のサーバから送信されたページファイルと同じファイルが表示されます.

SSRとCSRの違い

ページのレンダリング位置
SSRはサーバ上でページをレンダリングし、CSRはブラウザ(クライアント)上でページをレンダリングする
ブラウザは、ユーザーが他のパスを要求するたびにページをリフレッシュするのではなく、ルーティングを動的に管理します.

SSRの使用

検索エンジンの最適化が

SEOよりも優先される場合、通常、サーバ側レンダリング(SSR)

が使用される.

Webページの最初の画面をすばやくレンダリングする必要がある場合、単一ファイル容量の小さいSSRも

に適しています.

ページユーザとのインタラクションが少ない場合、SSR

を利用することができる.

CSRの使用

SEOが優先オプションでない場合、CSR

を使用できます.

サイトに豊富なインタラクションがある場合、CSRは高速ルーティングを通じて強力なユーザー体験

を提供します.

Webアプリケーションを作成する場合、CSRはより良いユーザー体験(高速ダイナミックレンダリングなど)を提供することができる.

Static VS Dynamic

現代の2階層アーキテクチャでは、静的Webサイトの使用が一般的です.

静的Webサイト:HTMLファイル(コード)自体によって配布されるサイト(CSR,クライアントエンドツーエンドRendering)

動的Webサイト:サーバによってHTMLファイルが動的に生成されるサイト(SSR、Server Side Rendering)

Webサイトの表示方法

AJAXの前に、要求に応じて結果を変更する動的なWebページを作成する場合は、サーバは毎回動的に生成するしかありません.
一方,動的Webサイトを受信するためにはサーバがHTML形式でブラウザに提供しなければならないため,ヘッダやツイッターなどのページコンポーネントの重複要求/応答が非常に頻繁であるため,ネットワーク上で交換されるパケットの大きさがやや大きい.
このようにAJAX以前はサーバ上でウェブページを作成する技術が一般的であり,PHP,JSP,ASPなどを用いて動的ウェブサイトを作成する技術も広く用いられていた(もちろんnode.jsを用いて動的ウェブページを作成することも可能である).

// 동적 웹페이지 예제 (node.js)
const http = require('http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html'); // HTML 문서의 형태로 전달됨
  res.end('<h1>동적 웹페이지</h1><p>with 랜덤한 값</p>' + Math.random()); // 서버에 의해서 동적으로 바뀜
});

server.listen(3000);

ブラウザの発展とAJAX技術の普及に伴い、サーバはすべての動的情報を負担する必要がなく、クライアント要求に必要な部分だけを必要とし、サーバの負荷を減らすことができる.
このため、サーバはJSONなどの純データ形式のみを提供する形式に移行し始め、クライアントであるウェブページはJavaScriptやAJAX技術を用いたより高度なWebアプリケーション、すなわち単一ページアプリケーションに移行し始めた
Javascriptはダイナミックレンダリングをサポートしていますが、エンドサーバはWebページをレンダリングせず、HTML/CSS/JSファイルのソースコード操作の特徴があるため、静的Webサイトです.
クライアントは確かに高度化されていますが、前述のCSRとSSRの違いからも分かるように、SSRの優位性を発揮するために、様々な方法で動的Webサイトを作成することができ、パフォーマンスを最大限に向上させるためにCRSSRのハイブリッド形式で構成されている場合が多いです.

ビルド

静的Webサイトの構築

現代のWebアプリケーションは静的WebページとAJAX技術を組み合わせて使用し、徐々に単一ページアプリケーションに移行し、クライアントの規模がますます大きくなっている.
Reactなどのクライアント技術の発展に伴い、javascriptやページを単一のファイルで作成することが複雑になり始めました.
高度化されたクライアントWebアプリケーションは、多くのモジュールからなり、多くのモジュールを組み合わせた操作をバンドル(bundling)と呼ぶ.この過程では、JSXファイルなどのタスクに伴い、ブラウザが自己解釈できない様々な補助技術を説明できるようになり、総称して「ソフトウェア構築」と呼ばれ、ソフトウェア構築はソースコードを実行可能な結果に変換することを意味する.
バンドル・プロシージャ(webpack)は、多くのモジュールを静的ファイルとして作成します.

1つのファイルの多くのモジュールを表示

異なるモジュールは静的ファイルによって結果を生成する必要があります.そのため、これらの構築プロセスは導入に必要です.たとえば、ローカルコンピュータ上でReactプロジェクトを自分で実行するには、npm startを使用して開発サーバを実行する必要があります.ネットワークに導入するには、これらの開発サーバを実行する必要はありません.静的ファイルをロードするサービスに成果物をアップロードするだけです.
Create Resact Appなどで作成されたResactプロジェクトの場合、npm buildコマンドはpackageです.jsonファイルに含めると、モジュールが静的ファイルになります.

主な構築ツール

- Create React App
Create Resact Appを使用して作成されたプロジェクトでは、react-scriptsというモジュールが使用されます.
- Next.js
Next.次のモジュールはjs用です

せいぞうこうぐ

プロジェクト生成ツールの構成を見てみましょう.内部には複数のツールの組み合わせがあります.
Webpack:モジュールバンドルパッケージ
Babel:ブラウザでサポートされていない言語(TypeScript、JSXなど)をJavaScriptのコンパイラに変換します.
ESLint:JavaScriptコード規則と構文チェッカー
Sass, less: CSS Preprocessor
Webpackと他の構築ツールがファイルにバインドされるプロセス

クライアントWebアプリケーションの配備

ローカル環境で開発されたコードを実際のサービスにするには、構築プロセスとWebに露出する導入プロセスが必要です.
構築によって作成された静的ファイルがWebを介して提供される場合(サービス)、Webサーバがこれらの静的ファイルを提供する必要がある.
一般に、Webサーバとは、Webサービスを提供するすべてのタイプのサーバがWebサーバであってもよいが、静的ファイルを提供するためにサーバ空間を借りるサービスを管理サービスと呼ぶ호스팅 서비스 Webから簡単なファイルへのアクセスが許可されています.動的Webサイトや(Expressなどを使用)APIサーバを提供するには、個別のクラウドコンピューティングサービスが必要です.現在はクライアントWebアプリケーションのみが配備されているため、管理サービスとしても十分です.
クライアント・アプリケーションではなく、サーバ・アプリケーション(APIサーバ)については、実際にはnodeです.jsを実行できるパソコンが必要です.

多様なWeb管理サービス

Amazon Web Service (AWS) S3

Google Cloud Storage

Vercel

GitHub Pages

Netlify

Heroku