1

SSRの仕組みについて理解できない部分があり、下記の疑問に回答いただけないでしょうか。

  1. CSRと比べたメリットに初回描画が速くなる、という記述を見かけますが、なぜ速くなるのでしょうか? クライアント側でJSのバンドルファイル自体はダウンロードして実行されると思うのですが、クライアント側ではどこの処理が省略されるのでしょうか?

  2. サーバーサイドレンダリングの部分はCloud FunctionsなどのFaaS上でnuxtやnextを実行する方法が一般的でしょうか?それとももっと一般的な方法があるでしょうか?

  3. FaaS上でnuxtやnextを実行させると起動に時間が掛かってコールドスタートになりそうですが認識は合ってますでしょうか?

1 件の回答 1

3

1. SSR は何故早いか

SSR だと、ユーザーがサーバーから受信する html ファイルには、既に初期描画が完了した dom を書き出したようなものが記述されています。これにより、通常の Web ページと同じように、 html ファイルを受信する端から描写を開始することができます。

一方、 CSR だと html ファイル(の <body>)は最初ほぼ空で、そこから SPA として動作するための javascript のロードが開始し、 javascript が最初の画面の仮想 DOM を計算し、それを DOM に反映されるまで、何も映らなくなります。(通常、この間はアニメーション付きのローディング画面を表示させておく場合が多い)この CSR において必要になっている javascript のダウンロード・評価・dom 構築とその反映の時間をショートカットできるのが SSR です。

補足として、 SSR においても、 html の通りに描写を行いながらその隣りで js をダウンロード・評価し、その結果構築された SPA のオブジェクトを今ある html から読み取った DOM を突合し、差分更新に備える作業を裏で行っています。これは rehydration と呼ばれる処理です。

2. FaaS が一般的か

フレームワークの動作から素直に考えると、 SSR するアプリケーションをデプロイするのは何かしらのサーバーを対象とするのが自然です。そこから、少し頑張って FaaS に載せるようなイメージです。

例えば rails や php のアプリケーションがあったときに、それはサーバーへデプロイするのが自然であって、少し頑張ってコンテナ化してデプロイするのと同じような感じがします。

企業において一般的にどのように行われているか、というのはちょっと分からないですが、 FaaS を使う場合よりもコンテナで実行している場合の方が多いんじゃないかな、という気はします。

3. FaaS は起動に時間がかかるか

https://firebase.google.com/docs/functions/tips#write_idempotent_functions

例えば上記のような資料を見ていると、初回アクセスは間違いなく cold request だが、そのリクエストの処理(のルーティング)上で利用可能であるならば、既に起動済みの (function の) インスタンスにおいて、リクエストを処理する、という記述が読み取れます。なので、基本的にリクエスト量がそこそこあるようなサービスであるならば、大体 hot のまま起動し続けてくれることを期待することは、できるかもしれません。 (実際に利用する場合には、検証しましょう。)

2
  • 1.具体的かつわかりやすい回答をいただき大変ありがとうございます。理解を深めることができました。rehydrationで調べてみたところSSRについて詳しい記事がいろいろ出てきたのでさらに調査したいと思います。2.Next.jsのデプロイについて調べるとvercel関連の記事ばかりだったのでvercel以外にデプロイするイメージがつかめなかったので助かります。3.最終的にFaaSに乗せていく場合は起動時間の検証を行っていこうと思います。ありがとうございました。
    – redara
    Commented 2021年12月24日 1:20
  • この回答で疑問点が解決した場合、回答の左に側にあるチェックマークをクリックし、この回答を承認いただけますでしょうか?システム的に、この質問が解決済みであることを示すことができます。
    – Yuki Inoue
    Commented 2021年12月24日 5:52

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。