Awesome

react-waterfall-render

Renders nested React components with asynchronous cached loading.

Useful for GraphQL clients (e.g. graphql-react) and server side rendering.

Installation

For Node.js, to install react-waterfall-render and its react peer dependency with npm, run:

npm install react-waterfall-render react

For Deno and browsers, an example import map (realistically use 4 import maps, with optimal URLs for server vs client and development vs production):

{
  "imports": {
    "react": "https://esm.sh/react@18.2.0",
    "react-waterfall-render/": "https://unpkg.com/react-waterfall-render@5.0.0/"
  }
}

Use the WaterfallRenderContext in React components to declare asynchronous cached loading, and use the function waterfallRender to server side render your React app in a fully loaded state.

Requirements

Supported runtime environments:

• Node.js versions ^14.17.0 || ^16.0.0 || >= 18.0.0.
• Deno, importing from a CDN that might require an import map for dependencies.
• Browsers matching the Browserslist query > 0.5%, not OperaMini all, not dead.

Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:

• compilerOptions.allowJs should be true.
• compilerOptions.maxNodeModuleJsDepth should be reasonably large, e.g. 10.
• compilerOptions.module should be "node16" or "nodenext".

Exports

The npm package react-waterfall-render features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported via the package.json field exports:

• waterfallRender.mjs
• WaterfallRenderContext.mjs