Skip to content

Instantly share code, notes, and snippets.

@adamhenson

adamhenson/render.js

Last active February 22, 2019 12:36
Show Gist options
  • Save adamhenson/40b90154d2cf4e55c081f92c8dfe8877 to your computer and use it in GitHub Desktop.
Save adamhenson/40b90154d2cf4e55c081f92c8dfe8877 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adamhenson revised this gist Feb 22, 2019. 1 changed file with 11 additions and 8 deletions.
    19 changes: 11 additions & 8 deletions render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,29 +5,32 @@ import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
    import { Provider } from './somewhere/out/there/Provider';
    import App from './somewhere/out/there/App';

    const extractor = new ChunkExtractor({ statsFile: LOADABLE_STATS });
    const extractor = new ChunkExtractor({
    statsFile: LOADABLE_STATS,
    });

    export default (req, res) => {
    const html = renderToString(
    <Provider>
    <ChunkExtractorManager extractor={extractor}>
    <ChunkExtractorManager
    extractor={extractor}
    >
    <App />
    </ChunkExtractorManager>
    </Provider>,
    );

    const scriptTags = extractor.getScriptTags();
    const styleTags = extractor.getStyleTags();

    return res.send(`
    <!doctype html>
    <html>
    <head>
    ${styleTags}
    ${extractor.getStyleTags()}
    </head>
    <body>
    <div id="root">${html}</div>
    ${scriptTags}
    <div id="root">
    ${html}
    </div>
    ${extractor.getScriptTags()}
    </body>
    </html>
    `);
  2. adamhenson created this gist Feb 21, 2019.
    34 changes: 34 additions & 0 deletions render.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    /* global LOADABLE_STATS: true */
    import React from 'react';
    import { renderToString } from 'react-dom/server';
    import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
    import { Provider } from './somewhere/out/there/Provider';
    import App from './somewhere/out/there/App';

    const extractor = new ChunkExtractor({ statsFile: LOADABLE_STATS });

    export default (req, res) => {
    const html = renderToString(
    <Provider>
    <ChunkExtractorManager extractor={extractor}>
    <App />
    </ChunkExtractorManager>
    </Provider>,
    );

    const scriptTags = extractor.getScriptTags();
    const styleTags = extractor.getStyleTags();

    return res.send(`
    <!doctype html>
    <html>
    <head>
    ${styleTags}
    </head>
    <body>
    <div id="root">${html}</div>
    ${scriptTags}
    </body>
    </html>
    `);
    }