SPA / SSG / SSR って何ですか？
はじめに
はじめまして、プログラミング勉強中のチョコ柿です。
今回Next.jsやReactを使ってみてSPAについて調べる機会があったので、アウトプットがてらその他のレンダリング方法についてもまとめてみようと思います。
何かの参考になれば幸いです！
そもそも何についての話？
SPAやSSG、SSRとはWebページの表示方法の種類です。
Web開発にはUXの向上やSEO対策など考えなくてはいけないことがたくさんあります。
それぞれのニーズに応えられるようにwebページの表示方法に複数種類があるのです。
SPAとは？
SPAは「Single Page Application」の略です。
名前の通り1つのWebページで完結して、コンテンツの更新などは動的に行われます。
最初のページロード時に必要な全てのHTML,CSS,Jacascriptがサーバーからクライアントに送信されます。
その後ユーザーが異なるコンテンツなどにアクセスした場合、ページ全体を読み込むのではなく必要な箇所だけJsを利用して更新するといった感じです。この時データの更新はAPIを利用します。
特徴
クライアントサイドレンダリング
SPAではHTMLの更新や生成がクライアントサイドで行われます。これは、初期にサーバーからHTMLやJavascriptを取得したら、その後の更新は全てクライアントサイドで行われることになります。
UXの向上
上述のようなクライアントサイドレンダリングがあるので、とにかく表示速度や応答速度が速いです。
そのためユーザーには満足度高く、利用してもらえることでしょう。
デメリット
初期読み込み速度
最初にHTML,CSS,Javascriptなど全てを読み込む必要があるので、初期読み込みに時間がかかります。これは規模が大きければ大きいほど、影響も大きくなりそうですね。
SEOの課題
クライアントサイドでレンダリングされるため、検索エンジンのクローラが静的なコンテンツのみをインデックスすることが多く、動的コンテンツがここに引っかからない可能性があります。
実際にSPAが採用されている事例
テキストだけでみてもよくわからないので、いろんなところから情報を集めて、実際にSPAで作られているプロダクトを見つけてきました。
具体的には
・Slack
・Gmail
・LINE
・GitHub
などだそうです！かなり身近なツールに使われているんですね。
SSGとは？
SSGは「Static Site Generation」の略です。
Static = 静的 という翻訳なので、ビルド時にwebサイトの全てを静的ファイルとして生成しておいて、リクエストがあったらそれを返すというレンダリング方法です。
動的にページを作成しないので、表示が高速になります。
特徴
パフォーマンス
上述の通りで、静的ファイルを高速で提供できるので、パフォーマンスはかなり良いです。
セキュリティ
動的なサーバーサイドの処理が少ないため、セキュリティ面でも安心です。
コスト効率
サーバーのリソース消費が少なく、運用コストが抑えられます。
デメリット
コンテンツ更新の遅さ
サイトの内容を更新するたびに、全ページの再ビルドを行うのでかなり時間がかかります。更新などが多く発生するプロダクトには向かなさそうですね。
ダイナミックコンテンツの取扱い
ダイナミックコンテンツとは、ユーザーからのリクエストに応じてリアルタイムで変更が起こるコンテンツのことです。
もうお察しかと思いますが、SSGは基本的に静的なコンテンツの生成に適しているのでこういったコンテンツには向いていないです。
実際にSSGが採用されている事例
具体的なサイト名とかはないですが、向いているのはブログなどの常に最新の情報を取得する必要がないものですね。
SSRとは？
SSRとは「Server Side Rendering」の略です。
これはユーザーからのリクエストに応じて、サーバー上でAPIと連携しつつHTMLページを作成してクライアントに送信するというもの。
これはユーザーが新しいページに遷移したり、データの更新があるたびに繰り返される処理です。
特徴
SEO最適化
データ含め、完成されたHTMLページがサーバーから連携されるため、クローラがコンテンツを容易にクロールできSEOにめちゃくちゃ有利です！
高速な初期表示
ユーザーは完全にレンダリングされたページを受け取るため、初期ロード時間が短縮されます。
デメリット
サーバー負荷
リクエストに対してページを作成する必要があるため、サーバー側の負荷がめちゃくちゃ高くなります。
実際にSSRが採用されている事例
具体的な例は調べましたがあまり出てきませんでした。
ただ、コンテンツを頻繁に更新するサービスに適していますので、動画配信サービスやSNSなどが適していると思われます！
まとめ
それぞれのメリットデメリットを知っておくことで、自分が開発したいプロダクトに適したレンダリング方法を選べるようになれると良いかなと思います。
誤っている情報等ありましたら、コメントで優しく教えていただけると嬉しいです！！
ここまで読んでいただきありがとうございました！
参考文献
Discussion