Vue.js

ظاهر

در این صفحه

API رندر سمت سرور ​

renderToString() ​

  • صادر شده از (exported from) vue/server-renderer

  • تایپ (Type)

    ts
    function renderToString(
  input: App | VNode,
  context?: SSRContext
): Promise<string>

  • مثال

    js
    import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`
})

;(async () => {
  const html = await renderToString(app)
  console.log(html)
})()

    زمینه‌ی رندر سمت سرور (SSR Context) ​

شما می‌توانید یک آبجکت زمینه‌ی(SSR Context) اختیاری ارسال کنید که می‌تواند برای ضبط داده‌های اضافی در طول رندر استفاده شود، به عنوان مثال دسترسی به محتوای تله‌پورت‌ها:

js
const ctx = {}
const html = await renderToString(app, ctx)

console.log(ctx.teleports) // { '#teleported': 'teleported content' }

اکثر دیگر API های SSR در این صفحه نیز به صورت اختیاری یک آبجکت زمینه را می‌پذیرند. از طریق راهنما useSSRContext می‌توان به آبجکت زمینه در کد کامپوننت دسترسی داشت.

renderToNodeStream() ​

ورودی را به‌صورت جریان قابل خواندن Node.js رندر می‌کند.

  • صادر شده از (exported from) vue/server-renderer

  • تایپ (Type)

    ts
    function renderToNodeStream(
  input: App | VNode,
  context?: SSRContext
): Readable

  • مثال

    js
    // inside a Node.js http handler
renderToNodeStream(app).pipe(res)

    نکته

    این روش در بیلد ماژول‌های ECMAScript که از محیط‌های Node.js جدا می‌شود، پشتیبانی نمی‌شود. به جای آن از pipeToNodeWritable استفاده کنید.

pipeToNodeWritable() ​

رندر کنید و به یک نمونه (instance) موجود Node.js Writable stream ارسال کنید.

  • صادر شده از (exported from) vue/server-renderer

  • تایپ (Type)

    ts
    function pipeToNodeWritable(
  input: App | VNode,
  context: SSRContext = {},
  writable: Writable
): void

  • مثال

    js
    // inside a Node.js http handler
pipeToNodeWritable(app, {}, res)

renderToWebStream() ​

ورودی را به صورت Web ReadableStream رندر می‌کند.

  • صادر شده از (exported from) vue/server-renderer

  • تایپ (Type)

    ts
    function renderToWebStream(
  input: App | VNode,
  context?: SSRContext
): ReadableStream

  • مثال

    js
    // inside an environment with ReadableStream support
return new Response(renderToWebStream(app))

    Note

    در محیط‌هایی که تابع سازنده ReadableStream را در اسکوپ سراسری نشان نمی‌دهند، باید به جای آن از pipeToWebWritable() استفاده شود.

pipeToWebWritable() ​

رندر کنید و به یک نمونه (instance) موجود Web WritableStream منتقل کنید.

  • صادر شده از (exported from) vue/server-renderer

  • تایپ (Type)

    ts
    function pipeToWebWritable(
  input: App | VNode,
  context: SSRContext = {},
  writable: WritableStream
): void

  • مثال

    این معمولاً در ترکیب با TransformStream استفاده می‌شود:

    js
    // TransformStream is available in environments such as CloudFlare workers.
// in Node.js, TransformStream needs to be explicitly imported from 'stream/web'
const { readable, writable } = new TransformStream()
pipeToWebWritable(app, {}, writable)

return new Response(readable)

renderToSimpleStream() ​

ورودی را در حالت استریم با استفاده از یک رابط (interface) خوانا ساده رندر می‌کند.

  • صادر شده از (exported from) vue/server-renderer

  • تایپ (Type)

    ts
    function renderToSimpleStream(
  input: App | VNode,
  context: SSRContext,
  options: SimpleReadable
): SimpleReadable

interface SimpleReadable {
  push(content: string | null): void
  destroy(err: any): void
}

  • مثال

    js
    let res = ''

renderToSimpleStream(
  app,
  {},
  {
    push(chunk) {
      if (chunk === null) {
        // done
        console(`render complete: ${res}`)
      } else {
        res += chunk
      }
    },
    destroy(err) {
      // error encountered
    }
  }
)

useSSRContext() ​

یک runtime API برای بازیابی آبجکت زمینه ارسال شده به renderToString() یا دیگر APIهای رندر سرور استفاده می‌شود.

  • تایپ (Type)

    ts
    function useSSRContext<T = Record<string, any>>(): T | undefined

  • مثال

زمینه بازیابی شده را می‌توان برای پیوست کردن اطلاعاتی که برای رندر کردن HTML نهایی مورد نیاز است (مانند متادیتای head) استفاده کرد.

vue
<script setup>
import { useSSRContext } from 'vue'

// make sure to only call it during SSR
// https://vitejs.dev/guide/ssr.html#conditional-logic
if (import.meta.env.SSR) {
  const ctx = useSSRContext()
  // ...attach properties to the context
}
</script>

اصلاح ترجمه این صفحه در گیت‌هاب