react-ssr-async-data

React server-side rendering with asynchronous hierarchical data fetching.

Install

npm install react-ssr-async-data --save

or

yarn add react-ssr-async-data

Usage

import React = require("react");
import { createContainer, DataProvider, renderToStaticMarkup } from "react-ssr-async-data";

const provider = new DataProvider();

const Container1 = createContainer((opts: { opt1: string }) => Promise.resolve(opts.opt1 + "_data1"));
const Container2 = createContainer(() => Promise.resolve(100));

renderToStaticMarkup(
    provider,
    <Container1 provider={provider} params={{ opt1: "value1" }}>
        {(data1) => (
            <div>
                <Container2 provider={provider} params={{}}>
                    {(data2) => <span>{data1 + " _" + data2.toString()}</span>}
                </Container2>
            </div>
        )}
    </Container1>,
).then((result) => {
    console.log(result); // <div><span>value1_data1 _100</span></div>
});

API

function renderWithAsyncData(provider: DataProvider, element: React.ReactElement<any>): Promise<string>
class DataProvider<OPTS = {}> {
    constructor(public config: IDataProviderConfig<OPTS> = {});
    createContainer<DATA>(fetchFn: IDataContainerFetchFn<OPTS, DATA>): React.ComponentClass<IDataContainerProps<DATA>>;
}
interface IDataProviderConfig<OPTS> {
    fetchFnOptions?: OPTS;
}
type IDataContainerFetchFn<OPTS, DATA> = (opts: OPTS) => DATA | Promise<DATA>;

Test

npm install
npm test