async renderToNodeStream({ res, render, component, styleStrategy }) { const delemitter = `<!-- renderToNodeStream ${Math.random()} renderToNodeStream --->`; const content = await render(delemitter); const [before, after] = content.split(delemitter); res.write(before); let stream = renderToNodeStream(component); if (styleStrategy === 'emotion') { stream = stream.pipe(renderStylesToNodeStream()); } stream.pipe(res, { end: false }); stream.on('end', () => { res.write(after); res.end(); }); }
const renderForClient = async (req, res) => { const data = await fetchQuery(environment, query, variables); const rendered = renderToNodeStream( <ReactRelayContext.Provider value={{environment, variables}}> <HomeFragment {...data} /> </ReactRelayContext.Provider> ); rl.createInterface({ input: fs.createReadStream(HTML_FILE), terminal: false }).on('line', (line) => { res.write(line); }).on('close', () => { res.end(); }); }
toStream() { try { const streamToReturn = new Stream.PassThrough(); const cachedHtml = cache.get(cacheKey); console.log('<cache hit in renderer.toStream>'); streamToReturn.end(cachedHtml); return streamToReturn; } catch (err) { console.log('<cache miss in renderer.toStream>'); const cachingStream = createCachingStream(cacheKey); const reactStream = ReactDOMServer.renderToNodeStream(helloElement); cachingStream.write(preReact, () => reactStream.pipe(cachingStream, { end: false })); reactStream.on('end', () => cachingStream.end(postReact)); return cachingStream; } }
app.get("/", (req, res) => { const html = fs.readFileSync(path.resolve(__dirname, `./../dist/ssr.html`), "utf-8") const [head, tail] = html.split("{content}") res.write(head) const url = "https://jsonplaceholder.typicode.com/photos?_page=1&&_limit=10" request({ method: "GET", url }, (err, httpsRes, body) => { const newTail = tail.split("{script}") .join(` <script id="ssr__script"> window.__ALBUMS__ = ${JSON.stringify(body)} </script> `) const reactElement = React.createElement(Albums, { albums: JSON.parse(body) }) const stream = renderToNodeStream(reactElement) stream.pipe(res, { end: false }) stream.on("end", () => { res.write(newTail) res.end() }) }) })
app.use((req, res) => { res.write(parts[0]); const reactMarkup = ( <ServerLocation url={req.url}> <App /> </ServerLocation> ); const stream = renderToNodeStream(reactMarkup); stream.pipe( res, { end: false } ); stream.on("end", () => { res.write(parts[1]); res.end(); }); });
function handler(request, response, next) { const template = readFileSync("build/index.html") .toString() .replace(/%BASE_HREF%/g, process.env.BASE_HREF || "") .replace( /%CLIENT_ENV%/g, JSON.stringify({ FOO: "bar" }) ); const context = {}; const [head, tail] = template.split("%ROOT%"); const stream = renderToNodeStream( <StaticRouter location={{ pathname: request.url }} context={context}> <App /> </StaticRouter> ); response.type("html"); response.write(head); stream.pipe( response, { end: false } ); stream.on("end", () => { response.write(tail); response.end(); }); }
<div id="react-view">`; ctx.body.write(html1); const stream = renderToNodeStream(InitialComponent); stream.pipe(ctx.body, {end: false}); stream.on('end', () => {
<div id="react-view">`; ctx.body.write(html1); const stream = renderToNodeStream(InitialComponent); stream.pipe(ctx.body, {end: false}); stream.on('end', () => {
export default function render(req, res) { res.write("<!DOCTYPE html><html>"); res.write("<head><title>React SSR v16</title><meta charset='utf-8'></head><body>"); res.write("<div id='app'>"); //res.write(renderToString(<App/>)); const stream = renderToNodeStream(<App/>); stream.pipe(res, { end: false }); stream.on('end', () => { res.write("</div>"); res.write("<script type='text/javascript' charset='utf-8' src='/assets/app.js'></script>"); res.write("</body></html>"); res.end(); }); }
const routerContext = {}; const modules: string[] = []; const stream = renderToNodeStream( React.createElement(BaseApp, { modules,
const html = renderToNodeStream( <ServerHTML reactAppString={appString}