From 034c47c9712c41e19c817d67c0f4bf5245070fc0 Mon Sep 17 00:00:00 2001 From: Kazuki Kimura Date: Sun, 18 Jun 2017 22:15:30 +0900 Subject: [PATCH 1/2] Translate hydration.md via GitLocalize --- ja/hydration.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 ja/hydration.md diff --git a/ja/hydration.md b/ja/hydration.md new file mode 100644 index 00000000..7c551af9 --- /dev/null +++ b/ja/hydration.md @@ -0,0 +1,32 @@ +# クライアントサイドでのハイドレーション + +`entry-client.js` 中、以下の記述で私たちは簡単にアプリケーションをマウントします。 + +```js +// これは、ルート要素に id="app" をもつ App.vue テンプレートを想定します。 +app.$mount('#app') +``` + +サーバがマークアップを描画後に、この処理を実行し、DOM を再生成することを私たちは当然したくありません。代わりに、静的なマークアップの「ハイドレート」とそれをインタラクティブに生成したいと思います。 + +もしあなたがサーバレンダリングの出力を調べたら、アプリケーションのルート要素が以下のような特別な属性を持っていることに気づくでしょう。 + +```js +
+``` + +この `data-server-rendered` という特別な属性は、クライアントサイドの Vue に、これがサーバ上で描画されたことを知らせ、この要素はハイドレーションモードでマウントされるはずです。 + +ディベロップメントモードでは、Vue はクラインアントサイドで生成された仮想 DOM が、サーバで描画された DOM の構成とマッチしているかアサーションを行います。もしこれがマッチしていない場合、ハイドレーションを取りやめ、元の DOM を無視しスクラッチから描画を行います。**プロダクションモードでは、パフォーマンスの最大化のため、このアサーションは無効になります。** + +### ハイドレーション時の注意 + +サーバサイドレンダリングとクライアントサイドでのハイドレーションを行なった場合、ある特定の HTML の構造はブラウザによって変換されるかもしれないことがわかっています。例えば、あなたが Vueのテンプレート内に、以下のような記述をした場合です。 + +```html + + +
hi
+``` + +ブラウザは、自動で `` を `` に挿入します。しかし、Vue によって生成された仮想 DOM は、`` を含みません。そのため、ミスマッチが起こります。正しいマッチングを保証するために、あなたのテンプレート内では、必ず有効な HTML を記述してください。 From 78e4feae6d9b355702de3429afeadd66a843fba1 Mon Sep 17 00:00:00 2001 From: Kazuki Kimura Date: Tue, 20 Jun 2017 13:16:01 +0900 Subject: [PATCH 2/2] Translate hydration.md via GitLocalize --- ja/hydration.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ja/hydration.md b/ja/hydration.md index 7c551af9..4fe4e0e3 100644 --- a/ja/hydration.md +++ b/ja/hydration.md @@ -1,13 +1,13 @@ # クライアントサイドでのハイドレーション -`entry-client.js` 中、以下の記述で私たちは簡単にアプリケーションをマウントします。 +`entry-client.js` において、以下の記述で私たちは簡単にアプリケーションをマウントします。 ```js // これは、ルート要素に id="app" をもつ App.vue テンプレートを想定します。 app.$mount('#app') ``` -サーバがマークアップを描画後に、この処理を実行し、DOM を再生成することを私たちは当然したくありません。代わりに、静的なマークアップの「ハイドレート」とそれをインタラクティブに生成したいと思います。 +サーバがマークアップを描画後に、この処理を実行し、すべての DOM を再生成することを私たちは当然したくありません。代わりに、静的なマークアップの"ハイドレート"とそれをインタラクティブに生成したいです。 もしあなたがサーバレンダリングの出力を調べたら、アプリケーションのルート要素が以下のような特別な属性を持っていることに気づくでしょう。 @@ -17,7 +17,7 @@ app.$mount('#app') この `data-server-rendered` という特別な属性は、クライアントサイドの Vue に、これがサーバ上で描画されたことを知らせ、この要素はハイドレーションモードでマウントされるはずです。 -ディベロップメントモードでは、Vue はクラインアントサイドで生成された仮想 DOM が、サーバで描画された DOM の構成とマッチしているかアサーションを行います。もしこれがマッチしていない場合、ハイドレーションを取りやめ、元の DOM を無視しスクラッチから描画を行います。**プロダクションモードでは、パフォーマンスの最大化のため、このアサーションは無効になります。** +開発モードでは、Vue はクラインアントサイドで生成された仮想 DOM が、サーバで描画された DOM の構成とマッチしているか検証を行います。もしこれがマッチしていない場合、ハイドレーションを取りやめ、元の DOM を無視しスクラッチから描画を行います。**プロダクションモードでは、パフォーマンスの最大化のため、このアサーションは無効になります。** ### ハイドレーション時の注意