Guide > Server-Side Rendering Guide > Client Side Hydration の翻訳

src/guide/ssr/hydration.md

@@ -1,24 +1,24 @@
-# Client Side Hydration
+# クライアントサイドでのハイドレーション
 
-Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.
+ハイドレーション（Hydration）とは、Vue がサーバから送られてきた静的 HTML を引き継いで、クライアントサイドのデータ変更に対応できる動的な DOM に変換するクライアントサイドのプロセスのことです。
 
-In `entry-client.js`, we are simply mounting the app with this line:
+`entry-client.js` では、この行でアプリケーションをマウントしているだけです:
 
 ```js
 app.mount('#app')
 ```
 
-Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive.
+サーバはすでにマークアップをレンダリングし終わっているので、それを捨ててすべての DOM 要素を再生成したくないことは当然です。代わりに、静的マークアップを「ハイドレート」してインタラクティブにします。
 
-Vue provides a `createSSRApp` method for use in client-side code (in this case, in our `entry-client.js`) to tell Vue to hydrate the existing static HTML instead of re-creating all the DOM elements.
+Vue は、クライアントサイドのコード（ここでは `entry-client.js`）で使うため、 `createSSRApp` メソッドを用意していて、すべての DOM 要素を再生成する代わりに、既存の静的 HTML をハイドレートするように Vue へ指示します。
 
-### Hydration Caveats
+### ハイドレーションの注意点
 
-Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. There will be a warning in the browser console but your site will still work.
+Vue はクライアントサイドで生成された仮想 DOM ツリーがサーバからレンダリングされた DOM 構造と一致するかを検証します。不一致がある場合、ハイドレーションを中止し、既存の DOM を破棄して、最初からレンダリングします。ブラウザのコンソールには警告が表示されますが、サイトは引き続き動作します。
 
-The first key way to ensure that SSR is working to ensuring your application state is the same on client and server. Take special care not to depend on APIs specific to the browser (like window width, device capability or localStorage) or server (such as Node built-ins), and take care where the same code will give different results when run in different places (such as when using timezones, timestamps, normalizing URLs or generating random numbers). See [Writing Universal Code](./universal.md) for more details.
+SSR が動作していることを確かめる一番の重要な方法は、アプリケーションの状態がクライアントとサーバで同じであるか確認することです。特にブラウザ（ウィンドウ幅、デバイスの機能、localStorage など）やサーバ（Node 組み込みのような）に固有の API に依存しないように注意して、また同じコードが異なる場所で実行すると異なる結果が得られるように注意してください（タイムゾーン、タイムスタンプの利用や、 URL の正規化、乱数の生成など）。詳しくは [ユニバーサルなコードを書く](./universal.md) を参照してください。
 
-A second key thing to be aware of when using SSR + client hydration is that invalid HTML may be altered by the browser. For example, when you write this in a Vue template:
+SSR とクライアントのハイドレーションを使うとき気づくべき二番目に重要なことは、不正確な HTML がブラウザによって変更される可能性があるということです。例えば、 Vue テンプレートでこのように書いたとします:
 
 ```html
 <table>
@@ -28,6 +28,6 @@ A second key thing to be aware of when using SSR + client hydration is that inva
 </table>
 ```
 
-The browser will automatically inject `<tbody>` inside `<table>`, however, the virtual DOM generated by Vue does not contain `<tbody>`, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates.
+ブラウザは自動的に `<table>` の中に `<tbody>` を差し込みますが、 Vue が生成した仮想 DOM には `<tbody>` が含まれないため、不一致が発生します。正しく一致させるために、テンプレートでは正確な HTML を記述してください。
 
-You might consider using a HTML validator like [the W3C Markup Validation Service](https://validator.w3.org/) or [HTML-validate](https://html-validate.org/) to check your templates in development.
+[W3C Markup Validation Service](https://validator.w3.org/) や [HTML-validate](https://html-validate.org/) のような HTML バリデータを利用して、開発中のテンプレートを確認することも検討してください。