Next.jsでSSRの場合、getServerSidePropsあたりの動きがどうなっているかについてまとめていきます。
動作させて挙動見て動作の仕組みを推測している部分があります。指摘点あったらコメントください！
動作説明の参考に、こちらの自作のWebアプリを使っています。
目次
Next.jsのSSRの動き – 初回アクセス時
初回はサーバーサイド側でgetServerSidePropsを計算してその結果など用いてhtmlをレンダリングして返すといった感じです。
私の自作アプリを例にしていますが、networkタブのpreviewで返却されたhtmlが確認できます。
このアプリはクライアント側でデータを取得するので、サーバーサイドから返却される時点では全体は表示されるものの中身が表示されてないことが分かります。
青で囲っている部分がクライアント側で実行する処理のjsファイルやCSSなどのstaticファイルの一部です。
Next.jsのSSRの動き – リンク遷移などによる2度目以降のアクセス時
初回はhtmlを生成して返すことが分かりました。htmlを返すのでCSRに比べてSEO的に不利にならないのは納得ですね。
では次は、next/linkやnext/routerのpushで別ページにリンクした場合の挙動はどうなるかについてです。
getServerSidePropsの計算結果と次ページの差分JS/CSSファイルなどを返却するのみでhtmlは返却されません。
初回アクセス以降はCSRに多少近い動作になります。
networkタブを見ると、htmlは返却されておらずgetServerSidePropsで計算された値のjson、差分のjs/cssファイルのみが返却されることが分かります。
返却されてくるjsonは<ページ名>.jsonとなっていて、中身はgetServerSidePropsで返却される値がメインになっています。
2度目以降でもgetServerSidePropsはサーバーサイドで実行されることが分かります。pagePropsをもとにクライアント側で差分を描画するといった感じです。
2度目以降のアクセスの場合に起きる問題点
2度目以降はサーバーサイドで計算したデータと差分のJSファイルが主に返却されることが分かりました。
しかし、ページ遷移をしようとした瞬間からgetServerSidePropsなどの結果返却までに待機時間があり、ここに時間がかかるとユーザー側にはUIの動きがないように感じられます。
そのような場合はページ遷移中の場合にローディング画面を表示する必要があります。
そちらについては以下のページにまとめたので見てみてください！