1. Recall my rough guess on how React Server Component works internally

For what React Server Component is, please refer to my previous post. I also had a rough guess on how React Server Components work internally with a demo, here are the keypoints of my thoughts:

1. when building the components,
   • A component map is generated during building phase, so that React can tell whether a component is Client Component or Server Component
   • Server Component is replaced with a thin wrapper on ClientBase during bundling, which is responsible to communicate with server
2. When rendering React tree on server,
   • recursively renders all elements
     • replace Server Component with Placeholder that forces suspending, attach then callback to continue rendering the sub-tree
     • replace Client Component with LazyContainer
   • send down the result in chunks through streaming, each Server Component leads to a new chunk, identified by unique id
   • built-in components and symbols will be replaced with strings and revived on client.
3. On client,
   • ClientBase wrapper of Server Components request to server and receives the chunks.
   • upon each chunk, it tries to merge the chunks into one chunk progressively.
   • LazyContainer lazily renders Client Components, Placeholder forces suspense.

Obviously this is NOT the actual approach, I’m a noob software engineer. So let’s dig into the actual implementation of React Server Components today and see if I’m, at least, on the right direction.

2. A look at official demo code

From the official RSC demo, below is how React tree is rendered and streamed.

js
async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, "../build/react-client-manifest.json"),
    "utf8"
  );
  const moduleMap = JSON.parse(manifest);
  const { pipe } = renderToPipeableStream(
    React.createElement(ReactApp, props),
    moduleMap
  );
  pipe(res);
}

js
async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, "../build/react-client-manifest.json"),
    "utf8"
  );
  const moduleMap = JSON.parse(manifest);
  const { pipe } = renderToPipeableStream(
    React.createElement(ReactApp, props),
    moduleMap
  );
  pipe(res);
}

The syntax looks similar to what we did.

And on client is some code as below.

jsx
function Router() {
  const [cache, setCache] = useState(initialCache);
  const [location, setLocation] = useState({
    selectedId: null,
    isEditing: false,
    searchText: "",
  });
  const locationKey = JSON.stringify(location);
  let content = cache.get(locationKey);
  if (!content) {
    content = createFromFetch(
      fetch("/react?location=" + encodeURIComponent(locationKey))
    );
    cache.set(locationKey, content);
  }
  function navigate(nextLocation) {
    startTransition(() => {
      setLocation((loc) => ({
        ...loc,
        ...nextLocation
      }));
    });
  }
  return (
    <RouterContext.Provider >
      {use(content)}
    </RouterContext.Provider>
  );
}

jsx
function Router() {
  const [cache, setCache] = useState(initialCache);
  const [location, setLocation] = useState({
    selectedId: null,
    isEditing: false,
    searchText: "",
  });
  const locationKey = JSON.stringify(location);
  let content = cache.get(locationKey);
  if (!content) {
    content = createFromFetch(
      fetch("/react?location=" + encodeURIComponent(locationKey))
    );
    cache.set(locationKey, content);
  }
  function navigate(nextLocation) {
    startTransition(() => {
      setLocation((loc) => ({
        ...loc,
        ...nextLocation
      }));
    });
  }
  return (
    <RouterContext.Provider >
      {use(content)}
    </RouterContext.Provider>
  );
}

What the code does is:

1. Based on the location, fetch the React tree rendered on server, and also cache them. So navigation is simply changing the location in state.
2. The response is not ready before fetched, use() is to help render Promise.

We’ll start by digging into these 3 functions as entrypoints.

1. server: renderToPipeableStream().
2. client: createFromFetch().
3. client: use().

3. renderToPipeableStream() renders React tree on server

This is the core of React Server Components, it renders the React tree and serialize the result. code

function renderToPipeableStream(
  model: ReactClientValue,
  webpackMap: ClientManifest,
  options?: Options
): PipeableStream {
  const request = createRequest(
This is the object to hold all the information,
e.g. model is the React tree. Just like the “Request” in Express.js
middlewares get info from Request and modify it so next middlewares can consume them.
    model,
    webpackMap,
    options ? options.onError : undefined,
    options ? options.context : undefined,
    options ? options.identifierPrefix : undefined
  );
  let hasStartedFlowing = false;
  startWork(request);
this seems to kick off the whole process
  return {
    pipe<T: Writable>(destination: T): T {
connects the internal data to output stream.
      if (hasStartedFlowing) {
        throw new Error(
          "React currently only supports piping to one writable stream."
        );
      }
      hasStartedFlowing = true;
      startFlowing(request, destination);
      destination.on("drain", createDrainHandler(destination, request));
      return destination;
    },
    abort(reason: mixed) {
      abort(request, reason);
    },
  };
}
function startFlowing(request: Request, destination: Destination): void {
  if (request.status === CLOSING) {
    request.status = CLOSED;
    closeWithError(destination, request.fatalError);
    return;
  }
  if (request.status === CLOSED) {
    return;
  }
  if (request.destination !== null) {
    // We're already flowing.
    return;
  }
  request.destination = destination;
  try {
    flushCompletedChunks(request, destination);
  } catch (error) {
    logRecoverableError(request, error);
    fatalError(request, error);
  }
}

function renderToPipeableStream(
  model: ReactClientValue,
  webpackMap: ClientManifest,
  options?: Options
): PipeableStream {
  const request = createRequest(
This is the object to hold all the information,
e.g. model is the React tree. Just like the “Request” in Express.js
middlewares get info from Request and modify it so next middlewares can consume them.
    model,
    webpackMap,
    options ? options.onError : undefined,
    options ? options.context : undefined,
    options ? options.identifierPrefix : undefined
  );
  let hasStartedFlowing = false;
  startWork(request);
this seems to kick off the whole process
  return {
    pipe<T: Writable>(destination: T): T {
connects the internal data to output stream.
      if (hasStartedFlowing) {
        throw new Error(
          "React currently only supports piping to one writable stream."
        );
      }
      hasStartedFlowing = true;
      startFlowing(request, destination);
      destination.on("drain", createDrainHandler(destination, request));
      return destination;
    },
    abort(reason: mixed) {
      abort(request, reason);
    },
  };
}
function startFlowing(request: Request, destination: Destination): void {
  if (request.status === CLOSING) {
    request.status = CLOSED;
    closeWithError(destination, request.fatalError);
    return;
  }
  if (request.status === CLOSED) {
    return;
  }
  if (request.destination !== null) {
    // We're already flowing.
    return;
  }
  request.destination = destination;
  try {
    flushCompletedChunks(request, destination);
  } catch (error) {
    logRecoverableError(request, error);
    fatalError(request, error);
  }
}

It is way more complex than renderServerComponent() in our attempted demo.

3.1 Request is the object to hold all the necessary info about the whole process

It is a bit like the context in our demo, which has a lot of fields.

