NuxtにおけるSSR(サーバーサイドレンダリング)の仕組みを理解するためのメモです。 SSRは、サーバー側でHTMLを生成し、クライアントに送信することで、初期表示を高速化しSEO対策にも寄与します。 具体的にどのような場面でSSRが行われるかを理解することが開発時に役立ちます。 特にUniversalモードでのSSRの仕組みを理解します。
Universalモードとは
Universalモードは、Nuxtが提供するレンダリングモードの一つで、SSRとSPA(シングルページアプリケーション)の両方の特徴を持っています。 SSRを利用して初期表示を高速化し、その後はクライアント側でのSPAとして動作します。 SSRは、サーバー側でHTMLを生成し、クライアントに送信することで、初期表示を高速化します。 その後、クライアント側ではVue.jsのSPAとして動作します。 初期表示とは、ユーザーがブラウザでページを開いたときに最初に表示されることです。これはブラウザのURLバーにURLを入力してEnterキーを押す、またはリンクをクリックすることで行われます。
初回表示時のSSRの流れ
簡単な流れを説明します。
- ユーザーがブラウザでURLを入力してページにアクセスする。
- サーバーがリクエストを受け取り、SSRを行う。この時Vue component のsetup関数が実行されます。
- setup関数は、Vueコンポーネントの初期化処理を行うための関数で、データの取得や初期値の設定などを行います。SSR時に実行されることで、サーバー側で必要なデータを取得し、HTMLを生成することができます。
- SSR時にsetup関数が実行されることで、クライアント側でも同じデータを利用することができ、ハイドレーションがスムーズに行われます。
- サーバーがHTMLを生成し、クライアントに送信する。
- クライアントがHTMLを受け取り、表示する。この時HTMLのscriptタグは、Vue.jsのコードを含んでおり、javascriptファイルを追加でimportする。
- この時クライアント側でも実行されるため、setup関数は再度実行されます。
- その後、ハイドレーションが行われクライアント側でSPAとして動作する。
CSN(クライアントサイドナビゲーション)時のページ遷移
/de=
上記の通り、初回表示時はSSRが行われますが、その後のページ遷移はクライアント側で行われます。
これは、Nuxtが提供するnuxt-linkコンポーネントを使用したり、router.pushを利用した場合です。
この時のページ遷移は、クライアント側で行われ、SSRは行われません。
ざっくりとした流れは以下の通りです。
- ユーザーが
nuxt-linkをクリックする。 - Vue Routerがクリックイベントをキャッチする。
- CSN(クライアントサイドナビゲーション)が行われ、Vue Routerが新しいページを既に読み込んでいるjavascriptのファイルによってレンダリングされる。※ setup関数はクライアント側での初期化処理として呼び出されることがあります。
※ただし、動的インポートを行なっている場合は必要なjavascriptファイルの取得が行われます。この時もhtmlファイルの取得は行われません。
上記から、UniversalモードにおけるSSRとは、初回表示などのブラウザの標準機能を用いた遷移(ex. aタグのhref属性への遷移やwindow.location.hrefでの遷移,リンクに直接アクセスした時の遷移)で行われるので同一アプリケーションを利用している場合は、SSRの恩恵を受けるタイミングは限られています。SEO対策や初期表示の高速化を目的とする場合は、SSRを利用することが重要です。 一方デプロイのコストや運用の手間を考慮すると、SSRを利用することが必ずしも必要ではない場合もあります。特に、SPAとしての動作がメインである場合は、SSRを利用しない方が良い場合もあります。 要件に応じて、SSRを利用するかどうかを検討することが重要で、個人的にはそこまでSSRを利用する必要がない場合は、SSRを利用しない方が良いと考えています。
まとめ
- 初回表示やブラウザの標準機能を用いた遷移(ex. aタグのhref属性への遷移やwindow.location.hrefでの遷移,リンクに直接アクセスした時の遷移)でSSRが行われる。それ以降はnuxt-linkやrouter.pushを利用したSPAでの遷移プロセスを利用してクライアント側でのレンダリングが行われる。
- SSRが行われる場合は、表示対象ページに係るsetup関数が実行される。クライアントサイドでも呼び出されます。