Vue Academy · บทเรียน

SSR แบบสตรีมด้วย renderToWebStream

renderToWebStream() เทียบกับ renderToString() การสตรีม HTTP การปรับปรุง TTFB และการส่งชังก์

SSR แบบสตรีมด้วย renderToWebStream เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

จาก renderToString สู่การสตรีม

SSR แบบคลาสสิกใช้ renderToString ซึ่งสร้าง HTML ทั้งหมดไว้ในหน่วยความจำก่อนส่งไบต์แรก เบราว์เซอร์จะรอโดยไม่ทำอะไรจนกว่าทั้งหน้าจะพร้อม

SSR แบบสตรีมจะส่ง HTML เป็นชังก์ขณะที่แอปกำลังเรนเดอร์ ทำให้เบราว์เซอร์เริ่มแยกวิเคราะห์ได้เร็วขึ้น

พื้นฐาน renderToWebStream

ตัวเรนเดอร์ฝั่งเซิร์ฟเวอร์ของ Vue มีฟังก์ชันสำหรับการสตรีม renderToWebStream คืนค่าเป็น ReadableStream (API ของสตรีมบนเว็บ) ส่วน renderToNodeStream/pipeToNodeWritable ใช้กับอินเทอร์เฟซสตรีมของโหนด

แต่ละชังก์จะถูกส่งออกทันทีที่ต้นไม้คอมโพเนนต์ดำเนินการเสร็จเป็นส่วน ๆ

import { renderToWebStream } from 'vue/server-renderer'
import { createSSRApp } from 'vue'
import App from './App.vue'

const app = createSSRApp(App)
const stream = renderToWebStream(app)

การส่งสตรีมไปยังการตอบกลับ HTTP

ในเซิร์ฟเวอร์โหนด คุณจะส่งสตรีมเข้าไปในการตอบกลับ ด้วย pipeToNodeWritable คุณสามารถเขียนลงในส่วนที่เขียนได้ res โดยตรง และส่งชังก์ออกไปขณะที่ชังก์เหล่านั้นถูกสร้างขึ้น

import { pipeToNodeWritable } from 'vue/server-renderer'

server.get('*', (req, res) => {
  const app = createSSRApp(App)
  res.write('<!DOCTYPE html><html><body><div id="app">')
  pipeToNodeWritable(app, {}, res)
})

การสตรีมในรันไทม์เว็บ/เอดจ์

ในรันไทม์เอดจ์ (Workers, Deno และ Bun) คุณจะคืนค่า Response ที่สร้างจากสตรีมบนเว็บโดยตรง โดยไม่เกี่ยวข้องกับสตรีมของโหนด

import { renderToWebStream } from 'vue/server-renderer'

export default async function handler(request) {
  const app = createSSRApp(App)
  const stream = renderToWebStream(app)
  return new Response(stream, {
    headers: { 'Content-Type': 'text/html' }
  })
}

ชังก์เดินทางไปถึงเบราว์เซอร์ได้อย่างไร

ขณะที่ Vue เรนเดอร์โหนด ระบบจะผลักสตริง HTML ที่ทำให้เป็นอนุกรมแล้วเข้าไปในสตรีม ชั้น HTTP จะส่งไบต์เหล่านั้นออกทันที ตัวแยกวิเคราะห์ HTML แบบเพิ่มทีละส่วนของเบราว์เซอร์จะแสดงเนื้อหาที่มองเห็นได้ก่อนการตอบกลับจะเสร็จสมบูรณ์

นี่คือเหตุผลที่ผู้ใช้เห็นส่วนหัวและเค้าโครงขณะที่เนื้อหาหลักของหน้ายังอยู่ระหว่างการสตรีม

TTFB: เมตริกสำคัญ

TTFB (เวลาจนถึงไบต์แรก) ใช้วัดระยะเวลาจนกว่าไบต์แรกของการตอบกลับจะมาถึง

เมื่อใช้ renderToString ค่า TTFB จะรวมเวลาเรนเดอร์ทั้งหมด ส่วนการสตรีมจะส่งชังก์แรกออกจากเซิร์ฟเวอร์เกือบจะทันที ทำให้ TTFB ลดลงอย่างมากและช่วยเพิ่มความเร็วที่ผู้ใช้รับรู้

// renderToString: client waits for full HTML
const html = await renderToString(app) // blocks
res.end(fullPage(html))

// streaming: first bytes flush right away
pipeToNodeWritable(app, {}, res) // non-blocking chunks

การครอบสตรีมด้วย HTML ของเค้าโครง

โดยทั่วไปคุณต้องส่งโครงเอกสาร (<head> และแท็กเปิด) ก่อนสตรีมของแอป แล้วส่งแท็กปิดตามหลัง ให้เขียนคำนำหน้า ส่งแอปผ่านสตรีม จากนั้นเขียนคำต่อท้ายเมื่อสตรีมสิ้นสุด

