クライアント側のレンダリングとサーバー側のレンダリングを使用して

5156 ワード
webdev react javascript nextjs テキストリンク
あなたがHeckがサーバー側のレンダリングとクライアント側のレンダリングであるかを疑問に思っているならば?簡単に紹介しましょう.
あなたがスーパーマーケットに食べ物を得るために行くとしましょう、あなたは2つの選択肢を持って、いずれかのいずれかの株価は、全体の月またはちょうどあなたが今の欲しいものを得る.あなたが在庫を選択する場合は、市場に戻る必要はありません、あなただけ冷蔵庫を開いて、あなたが欲しいものを得ることができます.
クライアント側のレンダリングはこれに類似しています.お使いのブラウザが最初に要求をサーバーに送信し、サーバーは以下のようなファイルで応答します.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    />

    <title>Rendering on the browser</title>
  </head>
  <body>
    <--The "root" div will get content from the JS later -->
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>
ブラウザは、HTMLとCSSをロードした後インデックスを要求します.あなたの全体のバンドルされたアプリケーションを含むJSファイル.JSロードの前に、ユーザーはサイトと対話できません.

サーバーが最初に空のHTMLファイルを送信する方法に注意してください.ウェブクローラがインデックスを解析しないので、検索エンジンによってサーチエンジン最適化のためにあなたのサイトを索引付けしたいならば、これは巨大なターンオフでありえます.インデックスは、単一の空の部門と空白のページを参照している間JS.
Googleが主張するウェブサイトにインデックスを付けることができるとしても、それは最初のレンダリングをインデックスすることができて、怠惰にされている構成要素でないだけであるでしょう.
クライアント側レンダリングへのもう一つの不利な点は長いロード時間であるでしょう、Intitial JavaScriptがブラウザによってロードされるまで、ユーザーはウェブサイトと対話することができません
遅い接続では、JavaScriptの500 KBを読み込むために5秒以上かかることができます.
さて、サーバー側のレンダリングは、あなたがスーパーマーケットに行って、あなたが必要とするものだけを買ったと言いましょう、そして、あなたがより多くのものを必要とするとき、あなたは再びそれを得るために出かけました、SSRは同様の方法で働きます.

ユーザー側がそれと相互作用を開始する前に、全体のJSファイルがダウンロードされて解析される必要があるクライアント側のレンダリングサイトとは異なり、SSRではブラウザが最初のHTMLファイルを受信します.
それぞれの新しいページをレンダリングするサーバー側を使用する1つの欠点は、サーバーによってレンダリングされる必要があります.
CSRとSSRの両方の長所と短所を量りましょう.
クライアント側レンダリング
長所
あなたの初期のJS束が小さいならば、あなたのウェブサイト荷速度と全体的なユーザー経験はよいでしょう.
必要なコンポーネントを怠惰な読み込みの可能性.
短所
SEOの欠点.
あなたのアプリケーションが大きいならば、初期の起動時間は高くありえます.
サーバ側レンダリング
長所
すべてはサーバー内で起こっているので、データのフェッチは、ほぼ0の遅延でめちゃくちゃ高速です.
サーバーがすべての重い持ち上げをするので、読み込み速度はユーザーの接続速度によってそれほど影響されません.
SEOの利点.
短所
各ページは、サーバーによって要求ごとに個別にサーバによってレンダリングされる必要があります.
あなたは本質的にユーザーにそれを送信する前に、サーバー上の全体のウェブサイトをロードしている.
しかし、クライアント側のレンダリングとサーバー側のレンダリングの両方を同時に使用する方法がありますか?
はい、あなたは完全に他のメソッドを使用するCSRやSSRのすべての機能を犠牲にする必要はありません.単にユニバーサルWebアプリケーションを使用することができます.
ユニバーサルWebアプリケーションは、サーバー上の初期のレンダリングを行うことにより、CSRとSSRの両方を結合し、一度ページを読み込むと、クライアント側のレンダリングが行われます.このため、我々は良い検索エンジン最適化、高速初期レンダリングと速度をサイトを閲覧している.
これらは、nextjsとnuxtjsのようなフレームワークの旗艦機能です.あなたが好奇心旺盛なら、彼らに深く掘り下げて、非常に楽しいと役立つでしょう!
結論
私はあなたがこの読んで何か役に立つものを見つけ、あなたがしたならば、私はあなたの考えがコメントにあるものを知っているか、私にフィードバックを本当に感謝して、良い日を持っているかについて知らせてください)を見つけました
docker命令
HttpWebRequestシミュレーションc#サイトログイン