Crewという会社でCTOをしてます、いぬっくすと申します。
こちらは会社で新人エンジニア向けに作った資料の一部になります。
初心者の方には分かりづらい、ブラウザからサーバーにどうやって情報が流れていくのか、5種類の構成について説明していきたいと思います。
- 静的サイトの構成
- 一般的なWEBサービスの構成
- フレームワークのSPA構成
- フレームワークのSSR構成
- サーバーレス構成
静的サイトの構成
HPやLPなど、静的なサイトの構成になります。
メリット
- 他に比べてシンプルな構成
- ホスティングサービスなどにアップすれば自分でサーバーを用意する必要がない
デメリット
- サイト情報を変更したい時は、直接HTMLを変更しないといけない
一般的なWEBサービスの構成
昔から使われている、一般的なWEBサービスの構成です。
メリット
- DBの情報を変更すれば、動的に表示を切り替えられる
デメリット
- ページ遷移時は必ずサーバーにリクエストを行うため、サーバーの負荷が高い
- フロントエンドとサーバサイド(のエンジニア)で分業がしにくい
=> 開発者全員が自前DBを用意したり、Dockerの知識が必要だったり
フレームワークのSPA構成
Nuxt.jsやNext.js等のフレームワークを用いたSPA構成です。
例えば、WEBサーバーにNuxt.js、APIサーバーにNode.jsなどのアプリケーションを配置します。
WEBサーバーは静的ファイル(HTMLや画像など)だけを返却すればよいので、ホスティングサービスに代替することも可能です。
メリット
- フロントエンドとサーバサイドで分業がしやすい
- リッチなページ遷移が可能
- スペックの低いサーバーでもある程度の負荷に耐えられる
デメリット
- WEBサーバーとAPIサーバーの両方の管理が必要
- 初期表示が遅くなる場合がある
- パソコンスペックによって動作が遅くなる場合がある
- meta情報やOGP画像が反映されない場合がある
フレームワークのSSR構成
Nuxt.jsやNext.js等のフレームワークを用いたSSR構成です。
SPAとの違いは、初回のレンダリングのみサーバー側で行い、次のページ遷移からはSPAで動作するハイブリット構成になります。
メリット
- SPAと違い、初期表示が遅くならない
- SPAと違い、metaやOGPが反映される
デメリット
- パソコンスペックによって動作が遅くなる場合がある
- SPAに比べ、フロントエンドに専門の知識が必要
- WEBサーバーとAPIサーバーの両方の管理が必要
- WEBサーバーにも、ある程度のスペックが必要になる
サーバーレス構成
ちまたで「サーバーレス」と叫ばれている構成です。Nuxt.jsやNext.jsなどのフレームワークを用いてサイトを表現し、HeadlessCMSなどのクラウドサービスからデータを取得します。
様々なクラウドサービスが出てきたことにより、自分でサーバーを用意せずにサービスのリリースが可能になりました。「ホスティングサービス」「CMSサービス」は多種多様な選択肢があります。
以下ではSPA構成の図ですが、ホスティングサービスによってはSSRすることも可能です。
メリット
・サーバーを自前で用意する必要がなく、管理が簡単
・フロントエンド(エンジニア)のみでサービスのリリースが可能
・サービスは無料枠があるため初期は費用をかけずにリリース可能
デメリット
・やりたいことが増えると、サーバーの構成が複雑になっていく
・ホスティングサービス、CMSサービスの制約によっては出来ないこともある
・サービスのユーザー数が増えるとサーバーを作るよりも費用が多くなる場合がある
補足
上記ではSSRとSPAを対比して記載していますが、これらは別ものです。
SPA（Single Page Application）
サーバーへの初回のリクエストで大元となるHTMLを取得し、ページ遷移はJavaScript側で制御を行うアプリケーションを指します。
ページ遷移が従来のものに比べスムーズで、リッチな表現が可能になります。SSR（Server Side Rendering）
サーバー側でHTMLのレンダリング処理を行うことを指します。「一般的なWEBサービスの構成」もSSRになります。
ホスティングサービス
静的なファイルを返却してくれるウェブサービスを指しています。GithubPageやGitlabPage、Netlifyなどが例に挙げられます。
ただ、ホスティングサービスの中にもSSRに対応しているサービスもあり…利用者としてはとても喜ばしいですが、教える方としてはとても複雑になっており教えにくいのが現状です。
終わりに
これらの構成は、プロジェクトの仕様や、参加するエンジニア数と知識量、かけられるお金(運用費)によって選ぶ必要があります。
また、Nuxt.jsやNext.js等のフレームワークはSSR/SPA以外にも魅力的な機能が多くあります。静的なサイトにおいても、これらのフレームワークを用いることで開発がとても楽になります。
それぞれの出来ること、メリット・デメリットを理解して技術を選定していきましょう。
閲覧いただきありがとうございました：）
こちらの記事が少しでもためになった方がいればフォローお願いします。
https://twitter.com/iminux