Skip to content

update ja docs #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 9, 2019
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions docs/ja/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,12 @@ bundleRenderer.renderToStream([context]): stream.Readable

### template

- **型:**
- `string`
- `string | (() => string | Promise<string>)` (2.6 から)

**文字列テンプレートを使用している場合:**

ページ全体の HTML を表すテンプレートを設定します。描画されたアプリケーションの内容を指し示すプレースホルダの代わりになるコメント文 `<!--vue-ssr-outlet-->` をテンプレートには含むべきです。

テンプレートは、次の構文を使用した簡単な補間もサポートします。
Expand All @@ -99,13 +105,43 @@ bundleRenderer.renderToStream([context]): stream.Readable

2.5.0 以降においては、埋め込みスクリプトはプロダクションモードで自動的に削除されます。

In 2.6.0+, if `context.nonce` is present, it will be added as the `nonce` attribute to the embedded script. This allows the inline script to conform to CSP that requires nonce.

加えて、`clientManifest` も渡された場合、テンプレートは自動で以下を挿入します。

- (自動で受信される非同期のデータを含んだ)描画対象が必要とするクライアントサイドの JavaScript と CSS アセット
- 描画済みのページに対する最適な `<link rel="preload/prefetch">` リソースヒント

レンダラに `inject: false` も渡すことで、すべての自動挿入を無効にすることができます。

**関数テンプレートを使用している場合:**

::: warning
関数テンプレートは `renderer.renderToString` を使用するとき、2.6 以降でのみサポートされます。`renderer.renderToStream` はまだサポートされていません。
:::

`template` オプションは、描画された HTML 、もしくは描画された HTML を解決する Promise を返す関数を指定できます。これにより、ネイティブの JavaScript 文字列、そしてテンプレート描画プロセスにおける可能性としてある非同期な操作を利用できます。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ネイティブの JavaScript 文字列

原文ではテンプレート文字列のことを言ってるように見えます。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そしてテンプレート描画プロセスにおける可能性としてある非同期な操作を利用できます。

potential async operations なので、"可能性" は "非同期な操作" にかかっていますが、この訳文だと少しそれが見えづらいように思います。
"テンプレート描画プロセスにおいてあり得る非同期な操作を利用できます。" みたいな感じでどうでしょうか?


関数は 2 つの引数を受け取ります:

1. 文字列としてアプリケーションコンポーネントの描画結果
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

アプリケーションコンポーネントの描画結果の文字列
とか。

2. コンテキストオブジェクトの描画
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rendering は context object にかかっているので、"描画コンテキストオブジェクト" にしてしまって良い気がします。


例:

```js
const renderer = createRenderer({
template: (result, context) => {
return `<html>
<head>${context.head}</head>
<body>${result}</body>
<html>`
}
})
```

カスタムテンプレート関数を使用するとき、自動的に注入されるものが何もないことに注意してください。最終的な HTML に含まれるものを完全に制御できますが、全てあなた自身で含める責任があります (例えば、バンドルレンダラを使用する場合、アセットリンク)。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

責任があります

直訳だとこうなのですが、この文脈だと違和感があるので必要がありますにするのはどうですか?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

例えば、バンドルレンダラを使用する場合、アセットリンク

突然文章が終わった印象を受けてしまうので、"〜使用する場合のアセットリンク" みたいにするのはどうでしょうか?


参照:

- [ページテンプレートの使用](../guide/#using-a-page-template)
Expand Down Expand Up @@ -243,6 +279,31 @@ const renderer = createRenderer({

例として、[`v-show` のサーバサイド実装はこちら](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js) です。

### serializer

> 2.6 で新規
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

新規追加?


`context.state` に対してカスタムシリアライザ関数を提供します。シリアライズされた状態は最終的な HTML の一部になるため、セキュリティ上の理由から、HTML 文字を適切にエスケープする関数を使用することは重要です。デフォルトシリアライザは、`{ isJSON: true }` による [serialize-javascript](https://github.com/yahoo/serialize-javascript) です。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{ isJSON: true } がセットされた serialize-javascript です。
でどうでしょう?


## サーバのみのコンポーネントオプション

### serverCacheKey

- **型:** `(props) => any`

受信プロパティ(incoming props) に基づくコンポーネントのために、キャッシュキーを返します。`this` にアクセスできません。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

受信プロパティ (incoming props) に基づいたコンポーネントのキャッシュキーを返します。
はどうでしょうか。

2.6 以降、`false` を返すことによってキャッシュを明示的に回避することができます。

詳細は[コンポーネントレベルでのキャッシュ](../guide/caching.html#component-level-caching)を参照してください。

### serverPrefetch

- **型:** `() => Promise<any>`

サーバサイドレンダリング中に非同期データをフェッチします。フェッチしたデータをグローバルストアに保存し、Promise を返す必要があります。サーバレンダラはこのフック上で Promise が解決されるまで待ちます。このフックは `this` 経由でコンポーネントインスタンスにアクセスします。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

必要があります

should なので、"この関数は〜します" くらいでいいんじゃないですかねー。


詳細は[データのプリフェッチと状態](../guide/data.html)を参照してください。

## webpack プラグイン

webpack プラグインは、スタンドアロンのファイルとして提供され、次の値を必要とします:
Expand Down
4 changes: 4 additions & 0 deletions docs/ja/guide/caching.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ export default {

定数を返すと、コンポーネントは常にキャッシュされ、単なる静的なコンポーネントには効果的です。

::: tip キャッシングの回避
2.6.0 以降、 `serverCacheKey` で明示的に `false` を返すことでコンポーネントはキャッシングを回避して新たに描画されるようになります。
:::

### いつコンポーネントキャッシュを使うか

描画中にレンダラがコンポーネントのキャッシュにヒットした場合、キャッシュされた結果をサブツリー全体で直接再利用します。 つまり、次の場合にコンポーネントをキャッシュ **しない** でください。
Expand Down
Loading