もう10月に入ってしまいましたね、、早い。今年も残り3ヶ月。全力で駆け抜けたい所存ではありますが、大学に入ってから通学時間が2時間から20分になったせいか、体力がだいぶ衰えてきて危機感を感じている今日この頃です。
最近は、インターンだけに限らず、Tokyo Game Show 2024で発表したり、学内で作品を制作したりと、やることや吸収することが多くて大変ですが、自分なりに色々と理解を深めていきたいところです。
そんなことはさておき、早速本題に、、、！
はじめに
今回のテーマは、主に2つになります。レンダリング方式の違いについてと、Nuxt.jsにおける<a>と<NuxtLink>の違いについて、まとめています。
MPA, SPA, SSR, CSR, SSGについての再認識
最近、何かと開発を進めている中で、公式ドキュメントを見ることが多くなりました。その中で、SSRやらSPAという言葉が出てきて、「なんだっけ？」となったので、いい機会だと思いまとめました。
まずはこれまでの仕組みから、おさらい。
Multi Page Application(MPA)
名前の通り、複数のページから構成されており、ユーザーはリンクやボタンをクリックすることで、サーバから新たなページ(全体)を読み込みます。そのため、通信速度が極度に遅かったり、ページが重かったりするとページ全体が白くなる現象が発生します。
今でも、MPAを使っているところも多いですが、通信速度の向上と端末の処理性能向上もあり、ページ全体が白くなるという現象は少なくなってきている気がします。(比較的重いサイトだと既に別の方式に切り替えているのも影響しているが、、)
余談ですが、阿部寛さんのページは、MPA方式のはず...?
Single Page Application(SPA)
SPAの基本概念として、ページ遷移をせずに1ページの中で、部分的にコンテンツを更新・表示する仕組みのことです。
ユーザ側からすると、初期ロードが長いという欠点を差し置けば、動作が軽快なので、操作性の向上などのメリットがあります。一方で、クライアント端末でレンダリングする仕組み上、SEOに滅法弱いとも聞きます。そのため、基本的にはSEOが必要のない or 検索エンジンにクローリングされることを想定していないシステム(サービス)で利用することで、最大限の恩恵を受けられます。ただ、動作が軽快と言えど、レンダリング処理がクライアントである以上、重すぎには注意が必要。
SPAを用いているサービスの事例としては、みんな大好きSlackやいつもお世話になっているGoogle Mapなどが挙げられます。
技術スタックとしては、Vue.jsやReact.jsが有名です。
Sever Side Rendering(SSR)
SSRは、ページ全体の生成をサーバーサイドで行い、生成されたページをユーザーに流す方式です。サーバ側でレンダリング処理を行うため、クライアントへの負荷は少ない一方で、サーバ側への負荷は必然的に高くなってしまいます。そのため、トラフィック量に合わせて、スケールアップ・スケールダウンする必要があります。他にも、ページの部分ごと(Ex. サイドバーごとやメインコンテンツごと)に読み込んでいるわけではないので、一度に送受信する通信容量が大きくなりがちと言われています。(尚、初回アクセス時に限る)その点では、SPAのほうが優っているといえます。しかし、SPAの弱点であるSEOについては、完全にレンダーされたページを照会するので、強いと言えます。
Vue.jsの公式Docsに書いてありますが、
現時点で Google と Bing は、同期型の JavaScript アプリケーションを問題なくインデックスできます。ここでのキーワードは同期です。アプリケーションがローディングスピナー（ロード状態）と共に始まり、Ajax でコンテンツを取得する場合、クローラーはアプリケーションの終了を待ちません。つまり、SEO が重要なページで非同期にコンテンツを取得する場合、SSR が必要になるかもしれません。
とのことなので、やはりSEOを気にする場合はSSRのほうがいいかもしれません。
少し注意なのが、、、
ここで一つ疑問。「MPAとSSRってほぼ一緒では！？」となりそうですが、実は
- SSRはCSRが対で
- SPAはMPAが対
になるようです。
何が違うのかと思いますが、初回アクセス以降に、どのようにページを更新するかで変わってくるようです。
MPAの場合
MPAは、初回アクセス関係なく、常にページ全体をサーバから取得・表示します。なので、ページの一部分だけを更新しようとしても、常にページ全体をリロードすることになります。
SSRの場合
一方でSSRは、初回アクセス時はサーバサイドでレンダリングしたのち、クライアントに対してレンダーしたものを返します。しかし、その後はCSR方式を用いて、部分ごとに再レンダリングを行います。
そのため、一見するとMPAとSSRが一緒のように感じられますが、注意が必要そうですね。
Client Side Rendering(CSR)
これまたよく、SPAと同じ(同意義)と言われることが多いですが、若干ニュアンスが違います。SPAをするには、CSRが前提技術です。つまり、CSRがないとSPAは動きません！！()
動作の流れはとしては、ユーザーに対しては最小限のHTMLとJavaScriptを渡し、クライアント側でレンダリングします。そのため、初回アクセス時は若干の遅延を感じることが多いですが、2回目以降は更新が必要なところのみを更新するため、動作が高速になります。
Static Site Generator(SSG)
SSGは、予めページ全体をサーバー側でレンダリングし、ユーザーからリクエストがあった場合、既にレンダリングされたものを返却します。そのため、リアルタイム性が重要なWebアプリや更新が必要な場合は、SSGは向いていません。SEOを気にする場合は、SSGがいいのかもしれない。
結局どれがいいのか
どの方式が一番ベストなのかは、開発しているサービス(システム)の特性を検討したうえで選択するのが良さそうだなと思いました。技術スタックの選定は、二の次ですね。
Nuxtjsにおける<a>と<NuxtLink>の使い分け
簡単にまとめると、基本的には<NuxtLink>を使うことが良さそうです。
Nuxt.jsの公式Docsに、このように書かれていました。
<NuxtLink>is a drop-in replacement for both Vue Router's<RouterLink>component and HTML's<a>tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
日本語にすると
<NuxtLink>は、Vue Routerの<RouterLink>コンポーネントとHTMLの<a>タグの両方に代わる代替コンポーネントです。リンクが内部リンクか外部リンクかを賢く判断し、利用可能な最適化（プリフェッチング、デフォルト属性など）を適用して適切にレンダリングします。
重要なのは、利用可能な最適化（プリフェッチング、デフォルト属性など）の部分で、<NuxtLink>を用いることで、事前にリンク先の読み込み(プリフェッチング)が自動的に行われるようです。そのため、アプリケーション内部でのリダイレクトについては、<NuxtLink>を用いることで、高速化・操作性の向上が図りやすい。(らしい)
ただし、アプリケーション外のページへのリダイレクトは事前読み込みをしてくれるのかは不明。セキュリティ的な恩恵を受けられるそうなので、気になる人は公式Docsを読むと良いかも。
最後に
急に寒くなったり、暑くなったりと寒暖差の変化が多いので、皆様体調にはご自愛ください。ではまた。
Discussion