How to use the react-dom/server.renderToNodeStream function in react-dom

To help you get started, weโ€™ve selected a few react-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github JasonBoy / koa-web-kit / src / ssr / index.js View on Github external
renderWithStream(url, data = {}, routerContext = {}) {
    // let modules = [];
    const sheet = new ServerStyleSheet();
    const extractor = new ChunkExtractor({ statsFile: this.statsFile });
    const jsx = extractor.collectChunks(
      sheet.collectStyles(
        
          
        
      )
    );
    const htmlStream = sheet.interleaveWithNodeStream(
      ReactDOMServer.renderToNodeStream(jsx)
    );
    const renderedScriptTags = extractor.getScriptTags();
    const renderedLinkTags = extractor.getLinkTags();
    const renderedStyleTags = extractor.getStyleTags();
    /*console.log('renderedScriptTags: \n', renderedScriptTags);
    console.log('renderedLinkTags: \n', renderedLinkTags);
    console.log('renderedStyleTags: \n', renderedStyleTags);*/
    return {
      htmlStream,
      extractor,
      scriptTags: renderedScriptTags,
      linkTags: renderedLinkTags,
      styleTags: renderedStyleTags,
    };
  }
}
github ykfe / egg-react-ssr / packages / ykfe-utils / src / renderToStreamForFass.js View on Github external
if (config.type !== 'ssr') {
    const str = await renderLayoutForFass(ctx)
    return str
  }

  if (isLocal) {
    // ๆœฌๅœฐๅผ€ๅ‘็Žฏๅขƒไธ‹ๆฏๆฌกๅˆทๆ–ฐ็š„ๆ—ถๅ€™ๆธ…็ฉบrequireๆœๅŠก็ซฏๆ–‡ไปถ็š„็ผ“ๅญ˜๏ผŒไฟ่ฏๆœๅŠก็ซฏไธŽๅฎขๆˆท็ซฏๆธฒๆŸ“็ป“ๆžœไธ€่‡ด
    delete require.cache[serverJs]
  }

  if (!global.serverStream || isLocal) {
    global.serverStream = typeof serverJs === 'string' ? require('@/' + serverJs).default : serverJs
  }

  const serverRes = await global.serverStream(ctx)
  const stream = ReactDOMServer.renderToNodeStream(serverRes)
  return stream
}
github SubstraFoundation / substra-frontend / src / server / render.js View on Github external
const renderStreamed = async (ctx, path, clientStats, outputPath) => {
    // Grab the CSS from our sheetsRegistry.
    clearChunks();

    const store = await configureStore(ctx);

    if (!store) return; // no store means redirect was already served
    const stateJson = JSON.stringify(store.getState());

    const {css} = flushChunks(clientStats, {outputPath});

    const chunkNames = [];
    const app = createApp(App, store, chunkNames);

    const stream = renderToNodeStream(app).pipe(renderStylesToNodeStream());

    // flush the head with css & js resource tags first so the download starts immediately
    const early = earlyChunk(css, stateJson);


    // DO not use redis cache on dev
    let mainStream;
    if (process.env.NODE_ENV === 'development') {
        mainStream = ctx.body;
    }
    else {
        mainStream = createCacheStream(path);
        mainStream.pipe(ctx.body);
    }

    mainStream.write(early);
github alexisjanvier / universal-react / src / server / index.js View on Github external
store.runSaga(sagas).done.then(() => {
        const helmet = Helmet.renderStatic();
        res.status(200).write(renderHeader(helmet));

        const preloadedState = store.getState();
        const css = styleManager.sheetsToString();

        const htmlSteam = renderToNodeStream(appWithRouter);
        htmlSteam.pipe(res, { end: false });
        htmlSteam.on('end', () => {
            res.write(renderFooter(css, loadableState, preloadedState));
            return res.send();
        });
    });
github Lucifier129 / react-imvc / src / page / createPageRouter.ts View on Github external
return new Promise<{}>((resolve, reject) => {
    let stream = ReactDOMServer.renderToNodeStream(view)
    let buffers: Uint8Array[] = []
    stream.on('data', chunk => buffers.push(chunk))
    stream.on('end', () => {
      React.createElement = createElement
      resolve(Buffer.concat(buffers))
    })
    stream.on('error', error => {
      if (!controller) {
        React.createElement = createElement
        return reject(error)
      }

      if (controller.errorDidCatch) {
        controller.errorDidCatch(error, 'view')
      }
github ykfe / egg-react-ssr / packages / yk-cli / src / renderLayoutForFass.ts View on Github external
const reactToStream = (Component: React.FunctionComponent, props: object): Stream => {
  return renderToNodeStream(React.createElement(Component, props))
}
github qiwi / pijma / packages / app / src / server.tsx View on Github external
const device = devices[req.device.type]

    const props = {
      scripts: clientStats[device]
        .chunks
        .filter(chunk => chunk.initial)
        .reduce((files, chunk) => files.concat(`${clientStats[device].publicPath}${chunk.files[0]}`), []),
    }

    res.status(200)
    res.contentType('text/html; charset=utf-8')
    res.write('')

    const Server = servers[req.device.type]

    const stream = renderToNodeStream().pipe(renderStylesToNodeStream())

    stream.pipe(res, {end: false})
    stream.on('end', () => res.end())

  }
github AlexSergey / rocket-next / src / server.jsx View on Github external
renderToString(jsx);

    const meta = metaTagsInstance.renderToString();

    const sagasInProgress = store.sagas.map(saga => saga.toPromise());

    store.dispatch(END);

    await Promise.all(sagasInProgress);

    const reduxState = store.getState();
    stream.push(renderHeader(meta));
    ctx.status = 200;
    ctx.res.write(renderHeader(meta));

    const htmlSteam = renderToNodeStream(jsx);
    htmlSteam.pipe(ctx.res, { end: false });
    await readHTMLStream(htmlSteam);

    let scripts = '';

    if (!!process.env.FRONTEND_HAS_VENDOR) {
        scripts += '\n';
    }

    scripts += webExtractor.getScriptTags();

    ctx.res.write(
        renderFooter(
            reduxState,
            process.env.NODE_ENV === 'development' ?
                `<style type="text/css">${[...css].join('')}</style>` :
github c8r / micro-react / index.js View on Github external
const handleRequest = (App, opts) =&gt; async (req, res) =&gt; {
  if (!opts.raw &amp;&amp; !opts.noWrap) res.write(header)
  if (!opts.noWrap) res.write('<div id="div">')
  const props = Object.assign({}, opts, { req, res })

  delete props.script

  const el = isAsync(App)
    ? await createAsyncElement(App, props)
    : React.createElement(App, props)
  const stream = opts.bundle
    ? renderToNodeStream(el)
    : renderToStaticNodeStream(el)

  stream.pipe(res, { end: false })

  stream.on('end', async () =&gt; {
    if (!opts.noWrap) res.write('</div>')
    if (opts.script) {
      const json = jsonStringify(props)
      res.write(``)
      res.write(``)
    }

    res.end()
  })

  stream.on('error', error =&gt; {
github patrickleet / streaming-ssr-react-styled-components / server / lib / ssr.js View on Github external
const getApplicationStream = (originalUrl, context) =&gt; {
  const helmetContext = {}
  const app = (
    
      
        
      
    
  )

  const sheet = new ServerStyleSheet()
  return sheet.interleaveWithNodeStream(
    renderToNodeStream(sheet.collectStyles(app))
  )
}