const request: Request = {
  status: OPEN,
  fatalError: null,
  destination: null,
  bundlerConfig,
  cache: new Map(),
  nextChunkId: 0,
the incrementing unique id to label the chunks, like the context.id in our demo
  pendingChunks: 0,
a counter, like we have context.tasks in our demo
  abortableTasks: abortSet,
  pingedTasks: pingedTasks,
  completedImportChunks: ([]: Array<Chunk>),
This is to hold the rendered chunks,
unlike our demo which streams the response to client right away,
here it is only streamed after the destination is set in pipe(),
so needs to store the temporary data in Request
  completedJSONChunks: ([]: Array<Chunk>),
  completedErrorChunks: ([]: Array<Chunk>),
  writtenSymbols: new Map(),
  writtenClientReferences: new Map(),
  writtenServerReferences: new Map(),
  writtenProviders: new Map(),
  identifierPrefix: identifierPrefix || "",
  identifierCount: 1,
  onError: onError === undefined ? defaultErrorHandler : onError,
  // $FlowFixMe[missing-this-annot]
  toJSON: function (key: string, value: ReactClientValue): ReactJSONValue {
toJSON() is conceptually a bit like serialize() in our demo but way more complex
    return resolveModelToJSON(request, this, key, value);
  },
};

const request: Request = {
  status: OPEN,
  fatalError: null,
  destination: null,
  bundlerConfig,
  cache: new Map(),
  nextChunkId: 0,
the incrementing unique id to label the chunks, like the context.id in our demo
  pendingChunks: 0,
a counter, like we have context.tasks in our demo
  abortableTasks: abortSet,
  pingedTasks: pingedTasks,
  completedImportChunks: ([]: Array<Chunk>),
This is to hold the rendered chunks,
unlike our demo which streams the response to client right away,
here it is only streamed after the destination is set in pipe(),
so needs to store the temporary data in Request
  completedJSONChunks: ([]: Array<Chunk>),
  completedErrorChunks: ([]: Array<Chunk>),
  writtenSymbols: new Map(),
  writtenClientReferences: new Map(),
  writtenServerReferences: new Map(),
  writtenProviders: new Map(),
  identifierPrefix: identifierPrefix || "",
  identifierCount: 1,
  onError: onError === undefined ? defaultErrorHandler : onError,
  // $FlowFixMe[missing-this-annot]
  toJSON: function (key: string, value: ReactClientValue): ReactJSONValue {
toJSON() is conceptually a bit like serialize() in our demo but way more complex
    return resolveModelToJSON(request, this, key, value);
  },
};

3.2 startWork(request) kicks off the whole rendering process

js
function startWork(request: Request): void {
  if (supportsRequestStorage) {
    scheduleWork(() => requestStorage.run(request.cache, performWork, request));
  } else {
    scheduleWork(() => performWork(request));
  }
}
function scheduleWork(callback: () => void) {
  setImmediate(callback);
}

js
function startWork(request: Request): void {
  if (supportsRequestStorage) {
    scheduleWork(() => requestStorage.run(request.cache, performWork, request));
  } else {
    scheduleWork(() => performWork(request));
  }
}
function scheduleWork(callback: () => void) {
  setImmediate(callback);
}

We’ve mentioned setImmediate() before in How React Scheduler works, simply put, it is a better version of setTimeout(callback, 0).

Let’s skip the request storage part, performWork() seems to do what we want.

js
function performWork(request: Request): void {
  const prevDispatcher = ReactCurrentDispatcher.current;
  const prevCache = getCurrentCache();
  ReactCurrentDispatcher.current = HooksDispatcher;
  setCurrentCache(request.cache);
  prepareToUseHooksForRequest(request);
  try {
    const pingedTasks = request.pingedTasks;
    request.pingedTasks = [];
    for (let i = 0; i < pingedTasks.length; i++) {
      const task = pingedTasks[i];
      retryTask(request, task);
    }
    if (request.destination !== null) {
      flushCompletedChunks(request, request.destination);
    }
  } catch (error) {
    logRecoverableError(request, error);
    fatalError(request, error);
  } finally {
    ReactCurrentDispatcher.current = prevDispatcher;
    setCurrentCache(prevCache);
    resetHooksForRequest();
  }
}

js
function performWork(request: Request): void {
  const prevDispatcher = ReactCurrentDispatcher.current;
  const prevCache = getCurrentCache();
  ReactCurrentDispatcher.current = HooksDispatcher;
  setCurrentCache(request.cache);
  prepareToUseHooksForRequest(request);
  try {
    const pingedTasks = request.pingedTasks;
    request.pingedTasks = [];
    for (let i = 0; i < pingedTasks.length; i++) {
      const task = pingedTasks[i];
      retryTask(request, task);
    }
    if (request.destination !== null) {
      flushCompletedChunks(request, request.destination);
    }
  } catch (error) {
    logRecoverableError(request, error);
    fatalError(request, error);
  } finally {
    ReactCurrentDispatcher.current = prevDispatcher;
    setCurrentCache(prevCache);
    resetHooksForRequest();
  }
}

1. it tries to run all the tasks. notice the retryTask() is sync here.
2. then flushCompletedChunks() is called to send the response down to client.

Task is explained right after this.

3.3 pipe() connects the internal data to output stream

Similar to what we did with res.write(), flushCompletedChunks() internally use write() method.

function pipe<T: Writable>(destination: T): T {
  if (hasStartedFlowing) {
    throw new Error(
      'React currently only supports piping to one writable stream.',
    );
  }
  hasStartedFlowing = true;
  startFlowing(request, destination);
  destination.on('drain', createDrainHandler(destination, request));
  return destination;
},
export function startFlowing(request: Request, destination: Destination): void {
  if (request.status === CLOSING) {
    request.status = CLOSED;
    closeWithError(destination, request.fatalError);
    return;
  }
  if (request.status === CLOSED) {
    return;
  }
  if (request.destination !== null) {
    // We're already flowing.
    return;
  }
  request.destination = destination;
  try {
    flushCompletedChunks(request, destination);
  } catch (error) {
    logRecoverableError(request, error);
    fatalError(request, error);
  }
}
function writeToDestination(destination: Destination, view: Uint8Array) {
  const currentHasCapacity = destination.write(view);
write to stream
  destinationHasCapacity = destinationHasCapacity && currentHasCapacity;
}

function pipe<T: Writable>(destination: T): T {
  if (hasStartedFlowing) {
    throw new Error(
      'React currently only supports piping to one writable stream.',
    );
  }
  hasStartedFlowing = true;
  startFlowing(request, destination);
  destination.on('drain', createDrainHandler(destination, request));
  return destination;
},
export function startFlowing(request: Request, destination: Destination): void {
  if (request.status === CLOSING) {
    request.status = CLOSED;
    closeWithError(destination, request.fatalError);
    return;
  }
  if (request.status === CLOSED) {
    return;
  }
  if (request.destination !== null) {
    // We're already flowing.
    return;
  }
  request.destination = destination;
  try {
    flushCompletedChunks(request, destination);
  } catch (error) {
    logRecoverableError(request, error);
    fatalError(request, error);
  }
}
function writeToDestination(destination: Destination, view: Uint8Array) {
  const currentHasCapacity = destination.write(view);
write to stream
  destinationHasCapacity = destinationHasCapacity && currentHasCapacity;
}

