API رندر سمت سرور
renderToString()
صادر شده از (exported from)
vue/server-renderer
تایپ (Type)
tsfunction renderToString( input: App | VNode, context?: SSRContext ): Promise<string>
مثال
jsimport { 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 میتوان به آبجکت زمینه در کد کامپوننت دسترسی داشت.
- همچنین ببینید راهنما - رندرینگ سمت سرور (SSR)
renderToNodeStream()
ورودی را بهصورت جریان قابل خواندن Node.js رندر میکند.
صادر شده از (exported from)
vue/server-renderer
تایپ (Type)
tsfunction 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)
tsfunction 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)
tsfunction 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)
tsfunction 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)
tsfunction renderToSimpleStream( input: App | VNode, context: SSRContext, options: SimpleReadable ): SimpleReadable interface SimpleReadable { push(content: string | null): void destroy(err: any): void }
مثال
jslet 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)
tsfunction 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
اگر هیچ مقداری ارائه نشود، تمام انواع عدم تطابقها مجاز خواهند بود.