server.tsx — react Source File

Source Code

// Server dependencies.
import express, {
  type Request as ExpressRequest,
  type Response as ExpressResponse,
} from 'express';
import {Readable} from 'node:stream';
import type {ReadableStream as NodeReadableStream} from 'stream/web';
import {
  renderToReadableStream,
  loadServerAction,
  decodeReply,
  decodeAction,
} from 'react-server-dom-parcel/server.edge';
import {injectRSCPayload} from 'rsc-html-stream/server';

// Client dependencies, used for SSR.
// These must run in the same environment as client components (e.g. same instance of React).
import {createFromReadableStream} from 'react-server-dom-parcel/client.edge' with {env: 'react-client'};
import {renderToReadableStream as renderHTMLToReadableStream} from 'react-dom/server.edge' with {env: 'react-client'};
import ReactClient, {ReactElement} from 'react' with {env: 'react-client'};

// Page components. These must have "use server-entry" so they are treated as code splitting entry points.
import {Todos} from './Todos';

const app = express();

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,POST');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'rsc-action');
  next();
});

app.use(express.static('dist'));

app.get('/', async (req, res) => {
  await render(req, res, <Todos />);
});

app.post('/', async (req, res) => {
  await handleAction(req, res, <Todos />);
});

app.get('/todos/:id', async (req, res) => {
  await render(req, res, <Todos id={Number(req.params.id)} />);
});

app.post('/todos/:id', async (req, res) => {
  await handleAction(req, res, <Todos id={Number(req.params.id)} />);
});

async function render(
  req: ExpressRequest,
  res: ExpressResponse,
  component: ReactElement,
  actionResult?: any,
) {
  // Render RSC payload.
  let root: any = component;
  if (actionResult) {
// ... (81 more lines)