Using redux-api with Next.js next-redux-wrapper for server-side rendering?

Anyone tried using redux-api with Next.js for server-side rendering?

I’d like to get tips on how to do the initial redux-api sync() call inside getInitialProps (Next.js specific method) instead of componentDidMount (as in the example), to get the data rendered server-side along with the first page request.

[tomsoderlund]

Here’s a complete working example of Next.js, redux-api, and next-redux-wrapper working in harmony:

https://github.com/tomsoderlund/nextjs-express-mongoose-crudify-boilerplate

[te-online]

Just to follow up my own question: I ended up creating a (kind of?) singleton class for ReduxApi that has a setter for handing in the database connection instance. This database class variable can then be used by the custom adapter, deciding whether to fetch from the API or database and using the connection instance to query the database.

Like so

// ReduxApiClient.ts

class ReduxApiClientLib {
  private rest;
  private req;

  constructor() {
    this.rest = reduxApi({
     ...
    }).use('fetch', this.adapter);
  }

  public setServerRequest = (req) => {
    this.req = req;
  };

  public getRest = () => {
    return this.rest;
  };

  private adapter = async (url, options) => {
    // Server-side behaviour
    if (this.req) {
      let data: any = [];
      switch (url) {
        case '/api/test':
          ...
          // Query database
          data = await req.database().get('test');
          break;
          ...
      }
      // Return
      return Promise.resolve(data);
    }

    // Default client-side behaviour
    try {
      const response = await fetch(
        fetchUrl,
        { ...options.fetchOptions, credentials: 'include' } || { credentials: 'include' },
      );
      if (response.ok) {
        const result = await response.json();
        return result.data;
      }
    } catch (e) {
      return [];
    }
  };

  ...
}

export const ReduxApiClient = new ReduxApiClientLib();

// _app.tsx
...
static async getInitialProps({ ctx }) {
    ...
    if (ctx.req) {
      // Get data from database
      ReduxApiClient.setServerRequest(ctx.req);
      await ctx.store.dispatch(ReduxApiClient.getRest().actions.test.sync());
      // Get current state
      const state: ReduxState = ctx.store.getState();
      // Compose props
      pageProps.test = state.apiData.test.data;
    }
    ...
}