サーバー側レンダリングの理解

5200 ワード

webdev tutorial javascript beginners テキストリンク

What is Server Side Rendering (SSR) ?

それは多くの人々のためのトリッキーな質問です、そこで、答えは「静的なウェブサイトのために良いです」から「私は私のブログのためにそれを使いました」.しかし、それは本当に何ですか?その賛否両論を含めて、それをカバーしましょう.

サーバー側のレンダリングは何ですか?
我々が最初に説明に飛び込む前に、多くの現代のウェブアプリケーションのために現在の文脈を簡単に要約しましょう.

シングルページアプリケーション
フロントエンドライブラリやフレームワークの多数で、現在のWebエコシステムでは、サーバーが頻繁にこのような要求を受けます.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/app.js"></script>
  </body>
</html>

ここで<div id="root"></div> 要素は、ユーザーがアプリケーションをナビゲートするときにJavaScriptを使用してそれに注入されたページを持ちます.
これは、ウェブサイトのJavaScriptのすべてがブラウザにダウンロードする必要があることを意味する何かを表示することができる前に.低速インターネット接続がアプリケーションの初期負荷時間に大きな影響を与える可能性があることを意味します.しかし、一度読み込まれると、次のページの負荷が速く、ウェブサイトは、超インタラクティブにすることができます.

サーバサイドレンダリング( SSR )
一方、同じページに移動するとき、サーバーにアプローチされたアプローチは、サーバーにページの内容を使用可能なHTMLファイルをブラウザに送信する必要があります.別のページに移動すると、同じプロセスが再び発生します.

なぜ私はそれを使用する必要があります?
SSRには多くの利点があります.

🔎 より良いSEO
Googleのクローラは、それをインデックスする前にウェブサイトのJavaScriptを実行する限られた容量を持っています.一方SSRは完全にページをレンダリングします.

🏎 より速く最初の有意義なペンキ
前に述べたように、SSRはウェブサイトのJavaScriptを完全にダウンロードすることができません.これは、古いハードウェアまたは低速接続を持つ個人に最適です.ターゲットの観客に応じて、これは重要な要因かもしれません.

✅ 素晴らしい静的なウェブサイト
SSRは、Interactiveが通常制限されるブログ、ドキュメンテーション、ポートフォリオと着陸ページのような静的であるウェブサイトのために大きいです.

👥 ソーシャルメディア最適化
FacebookやTwitterで誰かのアプリケーションを共有するたびに、タイトル、説明、およびイメージを含む表示されます.

どんな欠点?
もちろん、いくつかの欠点がある、それはすべてあなたが開発しているアプリケーションの種類によって異なります.

📈 より多くのサーバ要求
それぞれの新しいページには新しいサーバ要求が必要です.これらは短く、通常軽量ですが、それを念頭に置いておくことが重要です.

🐌 遅いページレンダリング
JavaScriptが最初にウェブサイトにアクセスするとき、最初にロードされるので、SPASは速く各々のページを注入して、貸し出します.SSRはページ全体を取得するので、レンダリングはやや遅くなります.

🕹 より少ない相互作用
TrelloまたはGmailがSSRを使用している場合は、想像してください、あなたは全体的な経験に影響を与える各ユーザーの相互作用で完全にページをリロードする必要があります.

便利なリンク
以下にいくつかの推奨リンクを示します.
VueをビルドするにはアプリケーションをレンダリングNuxt.js .
アプリケーションサーバーをレンダリングするGatsby.js , Next.js .
この偉大なexplanation FirebaseチームによるSSRの.
私はこの記事を楽しみ、道に沿っていくつかのことを学んだことを願っています.
私の将来の記事上の任意の更新のためのTwitter上で私に従ってください.私も、JSとCSS全体について多くの面白いものを共有します✨

Like that article's banner? Check out a banner generator I made for DEV!

Reference

この問題について(サーバー側レンダリングの理解), 我々は、より多くの情報をここで見つけました https://dev.to/christopherkade/understanding-server-side-rendering-3lk5

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

SQL基本文-クエリー

DockerでNESTJSを実行することは、Kool