85305


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

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

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

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


CC BY-SA 4.0
2021-12-21T07:03:47.273
85250
2021-12-23T13:34:12.870
2021-12-21T07:29:10.217
50588
50588
question
javascript nuxt.js
SSRに関する疑問点


# 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
のまま起動し続けてくれることを期待することは、できるかもしれません。 (実際に利用する場合には、検証しましょう。)


CC BY-SA 4.0
2021-12-23T13:34:12.870
85305
2021-12-23T13:34:12.870
754
85250
answer