-
Notifications
You must be signed in to change notification settings - Fork 238
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
update ja docs #228
Changes from 2 commits
aeb8b64
2587474
e77c2ec
dca2c03
0b6bfaf
ad862f4
9ea4000
b75e237
8b13784
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -82,6 +82,12 @@ bundleRenderer.renderToStream([context]): stream.Readable | |
|
||
### template | ||
|
||
- **型:** | ||
- `string` | ||
- `string | (() => string | Promise<string>)` (2.6 から) | ||
|
||
**文字列テンプレートを使用している場合:** | ||
|
||
ページ全体の HTML を表すテンプレートを設定します。描画されたアプリケーションの内容を指し示すプレースホルダの代わりになるコメント文 `<!--vue-ssr-outlet-->` をテンプレートには含むべきです。 | ||
|
||
テンプレートは、次の構文を使用した簡単な補間もサポートします。 | ||
|
@@ -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 文字列、そしてテンプレート描画プロセスにおける可能性としてある非同期な操作を利用できます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
potential async operations なので、"可能性" は "非同期な操作" にかかっていますが、この訳文だと少しそれが見えづらいように思います。 |
||
|
||
関数は 2 つの引数を受け取ります: | ||
|
||
1. 文字列としてアプリケーションコンポーネントの描画結果 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. アプリケーションコンポーネントの描画結果の文字列 |
||
2. コンテキストオブジェクトの描画 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 に含まれるものを完全に制御できますが、全てあなた自身で含める責任があります (例えば、バンドルレンダラを使用する場合、アセットリンク)。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
直訳だとこうなのですが、この文脈だと違和感があるので必要がありますにするのはどうですか? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
突然文章が終わった印象を受けてしまうので、"〜使用する場合のアセットリンク" みたいにするのはどうでしょうか? |
||
|
||
参照: | ||
|
||
- [ページテンプレートの使用](../guide/#using-a-page-template) | ||
|
@@ -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 で新規 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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) です。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
## サーバのみのコンポーネントオプション | ||
|
||
### serverCacheKey | ||
|
||
- **型:** `(props) => any` | ||
|
||
受信プロパティ(incoming props) に基づくコンポーネントのために、キャッシュキーを返します。`this` にアクセスできません。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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` 経由でコンポーネントインスタンスにアクセスします。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
should なので、"この関数は〜します" くらいでいいんじゃないですかねー。 |
||
|
||
詳細は[データのプリフェッチと状態](../guide/data.html)を参照してください。 | ||
|
||
## webpack プラグイン | ||
|
||
webpack プラグインは、スタンドアロンのファイルとして提供され、次の値を必要とします: | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
原文ではテンプレート文字列のことを言ってるように見えます。