❤
npm
Sign UpSign In

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>

Dependencies (0)

    Dev Dependencies (9)

    Package Sidebar

    Install

    npm i react-delayed-render

    Repository

    github.com/thebuilder/react-delayed-render

    Homepage

    github.com/thebuilder/react-delayed-render#readme

    Weekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • thebuilder
    Try on RunKit
    Report malware