質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

受付中

SSRで初回表示が高速な理由

kkdebug
kkdebug

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

1クリップ

298閲覧

投稿2022/11/05 18:21

サーバーサイドレンダリング(SSR)のメリットとして初回表示が高速なことが複数サイトで挙げられていますが、なぜ高速になるのかが分かりません。
ユーザーがURLにアクセスしたときにサーバー側でレンダリングを開始するのとクライアント側でレンダリングを開始するのでは(サーバーとクライアントが同等の描画能力を持っている場合)表示速度に差がないか、むしろサーバーとの通信分SSRの方が時間がかかるように見えます。
あまりにも基本的過ぎるのかそのあたりのことがどのサイトにも書かれていませんでした。ご教授いただけると助かります。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

3

ご指摘のように、クライアントサイドレンダリング(CSR)に比べてSSRが必ず速くなるというものではないと思います。「SSRはCSRに比べて高速化のための手段が多い」というのが正確なところかと思います。

ちょっと古い記事になりますが、SSRを使った高速化の内容と、どこが高速になるかが以下の記事に書かれています。

Server Side Renderingについて知るべきこと。Server Side Renderingとは何か? それによって何が改善されるのか?(前編) ng-japan 2017 - Publickey

この記事では、ページを開いて初期の画面表示がされるがまだJavaScript等は完全にロードさせておらず操作はできない状態(First Meaningful Piaint)までの時間が早いとされてます。SPA(CSR)だとJavaScriptが完全にロードされるまではまったく表示がされないですし、SPAだとサイト全体のHTMLがJavaScriptの形で初回にロードされるので、JavaScriptのロードは結構重たい処理です。すなわち、初回の表示に時間が掛かるわけですが、SSRでそれを解決しようということですね。

しかし、SSRであっても、レンダリングのためにやるべき処理は変わらないじゃないか、という疑問だと思います。
確かにそうなのですが、

  • 高性能なサーバーを用意することで高速化する
  • ウェブサーバーとAPIサーバーの間の通信が高速なので遅延を減らせる
  • JavaScriptを分割することによるロード時間の短縮
  • レンダリング結果のキャッシュ
  • 最初に見える範囲だけServer Side Renderingをして、スクロールしないと見えないところはClient Side Renderingする

などで高速化を果たしています。
ということで、SSRにしただけで初回表示が高速になるわけではなく、SSRを採用した上でソフト的、ハード的なリソースを投入して高速化していることになります。ユーザーの端末の性能はサイト運営者側ではどうしようもありませんが、サイト側のハードウェアは投資次第で改善できるので、資力に余裕がある場合はSSRが有望ということですね。
一方、チューニングにリソースを割けないとか、サーバーの性能に限界がある等の場合はSPA(CSR)でよいのではないかと思います。

投稿2022/11/06 01:23

ockeghem

総合スコア11539

attakei, yambejp, arcxor😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

(サーバーとクライアントが同等の描画能力を持っている場合)

スマートフォンなどの場合、この前提は成り立ちません。

投稿2022/11/05 23:05

maisumakun

総合スコア141519

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/11/06 01:22

こちらの回答が複数のユーザーから「説明が不足している回答」という指摘を受けました。

回答へのコメント

maisumakun

2022/11/05 23:07

あと、ブラウザ内で描画する場合、JavaScriptコードもダウンロードする必要がありますが、SSRの場合はJavaScriptも同じサーバにあるのでその転送時間も不要です。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。