react-delayed-render

1.0.1 • Public • Published

react-delayed-render

Build Status

Initialize server side rendered components when the app is ready. This requires the server to output a custom script tag, that contains the components and data to render.

We are using this solution with ReactJS.net, to enable partial caching of the React views.

There is an open issue to implement the server side part of this solution:

import delayedRender from './utils/delayed-render';
 
if (global._components && Array.isArray(global._components)) {
  delayedRender(global._components);
  global._components = null;
}

delayedRender

delayedRender(components: Array<ComponentDefinition>, lookup: Object = global)

ComponentDefinition

  • name - Component exposed to the to lookup object (global/window). This should be a string.
  • props - The component props.
  • name - Element id attribute.

HTML

The server should output the <script> tag to initialize the components. This is an example from the implementation on in2media.com.

<body>
  <header id="react_3MrojQAS6kSdRQK6cnnCKQ">
    <nav data-reactroot="" data-reactid="1" data-react-checksum="-2030430549">...</nav>
  </header>
  <script>
     _components.push({
       name   : "Components.Header",
       props  : {
         "logo": {"company": "in2media"},
         "nav" : [
           {"href": "/about/", "label": "About", "active": false}, 
           {"href": "/our-work/", "label": "Our Work", "active": false}, 
           {"href": "/jobs/", "label": "Jobs", "active": false}, 
           {"href": "/contact/", "label": "Contact", "active": false}
         ]
       },
       element: "react_3MrojQAS6kSdRQK6cnnCKQ"
     })
  </script> 
</body>

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.10latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.10
1.0.00

Package Sidebar

Install

npm i react-delayed-render

Weekly Downloads

0

Version

1.0.1

License

MIT

Last publish

Collaborators

  • thebuilder