createSSRApp() SSR アプリインスタンスの作成

最終更新：2026-10-22

createSSRApp() は createApp と同じですが、サーバーでレンダリングされた HTML を再レンダリングする代わりに、ハイドレーションで引き継ぎます。

📝 構文

const app = createSSRApp(App)
app.mount("#app")   // 再構築ではなくハイドレーション

rootComponent, rootProps?	createApp と同じ（ルートコンポーネント + 任意の props）

戻り値：アプリインスタンス

以下のコードを編集して結果を確認しましょう：

出力：

The console logs the call; in real SSR the server HTML is taken over.

ℹ️ 補足 ハイドレーションでは、サーバーとクライアントのレンダリング結果が一致している必要があります。一致しないとミスマッチ警告が出ます。

⚠️ 注意 ランダム値や現在時刻など、一致しないデータはハイドレーションを壊します。サーバーとクライアントで同じソースを使ってください。

💡 ヒント 通常の SPA では createApp を使います。SSR/SSG プロジェクトでのみこの関数を使ってください。

Q createApp との違いは？

A レンダリング戦略が異なります。createApp は一度空にして再構築し、createSSRApp はサーバーの DOM を再利用します。

Q 間違った方を使うとどうなりますか？

A SSR ページで createApp を使うと、サーバーの HTML が破棄されて一瞬ちらつきます（初回表示が白くなる感覚）。

Q SPA でも必要ですか？

A 必要ありません。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。