react Architecture Docs
Home / File/ render.js — react Source File

render.js — react Source File

Architecture documentation for render.js, a javascript file in the react codebase. 7 imports, 0 dependents.

File javascript BabelCompiler Entrypoint 7 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  0107ee96_891d_0242_d19d_5ee01a72a676["render.js"]
  c8c1265b_3279_a736_f329_80931359bbb5["App.js"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> c8c1265b_3279_a736_f329_80931359bbb5
  04a58de0_17c6_29a2_b072_60346d29c5b7["App"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> 04a58de0_17c6_29a2_b072_60346d29c5b7
  e04b3a10_94f9_7dd8_b7e7_ffd3a8a043f6["data.js"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> e04b3a10_94f9_7dd8_b7e7_ffd3a8a043f6
  73eae392_92eb_e9dc_30e7_e850a5f4b2f6["DataProvider"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> 73eae392_92eb_e9dc_30e7_e850a5f4b2f6
  57e83448_e866_e7d9_e089_9bb784f9bc6a["delays.js"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> 57e83448_e866_e7d9_e089_9bb784f9bc6a
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  860fcd5f_4dd1_15af_0c6d_0894e4c5dffb["server"]
  0107ee96_891d_0242_d19d_5ee01a72a676 --> 860fcd5f_4dd1_15af_0c6d_0894e4c5dffb
  style 0107ee96_891d_0242_d19d_5ee01a72a676 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import * as React from 'react';
// import {renderToString} from 'react-dom/server';
import {renderToPipeableStream} from 'react-dom/server';
import App from '../src/App';
import {DataProvider} from '../src/data';
import {API_DELAY, ABORT_DELAY} from './delays';

// In a real setup, you'd read it from webpack build stats.
let assets = {
  'main.js': '/main.js',
  'main.css': '/main.css',
};

module.exports = function render(url, res) {
  const data = createServerData();
  // This is how you would wire it up previously:
  //
  // res.send(
  //   '<!DOCTYPE html>' +
  //   renderToString(
  //     <DataProvider data={data}>
  //       <App assets={assets} />
  //     </DataProvider>,
  //   )
  // );

  // The new wiring is a bit more involved.
  res.socket.on('error', error => {
    console.error('Fatal', error);
  });
  let didError = false;
  const {pipe, abort} = renderToPipeableStream(
    <DataProvider data={data}>
      <App assets={assets} />
    </DataProvider>,
    {
      bootstrapScripts: [assets['main.js']],
      onAllReady() {
        // Full completion.
        // You can use this for SSG or crawlers.
      },
      onShellReady() {
        // If something errored before we started streaming, we set the error code appropriately.
        res.statusCode = didError ? 500 : 200;
        res.setHeader('Content-type', 'text/html');
        pipe(res);
      },
      onShellError(x) {
        // Something errored before we could complete the shell so we emit an alternative shell.
        res.statusCode = 500;
        res.send('<!doctype><p>Error</p>');
      },
      onError(x) {
        didError = true;
        console.error(x);
      },
    }
  );
  // Abandon and switch to client rendering if enough time passes.
  // Try lowering this to see the client recover.
  setTimeout(abort, ABORT_DELAY);
};

// Simulate a delay caused by data fetching.
// We fake this because the streaming HTML renderer
// is not yet integrated with real data fetching strategies.
function createServerData() {
  let done = false;
  let promise = null;
  return {
    read() {
      if (done) {
        return;
      }
      if (promise) {
        throw promise;
      }
      promise = new Promise(resolve => {
        setTimeout(() => {
          done = true;
          promise = null;
          resolve();
        }, API_DELAY);
      });
      throw promise;
    },
  };
}

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does render.js do?
render.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Entrypoint subdomain.
What functions are defined in render.js?
render.js defines 2 function(s): createServerData, module.
What does render.js depend on?
render.js imports 7 module(s): App, App.js, DataProvider, data.js, delays.js, react, server.
Where is render.js in the architecture?
render.js is located at fixtures/ssr2/server/render.js (domain: BabelCompiler, subdomain: Entrypoint, directory: fixtures/ssr2/server).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free