optimized react server rendered static content (proof of concept)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
src
.babelrc
.gitignore
README.md
package-lock.json
package.json

README.md

React Static Content

Sometimes we have large pieces of static content in our application state, such as articles, user comments, or most content coming from a CMS.
Traditionally when server-side rendering, the initial HTML has two copies of this content, one in the markup and one in a script tag for rehydration.
This is a proof of concept for a way to rehydrate static content in the client without having the state needed to render it.

//server
ReactDOMServer.renderToString(
    <StaticRenderProvider server>
        <StaticContent renderID="big-table">
            <Table data={giantDataObject} />
        </StaticContent>
    </StaticRenderProvider>
);

//client
ReactDOM.rehydrate(
    <StaticRenderProvider>
        <StaticContent renderID="big-table">
            <Table data={null} />
        </StaticContent>
    </StaticRenderProvider>,
    document.getElementById('root'),
);