From e5926089df1410e3ea295682b86cf569bc4fcfff Mon Sep 17 00:00:00 2001 From: Jun Shindo <46585162+jay-es@users.noreply.github.com> Date: Sat, 11 Mar 2023 16:13:41 +0900 Subject: [PATCH] =?UTF-8?q?=E3=80=8CAPI=20>=20Advanced=20APIs=20>=20Server?= =?UTF-8?q?-Side=20Rendering=20API=E3=80=8D=E3=81=AE=E7=BF=BB=E8=A8=B3=20(?= =?UTF-8?q?#1245)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vitepress/config.ts | 2 +- src/api/application.md | 2 +- src/api/ssr.md | 90 +++++++++++----------- src/guide/reusability/custom-directives.md | 2 +- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 6ec503476..fb3e64730 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -409,7 +409,7 @@ export const sidebar: ThemeConfig['sidebar'] = { text: '高度な API', items: [ { text: 'レンダー関数', link: '/api/render-function' }, - { text: 'Server-Side Rendering', link: '/api/ssr' }, + { text: 'サーバーサイドレンダリング', link: '/api/ssr' }, { text: 'TypeScript ユーティリティー型', link: '/api/utility-types' }, { text: 'カスタムレンダラー', link: '/api/custom-renderer' } ] diff --git a/src/api/application.md b/src/api/application.md index d367c85d7..1a157be8b 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -462,7 +462,7 @@ Vue からの実行時警告に対して、カスタムハンドラーを割り - **詳細** - これは通常、マスタッシュ記法も使用するサーバサイドのフレームワークとの衝突を回避するために使用します。 + これは通常、マスタッシュ記法も使用するサーバーサイドのフレームワークとの衝突を回避するために使用します。 - **例** diff --git a/src/api/ssr.md b/src/api/ssr.md index 18a238195..3c695fd78 100644 --- a/src/api/ssr.md +++ b/src/api/ssr.md @@ -1,10 +1,10 @@ -# Server-Side Rendering API {#server-side-rendering-api} +# サーバーサイドレンダリング API {#server-side-rendering-api} ## renderToString() {#rendertostring} -- **Exported from `vue/server-renderer`** +- **`vue/server-renderer` からエクスポート** -- **Type** +- **型** ```ts function renderToString( @@ -13,7 +13,7 @@ ): Promise ``` -- **Example** +- **例** ```js import { createSSRApp } from 'vue' @@ -30,9 +30,9 @@ })() ``` - ### SSR Context {#ssr-context} + ### SSR コンテキスト {#ssr-context} - You can pass an optional context object, which can be used to record additional data during the render, for example [accessing content of Teleports](/guide/scaling-up/ssr#teleports): + 省略可能なコンテキストオブジェクトを渡すと、レンダリング中に追加データを記録するために使用できます。例えば、[テレポートのコンテンツにアクセスする](/guide/scaling-up/ssr#teleports)には: ```js const ctx = {} @@ -41,17 +41,17 @@ console.log(ctx.teleports) // { '#teleported': 'teleported content' } ``` - Most other SSR APIs on this page also optionally accept a context object. The context object can be accessed in component code via the [useSSRContext](#usessrcontext) helper. + このページにある他のほとんどの SSR API も、省略可能なコンテキストオブジェクトを受け付けます。[useSSRContext](#usessrcontext) ヘルパーを使うことで、コンポーネントコード内でコンテキストオブジェクトにアクセスできます。 -- **See also:** [Guide - Server-Side Rendering](/guide/scaling-up/ssr) +- **参照:** [ガイド - サーバーサイドレンダリング](/guide/scaling-up/ssr) ## renderToNodeStream() {#rendertonodestream} -Renders input as a [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_class_stream_readable). +入力を [Node.js Readable stream](https://nodejs.org/api/stream.html#stream_class_stream_readable) としてレンダリングします。 -- **Exported from `vue/server-renderer`** +- **`vue/server-renderer` からエクスポート** -- **Type** +- **型** ```ts function renderToNodeStream( @@ -60,24 +60,24 @@ Renders input as a [Node.js Readable stream](https://nodejs.org/api/stream.html# ): Readable ``` -- **Example** +- **例** ```js - // inside a Node.js http handler + // Node.js http handler の内部 renderToNodeStream(app).pipe(res) ``` :::tip Note - This method is not supported in the ESM build of `vue/server-renderer`, which is decoupled from Node.js environments. Use [`pipeToNodeWritable`](#pipetonodewritable) instead. + このメソッドは、Node.js 環境から切り離されている `vue/server-renderer` の ESM ビルドではサポートされていません。代わりに [`pipeToNodeWritable`](#pipetonodewritable) を使用してください。 ::: ## pipeToNodeWritable() {#pipetonodewritable} -Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) instance. +既存の [Node.js Writable stream](https://nodejs.org/api/stream.html#stream_writable_streams) インスタンスにパイプしてレンダリングします。 -- **Exported from `vue/server-renderer`** +- **`vue/server-renderer` からエクスポート** -- **Type** +- **型** ```ts function pipeToNodeWritable( @@ -87,20 +87,20 @@ Render and pipe to an existing [Node.js Writable stream](https://nodejs.org/api/ ): void ``` -- **Example** +- **例** ```js - // inside a Node.js http handler + // Node.js http handler の内部 pipeToNodeWritable(app, {}, res) ``` ## renderToWebStream() {#rendertowebstream} -Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). +入力を [Web ReadableStream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) としてレンダリングします。 -- **Exported from `vue/server-renderer`** +- **`vue/server-renderer` からエクスポート** -- **Type** +- **型** ```ts function renderToWebStream( @@ -109,24 +109,24 @@ Renders input as a [Web ReadableStream](https://developer.mozilla.org/en-US/docs ): ReadableStream ``` -- **Example** +- **例** ```js - // inside an environment with ReadableStream support + // ReadableStream がサポートされている環境の内部 return new Response(renderToWebStream(app)) ``` :::tip Note - In environments that do not expose `ReadableStream` constructor in the global scope, [`pipeToWebWritable()`](#pipetowebwritable) should be used instead. + グローバルスコープで `ReadableStream` コンストラクターを公開しない環境では、代わりに [`pipeToWebWritable()`](#pipetowebwritable) を使用する必要があります。 ::: ## pipeToWebWritable() {#pipetowebwritable} -Render and pipe to an existing [Web WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) instance. +既存の [Web WritableStream](https://developer.mozilla.org/en-US/docs/Web/API/WritableStream) インスタンスにパイプしてレンダリングします。 -- **Exported from `vue/server-renderer`** +- **`vue/server-renderer` からエクスポート** -- **Type** +- **型** ```ts function pipeToWebWritable( @@ -136,13 +136,13 @@ Render and pipe to an existing [Web WritableStream](https://developer.mozilla.or ): void ``` -- **Example** +- **例** - This is typically used in combination with [`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream): + これは通常、[`TransformStream`](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream) と組み合わせて使用されます: ```js - // TransformStream is available in environments such as CloudFlare workers. - // in Node.js, TransformStream needs to be explicitly imported from 'stream/web' + // TransformStream は、CloudFlare のワーカーなどの環境で利用できます。 + // Node.js では、'stream/web' から明示的にインポートする必要があります const { readable, writable } = new TransformStream() pipeToWebWritable(app, {}, writable) @@ -151,11 +151,11 @@ Render and pipe to an existing [Web WritableStream](https://developer.mozilla.or ## renderToSimpleStream() {#rendertosimplestream} -Renders input in streaming mode using a simple readable interface. +シンプルで読みやすいインターフェイスを使用して、ストリーミングモードで入力をレンダリングします。 -- **Exported from `vue/server-renderer`** +- **`vue/server-renderer` からエクスポート** -- **Type** +- **型** ```ts function renderToSimpleStream( @@ -170,7 +170,7 @@ Renders input in streaming mode using a simple readable interface. } ``` -- **Example** +- **例** ```js let res = '' @@ -181,14 +181,14 @@ Renders input in streaming mode using a simple readable interface. { push(chunk) { if (chunk === null) { - // done + // 完了 console(`render complete: ${res}`) } else { res += chunk } }, destroy(err) { - // error encountered + // エラーが発生 } } ) @@ -196,27 +196,27 @@ Renders input in streaming mode using a simple readable interface. ## useSSRContext() {#usessrcontext} -A runtime API used to retrieve the context object passed to `renderToString()` or other server render APIs. +`renderToString()` やその他のサーバー レンダリング API に渡されるコンテキストオブジェクトを取得するために使用するランタイム API。 -- **Type** +- **型** ```ts function useSSRContext>(): T | undefined ``` -- **Example** +- **例** - The retrieved context can be used to attach information that is needed for rendering the final HTML (e.g. head metadata). + 取得したコンテキストを使用して、最終的な HTML をレンダリングするために必要な情報（ヘッドメタデータなど）を添付できます。 ```vue ``` diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md index dbeeee6ae..580f63d4c 100644 --- a/src/guide/reusability/custom-directives.md +++ b/src/guide/reusability/custom-directives.md @@ -100,7 +100,7 @@ app.directive('focus', { ``` :::tip -カスタムディレクティブは DOM を直接操作することでしか必要な機能を実現できない場合にのみ使用してください。`v-bind` のような組み込みディレクティブを使用した宣言的なテンプレートは、効率的かつサーバレンダリングフレンドリーです。可能なかぎり組み込みディレクティブを使用することをおすすめします。 +カスタムディレクティブは DOM を直接操作することでしか必要な機能を実現できない場合にのみ使用してください。`v-bind` のような組み込みディレクティブを使用した宣言的なテンプレートは、効率的かつサーバーレンダリングフレンドリーです。可能なかぎり組み込みディレクティブを使用することをおすすめします。 ::: ## ディレクティブフック {#directive-hooks}