はじめに

最近nuxt.jsで自身のブログサイトを作ったり、next.jsでアプリを作ったりしてSSRについて調べることが増えてきました。SSRを調べていく中で、前提知識の不足により全体の流れが掴みづらかったためまとめました。

調べる前・調べた後に整理しておきたかったこと

reactは仮想DOMを使用しており、仮想DOMはクライアント側でjavascriptにより実行される。nextは仮想DOMをサーバー側で生のHTML(RAW HTML)にしてクライアントに返す。(これについてfirebaseのyoutubeの解説でreactでSSRをしてみる的な動画があった気がします。分かりやすかったのでおすすめです。)
SSRをしても全てのjavascriptが読み込まれるわけではなく、クライアント側で読み込み・実行されるjavascriptが少なからずある。（nextjs公式にあった例だとLinkタグは、クライアント側でjsが読み込まれ、実行されると有効になる。）
クライアントでjavascriptが読み・実行されて、機能が有効になるまでのことをハイドレーション(hydration)という。
クライアントであるブラウザは、htmlを読み込んで画面にUIを表示させるのは得意でそこは早い。だからSSRによりhtmlを生成する意味がある。（クローラーが理解しやすくてSEOがよくなるとか、htmlだけだからセキュリティ的にいいとか、他にも色々意味はあるけどSSRを理解するためにはあんまりピンとこなかった）

説明が分かりやすかった記事一覧

図やアニメーションで解説されている記事は全体の流れ見えていいですよね。

firebase公式youtubeによる解説

英語わからんなんですが、1分42秒からいい感じにCSRと比較したアニメーションが見れます。

nextjs公式の解説

これも英語わからんなんですが、セクション３からnextjsの機能についての解説に交えながらSSRの説明もされています。

apollo client公式の解説

これも英語わからんなんですが、実際にSSRを使用したwebアプリを作る時に、ページによってSSRを使用したりしなかったり、状態が更新された時にどうするのとか迷ったときにみるとわかった気になれます。

終わり

最近、SSR・CSR・SSGに加えて、ISR（Incremental Static Regeneration）とかRSC（React Server Components）が出てきました。「DAI語かよ！！」と、銀魂の剣八の声でツッコミたいですが、いろんな技術や考え方が登場してくるのは面白いと思いました。