React Academy · บทเรียน

ไฮเดรชันแบบเลือกและ HTML แบบสตรีม

ใช้ขอบเขต Suspense เพื่อสตรีมส่วนย่อยของ HTML และทำไฮเดรชันเกาะโต้ตอบก่อน

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

ปัญหาของการไฮเดรตทั้งหน้า

SSR แบบดั้งเดิมจะไฮเดรตทั้งหน้าพร้อมกัน หากส่วนหนึ่งของหน้ามี JavaScript ขนาดใหญ่ (เช่น แผนที่หรือแผนภูมิ) ก็จะบล็อกการไฮเดรตส่วนที่เหลือ รวมถึงปุ่มโต้ตอบแบบง่ายด้วย

การสตรีม HTML ด้วย renderToPipeableStream

ส่วนติดต่อการสตรีมของ React 18 จะส่ง HTML เป็นส่วน ๆ โครงหน้าจะมาถึงทันที ส่วนขอบเขต Suspense จะเติมเนื้อหาเมื่อพร้อม ผู้ใช้จึงเห็นส่วนติดต่อได้ก่อนที่ข้อมูลทั้งหมดจะพร้อม

const { pipe } = renderToPipeableStream(<App />, {
  bootstrapScripts: ['/bundle.js'],
  onShellReady() {
    res.setHeader('content-type', 'text/html');
    pipe(res);
  },
  onError(error) {
    console.error(error);
  },
});

การทำงานของการสตรีมในทางปฏิบัติ

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

การไฮเดรตแบบเลือกเฉพาะส่วน

เมื่อใช้การสตรีม React 18 สามารถไฮเดรตคอมโพเนนต์แยกจากกันได้ หากผู้ใช้คลิกองค์ประกอบที่ยังไม่ได้ไฮเดรต React จะให้ความสำคัญกับการไฮเดรตคอมโพเนนต์นั้นก่อน แล้วจึงดำเนินการกับส่วนที่เหลือต่อ

ขอบเขตซัสเพนส์ในฐานะหน่วยการสตรีม

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

function App() {
  return (
    <Layout>
      {/* Streams first — no data needed */}
      <Header />
      <Suspense fallback={<ArticleSkeleton />}>
        {/* Streams when article data resolves */}
        <Article />
      </Suspense>
      <Suspense fallback={<CommentsSkeleton />}>
        {/* Streams independently from Article */}
        <Comments />
      </Suspense>
    </Layout>
  );
}

การสตรีมของ Next.js ด้วย loading.tsx

ในเราเตอร์แอปของ Next.js loading.tsx คือเนื้อหาสำรองของซัสเพนส์ เปลือกหน้าหรือเลย์เอาต์จะถูกสตรีมก่อน จากนั้นเนื้อหาหน้าจะถูกสตรีมเมื่อฟังก์ชันอะซิงก์ทำงานเสร็จและคืนผลลัพธ์

// app/blog/loading.tsx — shown while page.tsx data loads
export default function Loading() {
  return <ArticleSkeleton />;
}

// app/blog/page.tsx — fetches data, streams when ready
export default async function BlogPage() {
  const posts = await fetchPosts(); // data fetch happens server-side
  return <PostList posts={posts} />;
}

คอมโพเนนต์ฝั่งไคลเอ็นต์ภายในซัสเพนส์

คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ใช้ซัสเพนส์เพื่อสตรีมข้อมูล ส่วนคอมโพเนนต์ฝั่งไคลเอ็นต์ใช้ซัสเพนส์เพื่อโหลดแบบขี้เกียจ ทั้งสองแบบได้ประโยชน์จากไฮเดรชันแบบเลือกเฉพาะ

// Lazy-loaded client component — hydrates selectively
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

ไฮเดรชันตามลำดับความสำคัญ

หากผู้ใช้โต้ตอบกับคอมโพเนนต์ที่ยังไม่ได้ไฮเดรต เช่น การคลิก React 18 จะไฮเดรตคอมโพเนนต์นั้นแบบพร้อมกันก่อน แล้วจึงไฮเดรตส่วนอื่นของหน้าให้เสร็จ

onShellReady เทียบกับ onAllReady

onShellReady จะทำงานเมื่อเปลือกหน้า ซึ่งประกอบด้วยส่วนที่ไม่ได้ถูกระงับ พร้อมสำหรับการสตรีม ส่วน onAllReady จะทำงานเมื่อเรนเดอร์ทุกอย่างเสร็จแล้ว เหมาะสำหรับการสร้างแบบคงที่ หรือกรณีที่ต้องส่ง HTML ทั้งหมดในครั้งเดียว

// For streaming (progressive rendering):
onShellReady() { pipe(res); }

// For full HTML (e.g., static export, SEO bots):
onAllReady() { pipe(res); }

ตัวควบคุมการยกเลิก

ส่งสัญญาณของ AbortController เพื่อยกเลิก SSR สำหรับการเรนเดอร์ที่ช้า เช่น เมื่อเกินเวลารอ

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

const { pipe } = renderToPipeableStream(<App />, {
  signal: controller.signal,
  onShellReady() { pipe(res); },
});

clearTimeout(timeoutId);

การวัดผลกระทบของการสตรีม

ใช้ Lighthouse หรือ WebPageTest เพื่อวัดเวลาไปยังไบต์แรก (TTFB) และการแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) ก่อนและหลังเปิดใช้การสตรีม เพื่อคำนวณการปรับปรุงให้เห็นเป็นตัวเลข

ตรวจสอบความเข้าใจ

ในการไฮเดรชันแบบเลือกเฉพาะของ React 18 จะเกิดอะไรขึ้นเมื่อผู้ใช้คลิกองค์ประกอบที่ยังไม่ได้ไฮเดรต

สรุปทบทวน

SSR แบบสตรีมใช้ renderToPipeableStream และขอบเขตซัสเพนส์เพื่อทยอยส่ง HTML ออกไป ขอบเขตซัสเพนส์แต่ละแห่งสตรีมได้อย่างอิสระ การไฮเดรตแบบเลือกเฉพาะจะให้ความสำคัญกับองค์ประกอบที่ผู้ใช้โต้ตอบด้วย ใน Next.js loading.tsx คือเนื้อหาสำรองของซัสเพนส์โดยอัตโนมัติสำหรับการสตรีมระดับหน้า

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

บทเรียน “ไฮเดรชันแบบเลือกและ HTML แบบสตรีม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ไฮเดรชันแบบเลือกและ HTML แบบสตรีม”

ใช้ขอบเขต Suspense เพื่อสตรีมส่วนย่อยของ HTML และทำไฮเดรชันเกาะโต้ตอบก่อน คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ไฮเดรชันแบบเลือกและ HTML แบบสตรีม” ใช้เวลานานแค่ไหน

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

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

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

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

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