Vue3 createSSRApp()関数の詳細

Vue3 全局 APIVue3 グローバルAPI

createSSRApp()は、サーバーサイドレンダリング（SSR, Server-Side Rendering）専用の関数です。

createSSRApp()サーバーサイドでHTMLコンテンツを生成することで、ページの初回読み込み速度とSEO効果を向上させます。

とcreateApp()と比較して、createSSRApp()は、サーバーサイドレンダリングが必要なアプリケーションシナリオにより適しています。

1. サーバーサイドレンダリング（SSR）とは？

サーバーサイドレンダリング（SSR）とは、サーバー上でHTMLを生成し、生成したHTMLをクライアントに送信して表示するプロセスです。従来のクライアントサイドレンダリング（CSR, Client-Side Rendering）とは異なり、SSRはページの初回読み込み速度を向上させ、検索エンジン最適化（SEO）を改善するのに役立ちます。

クライアントサイドレンダリングでは、ブラウザはまず空のHTMLファイルをダウンロードし、JavaScriptでページコンテンツを動的に生成します。一方、サーバーサイドレンダリングでは、サーバーがすでに完全なHTMLコンテンツを生成しているため、ブラウザはそのコンテンツを表示するだけで済みます。

2. createSSRApp()の役割

Vue.js 3では、createApp()は、クライアントVueアプリケーションを作成するための標準関数です。一方、createSSRApp()は、createApp()の変種であり、サーバーサイドレンダリングをサポートするVueアプリケーションを作成するために特別に使用されます。

createSSRApp()の主な役割は、サーバーサイドでVueアプリケーションのHTMLコンテンツを生成し、それをクライアントに送信することです。これにより、Vueアプリケーションのサーバーサイドとクライアントサイドの一貫性が保証され、クライアントとサーバーサイドのレンダリング結果の不一致の問題を回避できます。

3. 使用createSSRApp()アプリケーションの作成

使用createSSRApp()Vueアプリケーションを作成する手順と、使用createApp()似ていますが、SSRに関連するいくつかの設定に特に注意する必要があります。

3.1 基本的な使い方

例

// 导入 createSSRApp
import { createSSRApp } from 'vue';

// 导入根组件
import App from './App.vue';

// 创建SSR应用
const app = createSSRApp(App);

// 挂载应用
app.mount('#app');

この例では、...を使用してcreateSSRApp()サーバーサイドレンダリングをサポートするVueアプリケーションを作成し、指定されたDOM要素にマウントしました。

3.2 サーバーサイドとクライアントサイドの違い

サーバーサイドとクライアントサイドでは、createSSRApp()の動作は異なります：

  • サーバーサイド：サーバーサイドでは、createSSRApp()VueアプリケーションのHTMLコンテンツを生成し、それをクライアントに送信します。
  • クライアントサイド：クライアントサイドでは、createSSRApp()サーバーが生成したHTMLコンテンツを引き継ぎ、それをインタラクティブなVueアプリケーションとしてアクティベートします。

3.3 SSRアプリケーションの設定

SSRアプリケーションを設定する際は、以下の点に注意する必要があります：

  • サーバーサイドでクライアント専用のAPIを使用しない：例えば、window 或 documentオブジェクトはサーバーサイドでは使用できません。
  • 使用onServerPrefetchフック：サーバーサイドレンダリング時には、...を使用できます。onServerPrefetchフックを使用して事前にデータを取得できます。

例

export default {
  async onServerPrefetch() {
    // サーバーサイドでデータを事前に取得する
    this.data = await fetchData();
  }
};

4. createSSRApp()とcreateApp()の違い

特性 createApp() createSSRApp()
レンダリング環境 クライアントサイドレンダリング（CSR） サーバーサイドレンダリング（SSR）
初回読み込み速度 遅く、クライアントのJavaScript実行に依存する 速く、サーバーがHTMLを生成済み
SEO 悪く、検索エンジンが動的コンテンツをクロールしにくい 良く、検索エンジンが完全なHTMLをクロールできる
適用シーン シングルページアプリケーション（SPA） SEOと高速読み込みが必要なアプリケーション

Vue3 全局 APIVue3 グローバルAPI

その他の拡張