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 all 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 以降においては、埋め込みスクリプトはプロダクションモードで自動的に削除されます。

2.6.0 以降では、 `context.nonce` が存在すれば、それは、埋め込みスクリプトに `nonce` 属性として追加されます。これにより、インラインスクリプトを nonce を必要とする CSP に準拠することができます。

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

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

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

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

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

`template` オプションは、描画された HTML 、もしくは描画された HTML を解決する Promise を返す関数を指定できます。これにより、テンプレート文字列、そしてテンプレート描画プロセスにあり得る非同期な操作を利用できます。

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

1. アプリケーションコンポーネントの描画結果の文字列
2. 描画コンテキストオブジェクト

例:

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

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

参照:

- [ページテンプレートの使用](../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 で新規追加

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

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

### serverCacheKey

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

受信プロパティ (incoming props) に基づいたコンポーネントのキャッシュキーを返します。 `this` にアクセスできません。
2.6 以降、`false` を返すことによってキャッシュを明示的に回避することができます。

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

### serverPrefetch

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

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

詳細は[データのプリフェッチと状態](../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