サーバサイドレンダリング #176

mikakane · 2016-10-03T12:38:00Z

レビューお願いします！

kazupon

レビュー 👀 しました！指摘内容多くて恐縮ですが、対応よろしくお願いします！

kazupon · 2016-10-04T07:21:16Z

src/guide/ssr.md


 ### SEO

-Google and Bing can index synchronous JavaScript applications just fine. _Synchronous_ being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not wait for you to finish.
+Google や Bing は、同期的な Javascript のアプリケーションを上手にインデックスしてくれます。 _同期的な_ というのが重要で、もしあなたのアプリケーションが、ローディングのスピナーから始まり、 Ajax 経由でコンテンツを取得しようとするならば、クローラはローディングの完了を待ってくれないでしょう。


翻訳typoお願いします！

Javascript -> JavaScript

kazupon · 2016-10-04T07:26:22Z

src/guide/ssr.md

 renderer.renderToString(app, function (error, html) {
  if (error) throw error
  console.log(html)
  // => <p server-rendered="true">hello world</p>
 })
 ```

-Not so scary, right? Of course, this example is much simpler than most applications. We don't yet have to worry about:
+どうです？こうわくないでしょう？もちろんこの例は大半のアプリケーションより随分とシンプルなものです。まだこの段階では、次のような事は考えなくても良いでしょう:


下記でお願いします！
こうわくないでしょう？ -> 怖くないでしょう？

kazupon · 2016-10-04T07:37:17Z

src/guide/ssr.md

+- コンポーネントのキャッシュ
+- ビルドの仕組みについて
+- ルーティング
+- Vuex State との合成


Hydration の訳ですが、一旦ハイドレーション(Hydration)にしておいてください！
最終的にこちらで良い訳が思いついたら、こちらで対応します！
なので、Vuex の状態ハイドレーション (Hydration) でオネガイします。

kazupon · 2016-10-04T07:38:39Z

src/guide/ssr.md

- Routing
- Vuex State Hydration
+- Web サーバについて 
+- Response ストリーム


Response ストリーミング でお願いします。

kazupon · 2016-10-04T07:46:57Z

src/guide/ssr.md

 server.listen(5000, function (error) {
  if (error) throw error
  console.log('Server is running at localhost:5000')
 })
 ```