3.4 one Task means one Chunk

From createTask(), we can see a Task is to generate a chunk, the id increments once used.

function createTask(
  request: Request,
  model: ReactClientValue,
  context: ContextSnapshot,
  abortSet: Set<Task>
): Task {
  const id = request.nextChunkId++;
self incrementing id to make sure it is unique
  const task: Task = {
    id,
    status: PENDING,
    model,
    context,
    ping: () => pingTask(request, task),
    thenableState: null,
  };
  abortSet.add(task);
  return task;
}

function createTask(
  request: Request,
  model: ReactClientValue,
  context: ContextSnapshot,
  abortSet: Set<Task>
): Task {
  const id = request.nextChunkId++;
self incrementing id to make sure it is unique
  const task: Task = {
    id,
    status: PENDING,
    model,
    context,
    ping: () => pingTask(request, task),
    thenableState: null,
  };
  abortSet.add(task);
  return task;
}

The initial chunk is already scheduled when Response is first created.

export function createRequest(
  model: ReactClientValue,
  bundlerConfig: ClientManifest,
  onError: void | ((error: mixed) => ?string),
  context?: Array<[string, ServerContextJSONValue]>,
  identifierPrefix?: string,
): Request {
  if (
    ReactCurrentCache.current !== null &&
    ReactCurrentCache.current !== DefaultCacheDispatcher
  ) {
    throw new Error(
      'Currently React only supports one RSC renderer at a time.',
    );
  }
  ReactCurrentCache.current = DefaultCacheDispatcher;
  const abortSet: Set<Task> = new Set();
  const pingedTasks: Array<Task> = [];
  const request: Request = {...}
  request.pendingChunks++;
  const rootContext = createRootContext(context);
  const rootTask = createTask(request, model, rootContext, abortSet);
rootTask is the root chunk
  pingedTasks.push(rootTask);
  return request;
}

export function createRequest(
  model: ReactClientValue,
  bundlerConfig: ClientManifest,
  onError: void | ((error: mixed) => ?string),
  context?: Array<[string, ServerContextJSONValue]>,
  identifierPrefix?: string,
): Request {
  if (
    ReactCurrentCache.current !== null &&
    ReactCurrentCache.current !== DefaultCacheDispatcher
  ) {
    throw new Error(
      'Currently React only supports one RSC renderer at a time.',
    );
  }
  ReactCurrentCache.current = DefaultCacheDispatcher;
  const abortSet: Set<Task> = new Set();
  const pingedTasks: Array<Task> = [];
  const request: Request = {...}
  request.pendingChunks++;
  const rootContext = createRootContext(context);
  const rootTask = createTask(request, model, rootContext, abortSet);
rootTask is the root chunk
  pingedTasks.push(rootTask);
  return request;
}

3.5 retryTask() - tries to get one chunk ready

The code is a wrapped in a big try...catch. Let’s first look at the try block.

function retryTask(request: Request, task: Task): void {
  if (task.status !== PENDING) {
    // We completed this by other means before we had a chance to retry it.
    return;
  }
  switchContext(task.context);
  try {
    let value = task.model;
    if (
      typeof value === "object" &&
      value !== null &&
      (value: any).$$typeof === REACT_ELEMENT_TYPE
it only process React Element($$typeof: REACT_ELEMENT_TYPE).
Obviously only React Element needs to be rendered(meaning runing the function)
    ) {
      // TODO: Concatenate keys of parents onto children.
      const element: React$Element<any> = (value: any);
      // When retrying a component, reuse the thenableState from the
      // previous attempt.
      const prevThenableState = task.thenableState;
      // Attempt to render the Server Component.
      // Doing this here lets us reuse this same task if the next component
      // also suspends.
      task.model = value;
      value = attemptResolveElement(
attemptResolveElement() is the actual method to render.
        request,
        element.type,
        element.key,
        element.ref,
        element.props,
        prevThenableState
      );
      // Successfully finished this component. We're going to keep rendering
      // using the same task, but we reset its thenable state before continuing.
      task.thenableState = null;
      // Keep rendering and reuse the same task. This inner loop is separate
      // from the render above because we don't need to reset the thenable state
      // until the next time something suspends and retries.
      while (
        typeof value === "object" &&
        value !== null &&
        (value: any).$$typeof === REACT_ELEMENT_TYPE
      ) {
it continues to render if the element tree is just a linked list(one child for each layer),
it looks like a micro improvement, because most of the time React trees are not this simple.
        // TODO: Concatenate keys of parents onto children.
        const nextElement: React$Element<any> = (value: any);
        task.model = value;
        value = attemptResolveElement(
          request,
          nextElement.type,
          nextElement.key,
          nextElement.ref,
          nextElement.props,
          null
        );
      }
    }
    const processedChunk = processModelChunk(request, task.id, value);
    request.completedJSONChunks.push(processedChunk);
processModelChunk() serializes the result and put it in completedJSONChunks,
and as mentioned before completedJSONChunks is actually processed in flushCompletedChunks()
    request.abortableTasks.delete(task);
    task.status = COMPLETED;
  } catch (thrownValue) {
    ...
  }
}

function retryTask(request: Request, task: Task): void {
  if (task.status !== PENDING) {
    // We completed this by other means before we had a chance to retry it.
    return;
  }
  switchContext(task.context);
  try {
    let value = task.model;
    if (
      typeof value === "object" &&
      value !== null &&
      (value: any).$$typeof === REACT_ELEMENT_TYPE
it only process React Element($$typeof: REACT_ELEMENT_TYPE).
Obviously only React Element needs to be rendered(meaning runing the function)
    ) {
      // TODO: Concatenate keys of parents onto children.
      const element: React$Element<any> = (value: any);
      // When retrying a component, reuse the thenableState from the
      // previous attempt.
      const prevThenableState = task.thenableState;
      // Attempt to render the Server Component.
      // Doing this here lets us reuse this same task if the next component
      // also suspends.
      task.model = value;
      value = attemptResolveElement(
attemptResolveElement() is the actual method to render.
        request,
        element.type,
        element.key,
        element.ref,
        element.props,
        prevThenableState
      );
      // Successfully finished this component. We're going to keep rendering
      // using the same task, but we reset its thenable state before continuing.
      task.thenableState = null;
      // Keep rendering and reuse the same task. This inner loop is separate
      // from the render above because we don't need to reset the thenable state
      // until the next time something suspends and retries.
      while (
        typeof value === "object" &&
        value !== null &&
        (value: any).$$typeof === REACT_ELEMENT_TYPE
      ) {
it continues to render if the element tree is just a linked list(one child for each layer),
it looks like a micro improvement, because most of the time React trees are not this simple.
        // TODO: Concatenate keys of parents onto children.
        const nextElement: React$Element<any> = (value: any);
        task.model = value;
        value = attemptResolveElement(
          request,
          nextElement.type,
          nextElement.key,
          nextElement.ref,
          nextElement.props,
          null
        );
      }
    }
    const processedChunk = processModelChunk(request, task.id, value);
    request.completedJSONChunks.push(processedChunk);
processModelChunk() serializes the result and put it in completedJSONChunks,
and as mentioned before completedJSONChunks is actually processed in flushCompletedChunks()
    request.abortableTasks.delete(task);
    task.status = COMPLETED;
  } catch (thrownValue) {
    ...
  }
}

