自分で作っていてやっと理解したのでまとめます。。。。 SPA ブラウザからリクエストされると、サーバーは、JS のビルドされたファイルと必要最小限のHTML要素しか含まれないHTMLファイルを返却する。HTMLファイルの中身はほぼないので、初期表示は何も表示されない。それから、ブラウザ上で<a style="color:inherit;background-color:#ffffff" href="http://d.hatena.ne.jp/keyword/API" target="_blank" rel="noopener noreferrer">API</a>などを使い、初期データを取得して、HTML 要素を<a style="color:inherit;background-color:#ffffff" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0" target="_blank" rel="noopener noreferrer">レンダリング</a>する。 SSR 「Server Side Rendering」の略である。上記の Client Side Rendering と対比して、ブラウザ上で初期データを<a style="color:inherit;background-color:#ffffff" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0" target="_blank" rel="noopener noreferrer">レンダリング</a>するのではなく、サーバー側でデータ取得、<a style="color:inherit;background-color:#ffffff" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0" target="_blank" rel="noopener noreferrer">レンダリング</a>までを行い、HTMLファイルを配信する。ただし、初期データ以外のデータは<a style="color:inherit;background-color:#ffffff" href="http://d.hatena.ne.jp/keyword/API" target="_blank" rel="noopener noreferrer">API</a>などを用いて取得を行い、SPA同様に、ブラウザ上で<a style="color:inherit;background-color:#ffffff" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0" target="_blank" rel="noopener noreferrer">レンダリング</a>を行う。 SSG 「Static Site Generator」の略であり、静的サイトジェネレーターである。 アプリケーションのビルド時に、<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/API" target="_blank" rel="noopener noreferrer">API</a>などからデータを取得し、HTMLを最初に生成しておく。サーバーへのリク<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9" target="_blank" rel="noopener noreferrer">エス</a>トがあった場合には、この生成されたHTMLファイルを返却する。このように、ブラウザではなく、サーバーで先にビルド時にデータを取得して<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0" target="_blank" rel="noopener noreferrer">レンダリング</a>を行っておくことを「プリ<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0" target="_blank" rel="noopener noreferrer">レンダリング</a>」という。また、生成された各 HTML はそのページに必要な最小限の&nbsp;<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/JavaScript" target="_blank" rel="noopener noreferrer">JavaScript</a>&nbsp;コードと関連づけられる。ブラウザによってページが読み込まれると、そのページの&nbsp;<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/JavaScript" target="_blank" rel="noopener noreferrer">JavaScript</a>&nbsp;コードが実行される。（このプロセスは ハイドレーション と呼ばれる。） 一番の特徴は、アプリケーションをビルドした際に、データベースなどからデータを取得することである。ブラウザからのリク<a style="color:inherit" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9" target="_blank" rel="noopener noreferrer">エス</a>トがあった場合ではない部分が大きな違いである。そのため、利用されるアプリケーションとしては、更新頻度の少ないサイトやブログなどが挙げられる。

SSR,SPA,SSGの違いを整理してみた！

ポートフォリオ用にRails API, React, Docker, AWSを使用して作りました。 このアプリについて 自分の好きな映画を検索して、好きな映画だけを集めた自分のオリジナルのリストが作れるアプリです。 また他の人が作ったリストをフォローしたり、映画やリストにコメントを残したりすることができます。 MovieList app allows users to make own lists with their selected movies. Users are able to follow the lists which is created by other users and also can leave comments and ratings in the list and movies. アプリはこちらから <a href="https://my-movielists.com/" target="_blank" rel="noopener noreferrer">https://my-movielists.com/</a>

【ポートフォリオ】MovieList アプリ を作ってみた

Next.jsで何か開発してみたいと思い、思い立ったのがこちらのNext.js とMicro CMSとVercelで作るJamstackなブログです。 Jamstack <ul><li>Jamstackは静的なコンテンツを配信するだけなので高速です<ul><li>静的なコンテンツだけなのでCDNから配信することで更に最適化を図れます</li><li>これが爆速の理由です！</li></ul></li></ul> とても楽しかったのでまたNext.jsを使って開発したいと思います！