-And that's it! Here's [the full application](https://github.com/chrisvfritz/vue-ssr-demo-simple), in case you'd like to clone it and experiment further. Once you have it running locally, you can confirm that server-side rendering really is working by right-clicking on the page and selecting `View Page Source` (or similar). You should see this in the body:
+これで以上です！ [アプリケーションの全体](https://github.com/chrisvfritz/vue-ssr-demo-simple) はここから確認でき、クローンして、色々試してみる事が出来ます。ローカル環境でアプリケーションを実行して、右クリックメニューの "ページのソースを表示" (もしくはそれに近い何か)を選択することで、サーバサイドレンダリングが実際に動いている事を確認できるでしょう。 Body には次のような記述が確認できるでしょう:


Body -> body ですね。

kazupon · 2016-10-04T08:23:12Z

src/guide/ssr.md

@@ -311,19 +311,19 @@ Vue.component({
 })
 ```

-### Ideal Components for Caching
+### キャッシュしやすいコンポーネントのために


ここは一応原文を忠実に訳した キャッシュするための理想的なコンポーネント にしましょう！

kazupon · 2016-10-04T08:36:23Z

src/guide/ssr.md


-Any "pure" component can be safely cached - that is, any component that is guaranteed to generate the same HTML given the same props. Common examples of these include:
+"純粋な"コンポーネントは - 同じ porps に対して必ず同じ HTML を生成する事が保証されている限り - どのようなものでも安全にキャッシュすることが出来ます。 よくある例としては次のようなものがあります:


Any "pure" component can be safely cached - that is, any component that is guaranteed to generate the same HTML given the same props. 、ここの訳ですが、React の pure component とほぼ同じような内容を定義しているので、下記のようにお願いします。

"ピュア(pure)"コンポーネントは、同じ props に対して必ず同じ HTML を生成することを保証しているコンポーネントで、安全にキャッシュすることができます。

kazupon · 2016-10-04T08:37:22Z

src/guide/ssr.md

- Static components (i.e. they always generate the same HTML, so the `serverCacheKey` function can just return `true`)
- List item components (when part of large lists, caching these can significantly improve performance)
- Generic UI components (e.g. buttons, alerts, etc - at least those that accept content through props rather than slots/children)
+- Static なコンポーネント (例えば、常に同じ HTML を生成するもので `serverCacheKey` 関数がただ `true` を返すのみで良いケース)


ここの Static は 静的 に訳しましょう！

kazupon · 2016-10-04T08:40:07Z

src/guide/ssr.md


-## Build Process, Routing, and Vuex State Hydration
+## ビルド、ルーティング、そして Vuex State の活用


Vuex State Hydration とりあえず、Vuex の状態ハイドレーションにしておいてください。

kazupon · 2016-10-04T08:49:49Z

src/guide/ssr.md


- [vue-server-renderer docs](https://www.npmjs.com/package/vue-server-renderer#api): more details on topics covered here, as well as documentation of more advanced topics, such as [preventing cross-request contamination](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) and [adding a separate server build](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle)
- [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0): the definitive example of integrating all major Vue libraries and concepts in a single application
+- [vue-server-renderer ドキュメント](https://www.npmjs.com/package/vue-server-renderer#api): ここで触れた内容に関するより詳しい解説に加え、[複数リクエストによる障害について](https://www.npmjs.com/package/vue-server-renderer#why-use-bundlerenderer) や [サーバ向けのビルド手順](https://www.npmjs.com/package/vue-server-renderer#creating-the-server-bundle)といった応用的なトピックを紹介しています。


preventing cross-request contamination の訳ですが、複数リクエストによる汚染防止 な感じで原文訳に近いかたちにしておいてださい。

mikakane · 2016-10-04T10:12:16Z

@kazupon
レビューありがとうございます！
指摘いただいた点など反映してpushさせてもらいました！

PS. ストリームとストリーミングの表記ゆれ、使い分けはどのようにすればよいでしょうか？
一応全体的にストリーミングに修正し、ストリーム (stream) の項目のみストリームとしております。

kazupon

修正内容確認しました。 🙆 です。

kazupon · 2016-10-04T10:55:50Z

PS. ストリームとストリーミングの表記ゆれ、使い分けはどのようにすればよいでしょうか？
一応全体的にストリーミングに修正し、ストリーム (stream) の項目のみストリームとしております。

そうですね。
Node.js のコンテキストでは、ストリームは概念であり、Node.jsランタイムの中ではオブジェクトです。
現実世界の例ですと、水道の管ですね。
ストリーミングは、データの流れを表す概念であり、Node.jsランタイムの中では、データを流したり止めたりするなどの処理になります。
ストリーミングを現実世界で例えると、水道の蛇口をひねったり、閉じたり、フィルタをかましたりといったようなことでしょうか。

kazupon

すいません。:bow:
さっきの stream / streaming の違いを踏まえて、改めてレビューし直しました。
再度お願いしいます！ 🙇

kazupon · 2016-10-04T11:02:52Z

src/guide/ssr.md

 server.get('*', function (request, response) {
-  // Render our Vue app to a stream
+  // ストリーミングに Vue アプリケーションを書き込む


ストリームに Vue アプリケーションを書き込む

kazupon · 2016-10-04T11:03:29Z

src/guide/ssr.md

-3. Write the app HTML to the response as it becomes available
-4. Write the HTML that comes after the app to the response and end it
-5. Handle any errors
+1. ストリーミングを利用する準備


ストリーム でお願いします。

kazupon · 2016-10-04T11:03:44Z

src/guide/ssr.md

    return response
      .status(500)
      .send('Server Error')
  })
 })
 ```

-As you can see, it's not much more complicated than the previous version, even if streams may be conceptually new to you. We just:
+このように、ストリーミングという新しい概念に触れる場合でも、前の例と比べてもそんなに複雑になるということはありません。私達がすることといえば次の5つです:


ここも、ストリーム でお願いします。

mikakane · 2016-10-04T18:30:44Z

表記修正しました。ご確認よろしくお願いします

kazupon · 2016-10-05T01:47:37Z

ありがとうございました！ 🎉

サーバサイドレンダリング

12ce10b

kazupon requested changes Oct 4, 2016

View reviewed changes

サーバサイドレンダリング

fe68fa4

kazupon approved these changes Oct 4, 2016

View reviewed changes

kazupon requested changes Oct 4, 2016

View reviewed changes

サーバサイドレンダリング表記修正

7353735

kazupon approved these changes Oct 5, 2016

View reviewed changes

kazupon merged commit f1c4560 into vuejs:lang-ja-2.0 Oct 5, 2016


		Any "pure" component can be safely cached - that is, any component that is guaranteed to generate the same HTML given the same props. Common examples of these include:
		"純粋な"コンポーネントは - 同じ porps に対して必ず同じ HTML を生成する事が保証されている限り - どのようなものでも安全にキャッシュすることが出来ます。よくある例としては次のようなものがあります:


		## Build Process, Routing, and Vuex State Hydration
		## ビルド、ルーティング、そして Vuex State の活用

サーバサイドレンダリング #176

サーバサイドレンダリング #176

Uh oh!

Conversation

mikakane commented Oct 3, 2016

Uh oh!

kazupon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mikakane commented Oct 4, 2016

Uh oh!

kazupon left a comment

Choose a reason for hiding this comment

Uh oh!

kazupon commented Oct 4, 2016

Uh oh!

kazupon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mikakane commented Oct 4, 2016

Uh oh!

kazupon commented Oct 5, 2016

Uh oh!

Uh oh!