Server-Side Rendering API ​

renderToString() ​

• vue/server-renderer থেকে এক্সপোর্ট করা হয়েছে

• প্রকার

  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 ​

  আপনি একটি অপশনাল কন্টেক্সট অবজেক্ট পাস করতে পারেন, যা রেন্ডারের সময় অতিরিক্ত ডেটা রেকর্ড করতে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ টেলিপোর্টের কনটেন্ট অ্যাক্সেস করা:

  js

  const ctx = {}
  const html = await renderToString(app, ctx)
  
  console.log(ctx.teleports) // { '#teleported': 'teleported content' }

  এই পেইজের বেশিরভাগ অন্যান্য SSR APIগুলিও ঐচ্ছিকভাবে একটি কন্টেক্সট অবজেক্ট গ্রহণ করে। কন্টেক্সট অবজেক্টটি useSSRContext হেল্পার মাধ্যমে কম্পোনেন্ট কোডে অ্যাক্সেস করা যেতে পারে।

• আরো দেখুন Guide - Server-Side Rendering

renderToNodeStream() ​

একটি Node.js Readable stream হিসাবে ইনপুট রেন্ডার করে।

• vue/server-renderer থেকে এক্সপোর্ট করা হয়েছে

• প্রকার

  ts

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

• উদাহরন

  js

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

  নোট

  এই মেথডটি vue/server-renderer-এর ESM বিল্ডে সাপোর্টেড নয়, যা Node.js এনভারনমেন্ট থেকে ডিকপল করা হয়েছে। পরিবর্তে pipeToNodeWritable ব্যবহার করুন।

pipeToNodeWritable() ​

একটি বিদ্যমান Node.js Writable stream উদাহরণে রেন্ডার এবং পাইপ করুন।

• vue/server-renderer থেকে এক্সপোর্ট করার হয়েছে

• প্রকার

  ts

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

• উদাহরন

  js

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

renderToWebStream() ​

একটি Web ReadableStream হিসাবে ইনপুট রেন্ডার করে।

• vue/server-renderer থেকে এক্সপোর্ট করা হয়েছে

• প্রকার

  ts

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

• উদাহরন

  js

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

  নোট

  যে ইনভারনমেন্টগুলি গ্লোবাল স্কোপে ReadableStream কনস্ট্রাক্টরকে প্রকাশ করে না, সেখানে pipeToWebWritable() ব্যবহার করা উচিত।

pipeToWebWritable() ​

একটি বিদ্যমান Web WritableStream উদাহরণে রেন্ডার এবং পাইপ করুন।

• vue/server-renderer থেকে এক্সপোর্ট করা হয়েছে

• প্রকার

  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() ​

একটি সহজ রিডএ্যাবল ইন্টারফেস ব্যবহার করে স্ট্রিমিং মোডে ইনপুট রেন্ডার করে।

• vue/server-renderer থেকে এক্সপোর্ট করা হয়েছে

• প্রকার

  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() ​

একটি রানটাইম API যা renderToString() বা অন্যান্য সার্ভার রেন্ডার API-এ পাস করা কনটেক্স অবজেক্ট পুনরুদ্ধার করতে ব্যবহৃত হয়।

• প্রকার

  ts

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

• উদাহরন

  পুনরুদ্ধার করা কনটেক্সটি চূড়ান্ত HTML রেন্ডার করার জন্য প্রয়োজনীয় তথ্য সংযুক্ত করতে ব্যবহার করা যেতে পারে (যেমন হেড মেটাডেটা)।

  vue

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

data-allow-mismatch ​

একটি বিশেষ বৈশিষ্ট্য যা হাইড্রেশন অমিল সতর্কতা দমন করতে ব্যবহার করা যেতে পারে।

• Example

  html

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

  The value can limit the allowed mismatch to a specific type. Allowed values are:

  • text
  • children (only allows mismatch for direct children)
  • class
  • style
  • attribute

  If no value is provided, all types of mismatches will be allowed.