renderToString() サーバーレンダリングによる文字列化
最終更新：2026-10-22
renderToString() サーバーレンダリングによる文字列化
renderToString() は Node のサーバー側でアプリを HTML 文字列にレンダリングします。SSR の出力工程で、クライアントでは createSSRApp と組み合わせてハイドレーションします。
| グループ | レンダー関数と SSR |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
import { renderToString } from "vue/server-renderer"
const html = await renderToString(app)⚙️ 引数
| app, context? | アプリインスタンス（SSR context などのコンテキストオブジェクトを渡せます） |
|---|
戻り値：Promise
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows the SSR notice (real rendering happens in Node).💡 ポイント
ℹ️ 補足 vue/server-renderer から import します。Node 端の SSR 専用で、ブラウザでは使えません。
💡 ヒント onServerPrefetch によるデータの事前取得、useSSRContext によるコンテキストの受け渡しと組み合わせます。
⚠️ 注意 SSR ではコンポーネントが window/document にアクセスできません。アクセスするとサーバー側で即座にエラーになります。
🏷️ 関連レンダー関数と SSR
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q ブラウザでも使えますか？
A 使えません。server-renderer は Node 用パッケージです。
Q Nuxt との関係は？
A Nuxt 内部はまさにこの仕組み（renderToString + ハイドレーション）のラッパーです。
Q 出力には何を含めるべきですか？
A ページの HTML + シリアライズされた状態。クライアントのハイドレーション時に再利用されます。