res.write('<!DOCTYPE html><head><title>App</title></head>')
res.write('<body><div id="app">')

pipeToNodeWritable(app, ctx, {
  write: (chunk) => res.write(chunk),
  end: () => res.end('</div></body></html>')
})

การจัดการข้อผิดพลาดระหว่างสตรีม

เมื่อส่งไบต์ออกไปแล้ว คุณจะเปลี่ยนรหัสสถานะ HTTP ไม่ได้ ให้จัดการข้อผิดพลาดในการเรนเดอร์ผ่านตัวเลือก onError (หรือเส้นทางข้อผิดพลาดของส่วนที่เขียนได้) สำหรับความล้มเหลวสำคัญที่ตรวจพบตั้งแต่เนิ่น ๆ ควรใช้การเรนเดอร์แบบไม่สตรีม เพื่อให้ยังสามารถส่งสถานะ 500 ได้

pipeToNodeWritable(app, ctx, {
  write: (c) => res.write(c),
  end: () => res.end(suffix),
  destroy: (err) => {
    console.error('Stream failed:', err)
    res.end() // status already sent
  }
})

การไฮเดรตหลังการสตรีม

HTML ที่สตรีมมายังคงถูกไฮเดรตบนไคลเอ็นต์ด้วย createSSRApp().mount() Vue จะผูกตัวรับฟังเหตุการณ์เข้ากับ DOM ที่มีอยู่แทนการสร้าง DOM ใหม่ การสตรีมมีผลเฉพาะวิธีส่งมาร์กอัปเท่านั้น ไม่ได้เปลี่ยนวิธีการไฮเดรต

// client entry
import { createSSRApp } from 'vue'
import App from './App.vue'

createSSRApp(App).mount('#app') // hydrates streamed markup

การสตรีมกับข้อมูลแบบอะซิงโครนัส

สำหรับคอมโพเนนต์ที่ขึ้นกับข้อมูล ให้ดำเนินการข้อมูลสำคัญให้เสร็จก่อนหรือระหว่างการสตรีม การสตรีมเหมาะอย่างยิ่งเมื่อส่วนต่าง ๆ ของต้นไม้ไม่ขึ้นต่อกัน: โครงเอกสารจะถูกสตรีมทันที ขณะที่ส่วนที่ช้ากว่าจะเรนเดอร์เมื่อข้อมูลของส่วนนั้นเสร็จสมบูรณ์

// fetch critical data, then stream the rest
const app = createSSRApp(App, { initialData })
const stream = renderToWebStream(app)
return new Response(stream, {
  headers: { 'Content-Type': 'text/html' }
})

เมื่อใดควรเลือกการสตรีม

ใช้การสตรีมกับหน้าที่มีเนื้อหามาก ซึ่ง TTFB และความเร็วที่ผู้ใช้รับรู้มีความสำคัญ และคุณสามารถส่งโครงเอกสารที่เสถียรได้ก่อน ส่วนหน้าขนาดเล็กหรือกรณีที่ต้องควบคุมรหัสสถานะและส่วนหัวสุดท้ายอย่างเต็มที่ ให้ใช้ renderToString ต่อไป

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับ SSR แบบสตรีม

สรุปทบทวน

คุณได้เรียนรู้เกี่ยวกับ SSR แบบสตรีม:

renderToWebStream คืนค่าเป็น ReadableStream ส่วนโหนดใช้ pipeToNodeWritable
ชังก์จะถูกส่งออกขณะที่ต้นไม้กำลังเรนเดอร์ ดังนั้นเบราว์เซอร์จึงแยกวิเคราะห์เพิ่มทีละส่วน
วิธีนี้ลดค่า TTFB เมื่อเทียบกับ renderToString แบบบล็อกการทำงาน
เขียนโครงเอกสารครอบสตรีมไว้ โดยข้อผิดพลาดหลังการส่งออกครั้งแรกจะไม่สามารถเปลี่ยนสถานะได้
การไฮเดรตด้วย createSSRApp().mount() ยังคงเหมือนเดิม

คำถามที่พบบ่อย

บทเรียน “SSR แบบสตรีมด้วย renderToWebStream” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “SSR แบบสตรีมด้วย renderToWebStream” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “SSR แบบสตรีมด้วย renderToWebStream”

renderToWebStream() เทียบกับ renderToString() การสตรีม HTTP การปรับปรุง TTFB และการส่งชังก์ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “SSR แบบสตรีมด้วย renderToWebStream” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

คอมโพเนนต์ Vue Suspense
คอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent
SSR แบบสตรีมด้วย renderToWebStream
กลยุทธ์การไฮเดรตแบบเลื่อนเวลา

← กลับไปที่ Vue Academy