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>

    Install

    npm i react-delayed-render

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • thebuilder