こう
- 「CSR、
SSR、 SSG、 ISR の 違いと 使い分けを 説明できますか」 - 「管理画面と
ブログでは、 作り方を 変えますか」 - 「SPA で
作った ページが 検索に 出にくいと 言われました。 どうしますか」
面接官が
- 4 つを
「HTML を いつ、 どこで 作るか」という 1 本の 軸で 説明できるか - 検索に
出したいか、 内容が どれくらいの 頻度で 変わるか、で選べるか - それぞれの
弱点 (最初の 表示の 遅さ、 サーバーの 負担、 古い 内容が 出る ) まで言えるか
短い答え
- 4 つの
違いは、 画面の HTML を ブラウザで 作るか (CSR)、 頼まれる たびに サーバーで 作るか (SSR)、 先に 作り置くか (SSG)、 作り 置きを 時々 作り直すか (ISR) です。 - 検索に
出さなくて よい 管理画面は CSR、 毎回 内容が 変わり検索にも 出したい ページは SSR、 あまり 変わらない ブログや LP は SSG か ISR、と 分けます。 - 1 つの
サイトの 中でも ページごとに 混ぜて よく、 速さ、 サーバーの 負担、 内容の 新しさの どれを 優先するかで 決めます。
少し
4 つの違い
レンダリングとは、
| 方式 | いつ、 | 向いているページ |
|---|---|---|
| CSR | ブラウザが JavaScript を | ログイン後の |
| SSR | 頼まれる | 利用者ごと、 |
| SSG | 公開の | ブログ、 |
| ISR | 作り | 記事や |
CSR は、
SSG で
選び方と
- CSR の弱点最初の
表示が 遅く、 検索に 出にくいことがある。 検索に 出さない 画面なら 気に なりません - SSR の弱点頼まれる
たびに 作るので、 サーバーの 負担と 費用が 増え、 サーバーが 遅いと 画面も 遅くなります - SSG の弱点中身を
変える たびに 作り直しが 要ります。 ページが 多いと 作り直しに 時間が かかります - ISR の弱点作り直すまでの
間は、 少し 古い 内容が 出ます。 在庫の 数のように、 古いと 困る 値には 向きません
迷ったら、
最近の
話すときは、
よく
- 「SSR が一番良い」と言う サーバーの
負担と 費用が 増えます。 変わらない ページは 作り 置きの ほうが 速く 安く済みます - 検索に
出したい ページを CSR だけで作る 最初に 届く HTML に 中身が 無く、 検索や 共有の 札に 伝わりにくいことがあります - ISR で
古い 内容が 出る ことを忘れる 在庫や 値段のように、 古いと 困る 値は、 その 部分だけ毎回取りにいきます
深掘りの問い
- 「SSR で
遅い とき、 何を 疑いますか」 サーバーでの データの 取り出しが 遅い、 毎回同じ物を 作っている、を 疑い、 取り出しを まとめる、 結果を キャッシュする、 変わらない 部分は 作り置く、と答えます - 「ハイドレーションとは
何ですか」 サーバーで 作った HTML に、 ブラウザ側で JavaScript を つないで、 押せる、 動く 状態に する こと、と答えます - 「ページの
一部だけ毎回新しくしたいときは」ページは 作り 置きにし、 変わる 部分だけを ブラウザや サーバーで 後から 取りに いく、と答えます