API Reference
Server APIs

resume

resume pre-render செய்யப்பட்ட React tree-ஐ Readable Web Stream-க்கு stream செய்கிறது.

const stream = await resume(reactNode, postponedState, options?)

Note

இந்த API Web Streams-ஐ சார்ந்தது. Node.js-க்கு, அதன் பதிலாக resumeToNodeStream-ஐப் பயன்படுத்துங்கள்.

குறிப்பு

resume(node, postponedState, options?)

Pre-render செய்யப்பட்ட React tree-ஐ HTML ஆக Readable Web Stream-க்குள் render செய்வதை resume செய்ய resume-ஐ call செய்யுங்கள்.

import { resume } from 'react-dom/server';
import {getPostponedState} from './storage';

async function handler(request, writable) {
  const postponed = await getPostponedState(request);
  const resumeStream = await resume(<App />, postponed);
  return resumeStream.pipeTo(writable)
}

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

Parameters

  • reactNode: நீங்கள் prerender call செய்த React node. உதாரணமாக <App /> போன்ற JSX element. இது முழு document-ஐ represent செய்யும் என்று எதிர்பார்க்கப்படுகிறது; எனவே App component <html> tag-ஐ render செய்ய வேண்டும்.
  • postponedState: prerender API return செய்த opaque postpone object; நீங்கள் எங்கே store செய்திருந்தாலும் அங்கிருந்து load செய்யப்பட்டது (எ.கா. redis, file, அல்லது S3).
  • optional options: Streaming options கொண்ட object.

Returns

resume ஒரு Promise-ஐ return செய்கிறது:

  • resume வெற்றிகரமாக shell உருவாக்கினால், அந்த Promise Writable Web Stream-க்கு pipe செய்யக்கூடிய Readable Web Stream-க்கு resolve ஆகும்.
  • Shell-இல் error ஏற்பட்டால், Promise அந்த error உடன் reject ஆகும்.

Return செய்யப்பட்ட stream-க்கு கூடுதல் property ஒன்று உள்ளது:

  • allReady: எல்லா rendering-உம் முடிந்ததும் resolve ஆகும் Promise. Crawlers மற்றும் static generation-க்கு response return செய்வதற்கு முன் await stream.allReady செய்யலாம். அப்படிச் செய்தால் progressive loading கிடைக்காது. Stream final HTML-ஐ கொண்டிருக்கும்.

Caveats

  • bootstrapScripts, bootstrapScriptContent, அல்லது bootstrapModules options-ஐ resume ஏற்காது. அதற்கு பதிலாக, postponedState உருவாக்கும் prerender call-க்கு இந்த options-ஐ pass செய்ய வேண்டும். Bootstrap content-ஐ writable stream-க்குள் manual-ஆக inject செய்யவும் முடியும்.
  • Prefix prerender மற்றும் resume இரண்டிலும் ஒன்றாக இருக்க வேண்டியதால், resume identifierPrefix-ஐ ஏற்காது.
  • nonce prerender-க்கு வழங்க முடியாததால், prerender-க்கு scripts வழங்கவில்லை என்றால் மட்டுமே resume-க்கு nonce வழங்க வேண்டும்.
  • முழுமையாக pre-render செய்யப்படாத component கிடைக்கும் வரை root-இலிருந்து resume re-render செய்கிறது. முழுமையாக prerender செய்யப்பட்ட Components மட்டும் (Component மற்றும் அதன் children prerendering முடித்தவை) முழுவதுமாக skip செய்யப்படும்.

பயன்பாடு

Prerender-ஐ resume செய்தல் 

import {
  flushReadableStreamToFrame,
  getUser,
  Postponed,
  sleep,
} from "./demo-helpers";
import { StrictMode, Suspense, use, useEffect } from "react";
import { prerender } from "react-dom/static";
import { resume } from "react-dom/server";
import { hydrateRoot } from "react-dom/client";

function Header() {
  return <header>Me and my descendants can be prerendered</header>;
}

const { promise: cookies, resolve: resolveCookies } = Promise.withResolvers();

function Main() {
  const { sessionID } = use(cookies);
  const user = getUser(sessionID);

  useEffect(() => {
    console.log("reached interactivity!");
  }, []);

  return (
    <main>
      Hello, {user.name}!
      <button onClick={() => console.log("hydrated!")}>
        Clicking me requires hydration.
      </button>
    </main>
  );
}

function Shell({ children }) {
  // In a real app, this is where you would put your html and body.
  // We're just using tags here we can include in an existing body for demonstration purposes
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

function App() {
  return (
    <Shell>
      <Suspense fallback="loading header">
        <Header />
      </Suspense>
      <Suspense fallback="loading main">
        <Main />
      </Suspense>
    </Shell>
  );
}

async function main(frame) {
  // Layer 1
  const controller = new AbortController();
  const prerenderedApp = prerender(<App />, {
    signal: controller.signal,
    onError(error) {
      if (error instanceof Postponed) {
      } else {
        console.error(error);
      }
    },
  });
  // We're immediately aborting in a macrotask.
  // Any data fetching that's not available synchronously, or in a microtask, will not have finished.
  setTimeout(() => {
    controller.abort(new Postponed());
  });

  const { prelude, postponed } = await prerenderedApp;
  await flushReadableStreamToFrame(prelude, frame);

  // Layer 2
  // Just waiting here for demonstration purposes.
  // In a real app, the prelude and postponed state would've been serialized in Layer 1 and Layer would deserialize them.
  // The prelude content could be flushed immediated as plain HTML while
  // React is continuing to render from where the prerender left off.
  await sleep(2000);

  // You would get the cookies from the incoming HTTP request
  resolveCookies({ sessionID: "abc" });

  const stream = await resume(<App />, postponed);

  await flushReadableStreamToFrame(stream, frame);

  // Layer 3
  // Just waiting here for demonstration purposes.
  await sleep(2000);

  hydrateRoot(frame.contentWindow.document, <App />);
}

main(document.getElementById("container"));

மேலும் படிக்க

Resuming renderToReadableStream போல செயல்படுகிறது. மேலும் உதாரணங்களுக்கு, renderToReadableStream-ன் usage section-ஐப் பார்க்கவும். prerender-ஐ குறிப்பாக எப்படி பயன்படுத்துவது என்பதற்கான உதாரணங்கள் prerender-ன் usage section-இல் உள்ளன.

PreviousrenderToString
NextresumeToPipeableStream