renderToPipeableStream

ใช้สำหรับ render React elements เป็น HTML stream สำหรับ Node.js environments

import { renderToPipeableStream } from 'react-dom/server';

const { pipe, abort } = renderToPipeableStream(<App />, {
  onShellReady() {
    // Stream เริ่มต้นพร้อมสำหรับการเขียน
    res.statusCode = 200;
    res.setHeader('Content-type', 'text/html');
    pipe(res);
  },
  onAllReady() {
    // เนื้อหาทั้งหมดพร้อมแล้ว
  },
  onError(error) {
    // จัดการกับข้อผิดพลาด
  }
});

renderToReadableStream

ใช้สำหรับ render React elements เป็น HTML stream สำหรับ web stream APIs

import { renderToReadableStream } from 'react-dom/server';

async function handler(request) {
  const stream = await renderToReadableStream(<App />, {
    bootstrapScripts: ['/client.js']
  });
  return new Response(stream, {
    headers: { 'content-type': 'text/html' },
  });
}

renderToStaticMarkup

ใช้สำหรับ render React elements เป็น HTML string โดยไม่มี extra DOM attributes ที่ React ใช้ภายใน

import { renderToStaticMarkup } from 'react-dom/server';

const markup = renderToStaticMarkup(<App />);

renderToStaticNodeStream

คล้ายกับ renderToStaticMarkup แต่ return เป็น Readable stream

import { renderToStaticNodeStream } from 'react-dom/server';

const stream = renderToStaticNodeStream(<App />);
stream.pipe(res);

renderToString

ใช้สำหรับ render React elements เป็น HTML string

import { renderToString } from 'react-dom/server';

const html = renderToString(<App />);

เพิ่มเติมเกี่ยวกับ API เหล่านี้:

1. renderToPipeableStream และ renderToReadableStream เป็น API ใหม่ที่แนะนำให้ใช้สำหรับ server-side rendering ใน React 18+

2. renderToStaticMarkup และ renderToStaticNodeStream เหมาะสำหรับการสร้าง static sites ที่ไม่ต้องการ interactivity บนฝั่ง client

3. renderToString ยังคงมีประโยชน์สำหรับการทำ server-side rendering ในบางกรณี แต่ไม่รองรับ Suspense และ streaming

4. Stream-based APIs (renderToPipeableStream, renderToReadableStream, renderToStaticNodeStream) มีประโยชน์สำหรับการส่งข้อมูลเป็นชุดๆ ซึ่งช่วยลด Time to First Byte (TTFB) และเพิ่มประสิทธิภาพโดยรวม