Skip to content

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'

// فراخوانی کنید SSR مطمئن شوید که این تابع را فقط در زمان
// https://vitejs.dev/guide/ssr.html#conditional-logic
if (import.meta.env.SSR) {
  const ctx = useSSRContext()
  // ...خواص مورد نیاز را به کانتکست اضافه کنید
}
</script>

data-allow-mismatch

یک اتریبیوت خاص که می‌تواند برای جلوگیری از هشدارهای hydration mismatch استفاده شود.

  • مثال

    html
    <div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>

    مقدار این اتریبیوت می‌تواند عدم تطابق مجاز را به یک تایپ خاص محدود کند. مقادیر مجاز عبارتند از:

    • text
    • children (فقط عدم تطابق برای فرزندان مستقیم مجاز است)
    • class
    • style
    • attribute

    اگر هیچ مقداری ارائه نشود، تمام انواع عدم تطابق‌ها مجاز خواهند بود.

API رندر سمت سرور has loaded