Nonstop Pajama Models

    react-data-ssr-server

    1.2.0 • Public • Published

    React Data SSR

    Server side initial data resolution for react-data-ssr.

    Instalation

    yarn -i react-data-ssr-server
     
    # Or using npm 
    npm -i react-data-ssr-server --save

    Examples

    The examples folder contains several exmaples.


    Usage

    Simple Example

    // server.js
    import express from 'express';
    import React from 'react';
    import { renderToString } from 'react-dom/server';
    import { resolveInitialData } from 'react-data-ssr';
    import { matchRoutes, renderRoutes } from 'react-router-config';
    import { StaticRouter } from 'react-router';
    import routes from './routes'; // React Router Config Routes
    import serialize from 'serialize-javascript';
     
    const server = express();
    server
      .get('/*', (req, res) => {
        // Get all the branches
        const branches = matchRoutes(routes, req.url);
     
        // Resolve the data required by each branch
        resolveInitialData(branches)
          .then(({store, errors}) => {
            // We'll ignore errors
     
            const context = {};
     
            // Render the markup
            const markup = renderToString(
              <StaticRouter location={req.url} context={context}>
                {renderRoutes(routes, {
                  getInitialData: k => store[k],
                  hasLoadedComponent: k => k in store,
                  dismissLoadedComponent: () => console.trace('Should not call `dismissLoadedComponent` in SSR`'),
                })}
              </StaticRouter>
            );
     
            res.send(
              `<!doctype html>
              <html lang="">
              <head>
                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                <meta charSet='utf-8' />
                <title>React Data SSR example</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                ${assets.client.css
                  ? `<link rel="stylesheet" href="${assets.client.css}">`
                  : ''}
                 ${process.env.NODE_ENV === 'production'
                   ? `<script src="${assets.client.js}" defer></script>`
                   : `<script src="${assets.client.js}" defer crossorigin></script>`}
              </head>
              <body>
                <div id="root">${markup}</div>
                <script>
                  window.__INITIAL_DATA__ = ${serialize(store)}
                </script>
              </body>
              </html>`
            );
          });
      });

    Note: The example uses React 16, but it's not a requeriment. React 15 could alse be used. Note 2: The example uses React Router Config, but it's not a requeriment. Any route configuration could be used.

    Api

    resolveInitialData(branches, extra) -> Promise

    Resolves all data, calling the static method getInitialData of each branch's component.

    branches

    List with branches. This function support 3 types of branches:

    • React Router Config: What is returned by the matchRoutes function. Eg:
    {
      route: {
        component: Component,
        routes: []
      },
      match: {
        path: '',
        url: '',
        params: {},
        isExact:
      }
    }
    • Dictionary: A dictionary with a key component that contains the react component. Eg:
    {
      component: Component,
      // ...
    }
    • Component: Just the React Component.

    Note: Remember that the branch will be passed as an argument to the static method getInitialData. By using the mapArgsToProps this args can be mapped to the required props for the getData.

    extra

    This is an extra, optional argument that will be passed to getInitialData. It can be used in the mapArgsToProps to map properties getData.

    Returned value (Promise)

    The function returns a Promise that will be resolved when all the getInitialData promises resolve.

    In the resolution, this promise sends an Object with two keys:

    • store: A dictionary that relates successful getInitialData's promises (by the Component's Key) with the resolved data.
    • errors: A dictionary that relates the rejected getInitialData's promises (by the Component's key) with the failed data.

    Note: This promise will never reject

    Install

    npm i react-data-ssr-server

    DownloadsWeekly Downloads

    4

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • nickcis