Skip to content

Commit 14e3169

Browse files
kazuponkazupon
authored
update ja docs (#228)
* merge 2.6 updating en docs to ja docs * docs(ja): translates * docs(ja): more translation * docs(ja): update ref: - #228 (review) - #228 (comment) * docs(ja): update template function explanation ref: - #228 (comment) - #228 (comment) * docs(ja): update template function example codes ref: - #228 (comment) * docs(ja): update serializer ref: - #228 (comment) - #228 (comment) * docs(ja): update server only component options ref: - #228 (comment) - #228 (comment) * docs(ja): update data section ref: - #228 (comment) - #228 (comment) - #228 (comment) - #228 (comment) - #228 (comment) - #228 (comment)
1 parent b14cc03 commit 14e3169

File tree

3 files changed

+168
-136
lines changed

3 files changed

+168
-136
lines changed

‎docs/ja/api/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,12 @@ bundleRenderer.renderToStream([context]): stream.Readable
8282

8383
### template
8484

85+
- **型:**
86+
- `string`
87+
- `string | (() => string | Promise<string>)` (2.6 から)
88+
89+
**文字列テンプレートを使用している場合:**
90+
8591
ページ全体の HTML を表すテンプレートを設定します。描画されたアプリケーションの内容を指し示すプレースホルダの代わりになるコメント文 `<!--vue-ssr-outlet-->` をテンプレートには含むべきです。
8692

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

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

108+
2.6.0 以降では、 `context.nonce` が存在すれば、それは、埋め込みスクリプトに `nonce` 属性として追加されます。これにより、インラインスクリプトを nonce を必要とする CSP に準拠することができます。
109+
102110
加えて、`clientManifest` も渡された場合、テンプレートは自動で以下を挿入します。
103111

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

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

117+
**関数テンプレートを使用している場合:**
118+
119+
::: warning
120+
関数テンプレートは `renderer.renderToString` を使用するとき、2.6 以降でのみサポートされます。`renderer.renderToStream` はまだサポートされていません。
121+
:::
122+
123+
`template` オプションは、描画された HTML 、もしくは描画された HTML を解決する Promise を返す関数を指定できます。これにより、テンプレート文字列、そしてテンプレート描画プロセスにあり得る非同期な操作を利用できます。
124+
125+
関数は 2 つの引数を受け取ります:
126+
127+
1. アプリケーションコンポーネントの描画結果の文字列
128+
2. 描画コンテキストオブジェクト
129+
130+
例:
131+
132+
```js
133+
const renderer = createRenderer({
134+
template: (result, context) => {
135+
return `<html>
136+
<head>${context.head}</head>
137+
<body>${result}</body>
138+
<html>`
139+
}
140+
})
141+
```
142+
143+
カスタムテンプレート関数を使用するとき、自動的に注入されるものが何もないことに注意してください。最終的な HTML に含まれるものを完全に制御できますが、全てあなた自身で含める必要があります (例えば、バンドルレンダラを使用する場合のアセットのリンク)。
144+
109145
参照：
110146

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

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

282+
### serializer
283+
284+
> 2.6 で新規追加
285+
286+
`context.state` に対してカスタムシリアライザ関数を提供します。シリアライズされた状態は最終的な HTML の一部になるため、セキュリティ上の理由から、HTML 文字を適切にエスケープする関数を使用することは重要です。デフォルトシリアライザは、`{ isJSON: true }` がセットされた [serialize-javascript](https://github.com/yahoo/serialize-javascript) です。
287+
288+
## サーバのみのコンポーネントオプション
289+
290+
### serverCacheKey
291+
292+
- **型:** `(props) => any`
293+
294+
受信プロパティ (incoming props) に基づいたコンポーネントのキャッシュキーを返します。 `this` にアクセスできません。
295+
2.6 以降、`false` を返すことによってキャッシュを明示的に回避することができます。
296+
297+
詳細は[コンポーネントレベルでのキャッシュ](../guide/caching.html#component-level-caching)を参照してください。
298+
299+
### serverPrefetch
300+
301+
- **型:** `() => Promise<any>`
302+
303+
サーバサイドレンダリング中に非同期データをフェッチします。この関数はフェッチしたデータをグローバルストアに保存し、Promise を返します。サーバレンダラはこのフック上で Promise が解決されるまで待ちます。このフックは `this` 経由でコンポーネントインスタンスにアクセスします。
304+
305+
詳細は[データのプリフェッチと状態](../guide/data.html)を参照してください。
306+
246307
## webpack プラグイン
247308

248309
webpack プラグインは、スタンドアロンのファイルとして提供され、次の値を必要とします:

‎docs/ja/guide/caching.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ export default {
7373

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

76+
::: tip キャッシングの回避
77+
2.6.0 以降、 `serverCacheKey` で明示的に `false` を返すことでコンポーネントはキャッシングを回避して新たに描画されるようになります。
78+
:::
79+
7680
### いつコンポーネントキャッシュを使うか
7781

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

0 commit comments

Comments
 (0)