Two things need to be pointed out.

1. We don’t see recursion here, attemptResolveElement() is called only for one layer (except the special case). The trick actually happens inside of serializing, we’ll come back at it soon.
2. flushCompletedChunks() is not here, rather it is outside of retryTask() to batch streaming multiple chunks. The rescheduling of the task is in the catch block, explained below.

} catch (thrownValue) {
  const x =
    thrownValue === SuspenseException
      ? // This is a special type of exception used for Suspense. For historical
        // reasons, the rest of the Suspense implementation expects the thrown
        // value to be a thenable, because before `use` existed that was the
        // (unstable) API for suspending. This implementation detail can change
        // later, once we deprecate the old API in favor of `use`.
        getSuspendedThenable()
      : thrownValue;
  // $FlowFixMe[method-unbinding]
  if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
--------------------
checks for thenable
    // Something suspended again, let's pick it back up later.
    const ping = task.ping;
    x.then(ping, ping);
    task.thenableState = getThenableStateAfterSuspending();
    return;
  } else {
    request.abortableTasks.delete(task);
    task.status = ERRORED;
    const digest = logRecoverableError(request, x);
    if (__DEV__) {
      const {message, stack} = getErrorMessageAndStackDev(x);
      emitErrorChunkDev(request, task.id, digest, message, stack);
    } else {
      emitErrorChunkProd(request, task.id, digest);
    }
  }
}

} catch (thrownValue) {
  const x =
    thrownValue === SuspenseException
      ? // This is a special type of exception used for Suspense. For historical
        // reasons, the rest of the Suspense implementation expects the thrown
        // value to be a thenable, because before `use` existed that was the
        // (unstable) API for suspending. This implementation detail can change
        // later, once we deprecate the old API in favor of `use`.
        getSuspendedThenable()
      : thrownValue;
  // $FlowFixMe[method-unbinding]
  if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
--------------------
checks for thenable
    // Something suspended again, let's pick it back up later.
    const ping = task.ping;
    x.then(ping, ping);
    task.thenableState = getThenableStateAfterSuspending();
    return;
  } else {
    request.abortableTasks.delete(task);
    task.status = ERRORED;
    const digest = logRecoverableError(request, x);
    if (__DEV__) {
      const {message, stack} = getErrorMessageAndStackDev(x);
      emitErrorChunkDev(request, task.id, digest, message, stack);
    } else {
      emitErrorChunkProd(request, task.id, digest);
    }
  }
}

We can see the check for thenable, it sets up a then callback to re-run the task. ping is set during createTask(), which is just scheduling to run the task again.

function pingTask(request: Request, task: Task): void {
  const pingedTasks = request.pingedTasks;
  pingedTasks.push(task);
  if (pingedTasks.length === 1) {
    scheduleWork(() => performWork(request));
Notice the task is not run directly,
but run from the root call of performWork(),
to make sure the flushCompletedChunks() is run as well.
  }
}

function pingTask(request: Request, task: Task): void {
  const pingedTasks = request.pingedTasks;
  pingedTasks.push(task);
  if (pingedTasks.length === 1) {
    scheduleWork(() => performWork(request));
Notice the task is not run directly,
but run from the root call of performWork(),
to make sure the flushCompletedChunks() is run as well.
  }
}

So the picture becomes clear now.

1. Request hold the tasks, which means the jobs to generate Chunks.
2. performWork() tries to run the tasks and flush the completed chunks.
3. In each task, if promise is thrown, it schedules performWork() to repeat the process again.

You might wonder: where do the new tasks get scheduled for server components? I only see tasks get re-run. Hang on, we’ll soon get the answer.

3.6 attemptResolveElement() process just one element, renders if necessary

Since it only processes one element, it is perfect for recursion. It is called resolve since we only need to render(run the function) function components.

The function is quite big, let’s break it down.

3.6.1 Server Component - wrapped in REACT_LAZY_TYPE

