SPA・SSR・SSG

SPA

クライアントで js を用いて動的にページを生成する。

Client Side Rendering ともいう？

ページルーティングも js で行うためページごとの html ファイルが存在しない。アクセスしてきた URL を解析して js で動的にコンテンツを生成する

SSR

アクセス時に、サーバでコンテンツを生成する

ブログの例を考える

ブログページにアクセスがくる

サーバで DB からブログの本文を取得し、それを html にレンダリングする

クライアントにその html を返す

レンダリングと初回の api アクセをはサーバで行う

同じページだった場合２回目以降のデータの取得はクライアントで行う？

SSG

ビルド時に、サーバでコンテンツを生成する

動的なデータ更新はクライアント？サーバ時にレンダリング？

ブログの例を考える

ビルド時に DB からブログの本文を取得し、予めすべてのブログページをビルドする

ブログページにアクセスがくる

すぐに html を返す

SSR の２回目以降のデータ更新もビルド時にサーバで行う

コンテンツを更新するたびにビルドしないといけない

ビルド間のコンテンツの更新はどうするのか？

Next.js では fallback によって解決する

コンテンツがないからの html を返して、クライアントで記事を取得する

SPA っぽい

SPA と SSG のの区別はどらぐらいクライアントで api を叩くかとも表現できる