function attemptResolveElement(
  request: Request,
  type: any,
  key: null | React$Key,
  ref: mixed,
  props: any,
  prevThenableState: ThenableState | null
): ReactClientValue {
  if (typeof type === "function") {
    if (isClientReference(type)) {
      // This is a reference to a Client Component.
      return [REACT_ELEMENT_TYPE, type, key, props];
The array is a simplified form of the React element object notation,
to generate more compact serialization result,
without the repeated keys of: "$$typeof", "type" .etc.
    }
    // This is a server-side component.
    prepareToUseHooksForComponent(prevThenableState);
    const result = type(props);
    if (
      typeof result === "object" &&
      result !== null &&
      typeof result.then === "function"
    ) {
      // When the return value is in children position we can resolve it immediately,
      // to its value without a wrapper if it's synchronously available.
      const thenable: Thenable<any> = result;
      if (thenable.status === "fulfilled") {
        return thenable.value;
      }
      // TODO: Once we accept Promises as children on the client, we can just return
      // the thenable here.
      return createLazyWrapperAroundWakeable(result);
    }
    return result;
  } else ...

function attemptResolveElement(
  request: Request,
  type: any,
  key: null | React$Key,
  ref: mixed,
  props: any,
  prevThenableState: ThenableState | null
): ReactClientValue {
  if (typeof type === "function") {
    if (isClientReference(type)) {
      // This is a reference to a Client Component.
      return [REACT_ELEMENT_TYPE, type, key, props];
The array is a simplified form of the React element object notation,
to generate more compact serialization result,
without the repeated keys of: "$$typeof", "type" .etc.
    }
    // This is a server-side component.
    prepareToUseHooksForComponent(prevThenableState);
    const result = type(props);
    if (
      typeof result === "object" &&
      result !== null &&
      typeof result.then === "function"
    ) {
      // When the return value is in children position we can resolve it immediately,
      // to its value without a wrapper if it's synchronously available.
      const thenable: Thenable<any> = result;
      if (thenable.status === "fulfilled") {
        return thenable.value;
      }
      // TODO: Once we accept Promises as children on the client, we can just return
      // the thenable here.
      return createLazyWrapperAroundWakeable(result);
    }
    return result;
  } else ...

This is actually the branch of handling function components.

1. it checks if the component is client by isClientReference(). If it is , then return [REACT_ELEMENT_TYPE, type, key, props].
2. if it is Server Component, just run it and return the result.
   • if it returns a promise and not fulfilled, it createLazyWrapperAroundWakeable().

Let’s see what is the wrapper.

function createLazyWrapperAroundWakeable(wakeable: Wakeable) {
  // This is a temporary fork of the `use` implementation until we accept
  // promises everywhere.
  const thenable: Thenable<mixed> = (wakeable: any);
  switch (thenable.status) {
    case "fulfilled":
    case "rejected":
      break;
    default: {
      if (typeof thenable.status === "string") {
        // Only instrument the thenable if the status if not defined. If
        // it's defined, but an unknown value, assume it's been instrumented by
        // some custom userspace implementation. We treat it as "pending".
        break;
      }
      const pendingThenable: PendingThenable<mixed> = (thenable: any);
      pendingThenable.status = "pending";
      pendingThenable.then(
        (fulfilledValue) => {
          if (thenable.status === "pending") {
            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
            fulfilledThenable.status = "fulfilled";
            fulfilledThenable.value = fulfilledValue;
          }
        },
        (error: mixed) => {
          if (thenable.status === "pending") {
            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
            rejectedThenable.status = "rejected";
            rejectedThenable.reason = error;
          }
        }
      );
      break;
    }
  }
  const lazyType: LazyComponent<any, Thenable<any>> = {
    $$typeof: REACT_LAZY_TYPE,
    _payload: thenable,
    _init: readThenable,
  };
  return lazyType;
}
function readThenable<T>(thenable: Thenable<T>): T {
  if (thenable.status === "fulfilled") {
    return thenable.value;
  } else if (thenable.status === "rejected") {
    throw thenable.reason;
  }
  throw thenable;
it throws if thenable is not readdy
}

function createLazyWrapperAroundWakeable(wakeable: Wakeable) {
  // This is a temporary fork of the `use` implementation until we accept
  // promises everywhere.
  const thenable: Thenable<mixed> = (wakeable: any);
  switch (thenable.status) {
    case "fulfilled":
    case "rejected":
      break;
    default: {
      if (typeof thenable.status === "string") {
        // Only instrument the thenable if the status if not defined. If
        // it's defined, but an unknown value, assume it's been instrumented by
        // some custom userspace implementation. We treat it as "pending".
        break;
      }
      const pendingThenable: PendingThenable<mixed> = (thenable: any);
      pendingThenable.status = "pending";
      pendingThenable.then(
        (fulfilledValue) => {
          if (thenable.status === "pending") {
            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
            fulfilledThenable.status = "fulfilled";
            fulfilledThenable.value = fulfilledValue;
          }
        },
        (error: mixed) => {
          if (thenable.status === "pending") {
            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
            rejectedThenable.status = "rejected";
            rejectedThenable.reason = error;
          }
        }
      );
      break;
    }
  }
  const lazyType: LazyComponent<any, Thenable<any>> = {
    $$typeof: REACT_LAZY_TYPE,
    _payload: thenable,
    _init: readThenable,
  };
  return lazyType;
}
function readThenable<T>(thenable: Thenable<T>): T {
  if (thenable.status === "fulfilled") {
    return thenable.value;
  } else if (thenable.status === "rejected") {
    throw thenable.reason;
  }
  throw thenable;
it throws if thenable is not readdy
}

OK, so the wrapper is trying to set status and value directly on the promise, and it returns a REACT_LAZY_TYPE (React.lazy()). Notice that the _init is set to readThenable which throws if the thenable is not fulfilled. To understand it easier, let’s fast-forward and see how REACT_LAZY_TYPE is handled first.

Refer to section 3.9 to see how to tell if component is client or server

3.6.2 REACT_LAZY_TYPE - throws Promise if not ready

js
else if (type != null && typeof type === 'object') {
  switch (type.$$typeof) {
    case REACT_LAZY_TYPE: {
      const payload = type._payload;
      const init = type._init;
      const wrappedType = init(payload);
      return attemptResolveElement(
        request,
        wrappedType,
        key,
        ref,
        props,
        prevThenableState,
      );
    }
  }
}

js
else if (type != null && typeof type === 'object') {
  switch (type.$$typeof) {
    case REACT_LAZY_TYPE: {
      const payload = type._payload;
      const init = type._init;
      const wrappedType = init(payload);
      return attemptResolveElement(
        request,
        wrappedType,
        key,
        ref,
        props,
        prevThenableState,
      );
    }
  }
}

We can see that when REACT_LAZY_TYPE is serialized, init(payload) is run and promise is thown. This means that async functions(that do not get fulfilled right away) throws automatically during serialization. Nice trick!

What is even cooler is that, remember replacer’s return value will continue to be stringified, so the serialized result will be serialized, leading to this piece of code. When a new task is scheduled because of the thrown value, it will try to resolve the REACT_LAZY_TYPE, no longer the original server component. This REACT_LAZY_TYPE now holds the promise so the server component is not re-run actually. This kind of makes the work idempotent?

3.6.3 Client Component - no rendering, prepare to serialize

js
else if (type != null && typeof type === 'object') {
  if (isClientReference(type)) {
    // This is a reference to a Client Component.
    return [REACT_ELEMENT_TYPE, type, key, props];
  }
}

js
else if (type != null && typeof type === 'object') {
  if (isClientReference(type)) {
    // This is a reference to a Client Component.
    return [REACT_ELEMENT_TYPE, type, key, props];
  }
}

We’ve seen how client module is tagged automatically, see here it just return the type for serialization, it is then serialized as lazy chunk.

Wait, in section 3.6.1, we see isClientReference() is called against function, here again checked on object?

Yes, most of the case it is object. Support for function is added for some tooling support (original PR).

3.6.4 Intrinsic HTML tag - serializble as it is

js
else if (typeof type === "string") {
  // This is a host element. E.g. HTML.
  return [REACT_ELEMENT_TYPE, type, key, props];
}

js
else if (typeof type === "string") {
  // This is a host element. E.g. HTML.
  return [REACT_ELEMENT_TYPE, type, key, props];
}

This is for intrinsic HTML tags, simple, because it is already serializable.

3.6.5 Built-in components with Symbols - no rendering, prepare to serialize

js
else if (typeof type === "symbol") {
  if (type === REACT_FRAGMENT_TYPE) {
    // For key-less fragments, we add a small optimization to avoid serializing
    // it as a wrapper.
    // TODO: If a key is specified, we should propagate its key to any children.
    // Same as if a Server Component has a key.
    return props.children;
  }
// This might be a built-in React component. We'll let the client decide.
// Any built-in works as long as its props are serializable.
  return [REACT_ELEMENT_TYPE, type, key, props];
}

js
else if (typeof type === "symbol") {
  if (type === REACT_FRAGMENT_TYPE) {
    // For key-less fragments, we add a small optimization to avoid serializing
    // it as a wrapper.
    // TODO: If a key is specified, we should propagate its key to any children.
    // Same as if a Server Component has a key.
    return props.children;
  }
// This might be a built-in React component. We'll let the client decide.
// Any built-in works as long as its props are serializable.
  return [REACT_ELEMENT_TYPE, type, key, props];
}

For built-in components, they are serializable if Symbol is somehow replaced and revived, we’ll see it soon.

There are other components being handled like Context .etc. we’ll skip them for now to narrow down the scope.

3.7 processModelChunk() continues rendering deeper in the tree and serialize at the same time

retryTask() only renders the React tree for one layer, due to that rendering of a React tree is lazy, once it is done, we can send down the completed chunk right away. processModelChunk() does it, but we can see that inside of it, it continues rendering in the deeper tree.

export function processModelChunk(
  request: Request,
  id: number,
  model: ReactClientValue,
): Chunk {
  // $FlowFixMe[incompatible-type] stringify can return null
  const json: string = stringify(model, request.toJSON);
toJSON() works as a replacer for JSON.stringify()
  const row = id.toString(16) + ':' + json + '\n';
  return stringToChunk(row);
}
const request: Request = {
  ...
  toJSON: function (key: string, value: ReactClientValue): ReactJSONValue {
      return resolveModelToJSON(request, this, key, value);
    }
}

export function processModelChunk(
  request: Request,
  id: number,
  model: ReactClientValue,
): Chunk {
  // $FlowFixMe[incompatible-type] stringify can return null
  const json: string = stringify(model, request.toJSON);
toJSON() works as a replacer for JSON.stringify()
  const row = id.toString(16) + ':' + json + '\n';
  return stringToChunk(row);
}
const request: Request = {
  ...
  toJSON: function (key: string, value: ReactClientValue): ReactJSONValue {
      return resolveModelToJSON(request, this, key, value);
    }
}

3.7.1. Let’s recall how JSON.stringify() replacer works()

The second argument of JSON.stringify() could be a replacer function that allows us to customize the string value based on the key.

One interesting part of the replacer function is that we can return an object, JSON.stringify() will recursively work on the object as well, here is an example.

JSON.stringify({ a: 3 }, (k, v) => {
  if (k === "a") {
    return { b: 4 };
  }
  if (k === "b") {
    return { c: 5 };
  }
  return v;
});
// '{"a":{"b":{"c":5}}}'

JSON.stringify({ a: 3 }, (k, v) => {
  if (k === "a") {
    return { b: 4 };
  }
  if (k === "b") {
    return { c: 5 };
  }
  return v;
});
// '{"a":{"b":{"c":5}}}'

See we use the replacer to change the original object and stringified it.

Look how it suits React tree rendering because of the lazy rendering, we can use the replacer to run the function component when we fin it appropriate. Clever, right?

Keep this in mind and let’s continue.

3.7.2 resolveModelToJSON() does the actual serialization, as a replacer of JSON.stringify()

Per its name, resolveModelToJSON() stringify rendered React tree, it is quite long, let’s break it down

3.7.2.1 REACT_ELEMENT_TYPE → ’$’

export function resolveModelToJSON(
  request: Request,
  parent:
    | {+[key: string | number]: ReactClientValue}
    | $ReadOnlyArray<ReactClientValue>,
  key: string,
  value: ReactClientValue,
): ReactJSONValue {
  // Special Symbols
  switch (value) {
    case REACT_ELEMENT_TYPE:
      return '$';
So Symbol.for("react.element") is replaced with $, well much short than our choice.
It doesn't mean anything, guess chose the shortest because
there are usually a lot of Symbol.for("react.element") to serialize
  }

export function resolveModelToJSON(
  request: Request,
  parent:
    | {+[key: string | number]: ReactClientValue}
    | $ReadOnlyArray<ReactClientValue>,
  key: string,
  value: ReactClientValue,
): ReactJSONValue {
  // Special Symbols
  switch (value) {
    case REACT_ELEMENT_TYPE:
      return '$';
So Symbol.for("react.element") is replaced with $, well much short than our choice.
It doesn't mean anything, guess chose the shortest because
there are usually a lot of Symbol.for("react.element") to serialize
  }

3.7.2.2 Server Component - serialized as lazy chunk, meanwhile a new Task is scheduled

// Resolve Server Components.
while (
  typeof value === "object" &&
  value !== null &&
  ((value: any).$$typeof === REACT_ELEMENT_TYPE ||
    (value: any).$$typeof === REACT_LAZY_TYPE)
) {
  try {
    switch ((value: any).$$typeof) {
      case REACT_ELEMENT_TYPE: {
        // TODO: Concatenate keys of parents onto children.
        const element: React$Element<any> = (value: any);
        // Attempt to render the Server Component.
        value = attemptResolveElement(
          request,
          element.type,
          element.key,
          element.ref,
          element.props,
          null
        );
        break;
      }
      case REACT_LAZY_TYPE: {
        const payload = (value: any)._payload;
        const init = (value: any)._init;
        value = init(payload);
look how init is called here for REACT_LAZY_TYPE
remember that when server component is first met, it is replaced with REACT_LAZY_TYPE
and it is then processed here
        break;
      }
    }
  } catch (thrownValue) {
as we mentioned, init() throws
    const x =
      thrownValue === SuspenseException
        ? // This is a special type of exception used for Suspense. For historical
          // reasons, the rest of the Suspense implementation expects the thrown
          // value to be a thenable, because before `use` existed that was the
          // (unstable) API for suspending. This implementation detail can change
          // later, once we deprecate the old API in favor of `use`.
          getSuspendedThenable()
        : thrownValue;
    // $FlowFixMe[method-unbinding]
    if (typeof x === "object" && x !== null && typeof x.then === "function") {
      // Something suspended, we'll need to create a new task and resolve it later.
      request.pendingChunks++;
      const newTask = createTask(
        request,
        value,
        getActiveContext(),
        request.abortableTasks
      );
      const ping = newTask.ping;
      x.then(ping, ping);
      newTask.thenableState = getThenableStateAfterSuspending();
      return serializeLazyID(newTask.id);
    } else {
      // Something errored. We'll still send everything we have up until this point.
      // We'll replace this element with a lazy reference that throws on the client
      // once it gets rendered.
      request.pendingChunks++;
      const errorId = request.nextChunkId++;
      const digest = logRecoverableError(request, x);
      emitErrorChunkProd(request, errorId, digest);
      return serializeLazyID(errorId);
    }
  }
}

// Resolve Server Components.
while (
  typeof value === "object" &&
  value !== null &&
  ((value: any).$$typeof === REACT_ELEMENT_TYPE ||
    (value: any).$$typeof === REACT_LAZY_TYPE)
) {
  try {
    switch ((value: any).$$typeof) {
      case REACT_ELEMENT_TYPE: {
        // TODO: Concatenate keys of parents onto children.
        const element: React$Element<any> = (value: any);
        // Attempt to render the Server Component.
        value = attemptResolveElement(
          request,
          element.type,
          element.key,
          element.ref,
          element.props,
          null
        );
        break;
      }
      case REACT_LAZY_TYPE: {
        const payload = (value: any)._payload;
        const init = (value: any)._init;
        value = init(payload);
look how init is called here for REACT_LAZY_TYPE
remember that when server component is first met, it is replaced with REACT_LAZY_TYPE
and it is then processed here
        break;
      }
    }
  } catch (thrownValue) {
as we mentioned, init() throws
    const x =
      thrownValue === SuspenseException
        ? // This is a special type of exception used for Suspense. For historical
          // reasons, the rest of the Suspense implementation expects the thrown
          // value to be a thenable, because before `use` existed that was the
          // (unstable) API for suspending. This implementation detail can change
          // later, once we deprecate the old API in favor of `use`.
          getSuspendedThenable()
        : thrownValue;
    // $FlowFixMe[method-unbinding]
    if (typeof x === "object" && x !== null && typeof x.then === "function") {
      // Something suspended, we'll need to create a new task and resolve it later.
      request.pendingChunks++;
      const newTask = createTask(
        request,
        value,
        getActiveContext(),
        request.abortableTasks
      );
      const ping = newTask.ping;
      x.then(ping, ping);
      newTask.thenableState = getThenableStateAfterSuspending();
      return serializeLazyID(newTask.id);
    } else {
      // Something errored. We'll still send everything we have up until this point.
      // We'll replace this element with a lazy reference that throws on the client
      // once it gets rendered.
      request.pendingChunks++;
      const errorId = request.nextChunkId++;
      const digest = logRecoverableError(request, x);
      emitErrorChunkProd(request, errorId, digest);
      return serializeLazyID(errorId);
    }
  }
}

Here is how we process React Element, same as retryTask(), attemptResolveElement() is called. So if Server Component is met, a thenable is thrown and caught here. The handling of thrown promise is different from retryTask() though, as blow.

request.pendingChunks++;
const newTask = createTask(
  request,
  value,
This value is the current node on the tree,
so the task scheduled here will try to render and serialize ths sub-tree later
  getActiveContext(),
  request.abortableTasks
);
const ping = newTask.ping;
x.then(ping, ping);
newTask.thenableState = getThenableStateAfterSuspending();
return serializeLazyID(newTask.id);
function serializeLazyID(id: number): string {
  return "$L" + id.toString(16);
I guess L means Lazy?
}

request.pendingChunks++;
const newTask = createTask(
  request,
  value,
This value is the current node on the tree,
so the task scheduled here will try to render and serialize ths sub-tree later
  getActiveContext(),
  request.abortableTasks
);
const ping = newTask.ping;
x.then(ping, ping);
newTask.thenableState = getThenableStateAfterSuspending();
return serializeLazyID(newTask.id);
function serializeLazyID(id: number): string {
  return "$L" + id.toString(16);
I guess L means Lazy?
}

We see a new task is created, meaning there is going to be a new chunk. Chunk is identified with id, which means it just returns $L{id}, similar to what we did as <Placeholder id="xx"/>.

We’ll soon see how $L{id} is parsed and replaced with a Lazy component on client.

3.7.2.3 null → null

js
if (value === null) {
  return null;
}

js
if (value === null) {
  return null;
}

null is just serialized as null.

3.7.2.4 Client Component - serialized as lazy chunk as well

if (typeof value === "object") {
  if (isClientReference(value)) {
    return serializeClientReference(request, parent, key, (value: any));
  }
function serializeClientReference(
  request: Request,
  parent:
    | { +[key: string | number]: ReactClientValue }
    | $ReadOnlyArray<ReactClientValue>,
  key: string,
  clientReference: ClientReference<any>
): string {
  const clientReferenceKey: ClientReferenceKey =
    getClientReferenceKey(clientReference);
  const writtenClientReferences = request.writtenClientReferences;
  const existingId = writtenClientReferences.get(clientReferenceKey);
  if (existingId !== undefined) {
This checks if the client reference is already streamed
We could use it multiple times, but we only want to preload it once
    
    if (parent[0] === REACT_ELEMENT_TYPE && key === "1") {
      // If we're encoding the "type" of an element, we can refer
      // to that by a lazy reference instead of directly since React
      // knows how to deal with lazy values. This lets us suspend
      // on this component rather than its parent until the code has
      // loaded.
      return serializeLazyID(existingId);
    }
    return serializeByValueID(existingId);
  }
  try {
    const clientReferenceMetadata: ClientReferenceMetadata =
      resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
    request.pendingChunks++;
    const importId = request.nextChunkId++;
    emitImportChunk(request, importId, clientReferenceMetadata);
    writtenClientReferences.set(clientReferenceKey, importId);
    if (parent[0] === REACT_ELEMENT_TYPE && key === "1") {
This checks if this component reference is rendered as element,
rather than being passed as props
      // If we're encoding the "type" of an element, we can refer
      // to that by a lazy reference instead of directly since React
      // knows how to deal with lazy values. This lets us suspend
      // on this component rather than its parent until the code has
      // loaded.
      return serializeLazyID(importId);
    }
    return serializeByValueID(importId);
  } catch (x) {
    request.pendingChunks++;
    const errorId = request.nextChunkId++;
    const digest = logRecoverableError(request, x);
    emitErrorChunkProd(request, errorId, digest);
    return serializeByValueID(errorId);
  }
}
function getClientReferenceKey(
  reference: ClientReference<any>
): ClientReferenceKey {
  return reference.$$async ? reference.$$id + "#async" : reference.$$id;
}

if (typeof value === "object") {
  if (isClientReference(value)) {
    return serializeClientReference(request, parent, key, (value: any));
  }
function serializeClientReference(
  request: Request,
  parent:
    | { +[key: string | number]: ReactClientValue }
    | $ReadOnlyArray<ReactClientValue>,
  key: string,
  clientReference: ClientReference<any>
): string {
  const clientReferenceKey: ClientReferenceKey =
    getClientReferenceKey(clientReference);
  const writtenClientReferences = request.writtenClientReferences;
  const existingId = writtenClientReferences.get(clientReferenceKey);
  if (existingId !== undefined) {
This checks if the client reference is already streamed
We could use it multiple times, but we only want to preload it once
    
    if (parent[0] === REACT_ELEMENT_TYPE && key === "1") {
      // If we're encoding the "type" of an element, we can refer
      // to that by a lazy reference instead of directly since React
      // knows how to deal with lazy values. This lets us suspend
      // on this component rather than its parent until the code has
      // loaded.
      return serializeLazyID(existingId);
    }
    return serializeByValueID(existingId);
  }
  try {
    const clientReferenceMetadata: ClientReferenceMetadata =
      resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
    request.pendingChunks++;
    const importId = request.nextChunkId++;
    emitImportChunk(request, importId, clientReferenceMetadata);
    writtenClientReferences.set(clientReferenceKey, importId);
    if (parent[0] === REACT_ELEMENT_TYPE && key === "1") {
This checks if this component reference is rendered as element,
rather than being passed as props
      // If we're encoding the "type" of an element, we can refer
      // to that by a lazy reference instead of directly since React
      // knows how to deal with lazy values. This lets us suspend
      // on this component rather than its parent until the code has
      // loaded.
      return serializeLazyID(importId);
    }
    return serializeByValueID(importId);
  } catch (x) {
    request.pendingChunks++;
    const errorId = request.nextChunkId++;
    const digest = logRecoverableError(request, x);
    emitErrorChunkProd(request, errorId, digest);
    return serializeByValueID(errorId);
  }
}
function getClientReferenceKey(
  reference: ClientReference<any>
): ClientReferenceKey {
  return reference.$$async ? reference.$$id + "#async" : reference.$$id;
}

Above is how client component is serialized. So basically,

1. it is identified by the unique id
2. emitImportChunk() adds the chunk into completedImportChunks, which will be flushed at right timing.
3. then serialize with $L or just $. If it is passed as just a prop, not element type, there is no need to preload it.
4. if it is already emitted, the serialized will be reused without sending down the chunk again.

Despite a lot of details, I think our approach is similar in the direction. We replaced it as <LazyContainer componentName="xxx">.

In Secion 3.9, we see how the reference is created automatically, here we see that resolveClientReferenceMetadata() helps resolve the final module info together with bundlerConfig, which is passed in renderToPipeableStream(). This is bundler specific, we’ll skip it for now, just know that a module path is resolved to the final built module id .etc, which is to be consumed on client.

js
function resolveClientReferenceMetadata<T>(
  config: ClientManifest,
  clientReference: ClientReference<T>,
): ClientReferenceMetadata {
  const modulePath = clientReference.$$id;
  let name = '';
  let resolvedModuleData = config[modulePath];
  if (resolvedModuleData) {
    // The potentially aliased name.
    name = resolvedModuleData.name;
  } else {
    // We didn't find this specific export name but we might have the * export
    // which contains this name as well.
    // TODO: It's unfortunate that we now have to parse this string. We should
    // probably go back to encoding path and name separately on the client reference.
    const idx = modulePath.lastIndexOf('#');
    if (idx !== -1) {
      name = modulePath.substr(idx + 1);
      resolvedModuleData = config[modulePath.substr(0, idx)];
    }
    if (!resolvedModuleData) {
      throw new Error(
        'Could not find the module "' +
          modulePath +
          '" in the React Client Manifest. ' +
          'This is probably a bug in the React Server Components bundler.',
      );
    }
  }
  return {
    id: resolvedModuleData.id,
    chunks: resolvedModuleData.chunks,
    name: name,
    async: !!clientReference.$$async,
  };
}

js
function resolveClientReferenceMetadata<T>(
  config: ClientManifest,
  clientReference: ClientReference<T>,
): ClientReferenceMetadata {
  const modulePath = clientReference.$$id;
  let name = '';
  let resolvedModuleData = config[modulePath];
  if (resolvedModuleData) {
    // The potentially aliased name.
    name = resolvedModuleData.name;
  } else {
    // We didn't find this specific export name but we might have the * export
    // which contains this name as well.
    // TODO: It's unfortunate that we now have to parse this string. We should
    // probably go back to encoding path and name separately on the client reference.
    const idx = modulePath.lastIndexOf('#');
    if (idx !== -1) {
      name = modulePath.substr(idx + 1);
      resolvedModuleData = config[modulePath.substr(0, idx)];
    }
    if (!resolvedModuleData) {
      throw new Error(
        'Could not find the module "' +
          modulePath +
          '" in the React Client Manifest. ' +
          'This is probably a bug in the React Server Components bundler.',
      );
    }
  }
  return {
    id: resolvedModuleData.id,
    chunks: resolvedModuleData.chunks,
    name: name,
    async: !!clientReference.$$async,
  };
}

3.7.2.5 Thenable(Promies) - serialized similar to Lazy Chunk

js
else if (typeof value.then === "function") {
  // We assume that any object with a .then property is a "Thenable" type,
  // or a Promise type. Either of which can be represented by a Promise.
  const promiseId = serializeThenable(request, (value: any));
  return serializePromiseID(promiseId);
}

js
else if (typeof value.then === "function") {
  // We assume that any object with a .then property is a "Thenable" type,
  // or a Promise type. Either of which can be represented by a Promise.
  const promiseId = serializeThenable(request, (value: any));
  return serializePromiseID(promiseId);
}

Interesting that there is serializeThenable(), because we’ve already seen that Server Component will trigger a Promise to be thrown.

So the promise here is the general term, like we can have a promise passed as component props, not an async component, but async prop. This is cool and we didn’t cover it in our demo.

Let’s see what it is in serializeThenable().

js
function serializeThenable(request: Request, thenable: Thenable<any>): number {
  request.pendingChunks++;
  const newTask = createTask(
    request,
    null,
    getActiveContext(),
    request.abortableTasks
  );
  switch (thenable.status) {
    case "fulfilled": {
      // We have the resolved value, we can go ahead and schedule it for serialization.
      newTask.model = thenable.value;
      pingTask(request, newTask);
      return newTask.id;
    }
    case "rejected": {
      const x = thenable.reason;
      const digest = logRecoverableError(request, x);
      emitErrorChunkProd(request, newTask.id, digest);
      return newTask.id;
    }
    default: {
      if (typeof thenable.status === "string") {
        // Only instrument the thenable if the status if not defined. If
        // it's defined, but an unknown value, assume it's been instrumented by
        // some custom userspace implementation. We treat it as "pending".
        break;
      }
      const pendingThenable: PendingThenable<mixed> = (thenable: any);
      pendingThenable.status = "pending";
      pendingThenable.then(
        (fulfilledValue) => {
          if (thenable.status === "pending") {
            const fulfilledThenable: FulfilledThenable<mixed> = (thenable: any);
            fulfilledThenable.status = "fulfilled";
            fulfilledThenable.value = fulfilledValue;
          }
        },
        (error: mixed) => {
          if (thenable.status === "pending") {
            const rejectedThenable: RejectedThenable<mixed> = (thenable: any);
            rejectedThenable.status = "rejected";
            rejectedThenable.reason = error;
          }
        }
      );
      break;
    }
  }
  thenable.then(
    (value) => {
      newTask.model = value;
      pingTask(request, newTask);
    },
    (reason) => {
      newTask.status = ERRORED;
      // TODO: We should ideally do this inside performWork so it's scheduled
      const digest = logRecoverableError(request, reason);
      emitErrorChunkProd(request, newTask.id, digest);
      if (request.destination !== null) {
        flushCompletedChunks(request, request.destination);
      }
    }
  );
  return newTask.id;
}
function serializePromiseID(id: number): string {
  return "$@" + id.toString(16);
}