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

[tomsoderlund]

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.

[lexich]

For serverside rendering you should push initialState on backend
https://github.com/lexich/redux-api/blob/master/examples/isomorphic/app/server.jsx#L60
to frontend https://github.com/lexich/redux-api/blob/master/examples/isomorphic/app/client.jsx#L26-L28

And what problem with componentDidMount?
The best place to call sync method and other ajax calls is router.
https://github.com/lexich/redux-api/blob/master/examples/isomorphic/app/routes/routes.js#L23

And what problem with next.js integration?

[tomsoderlund]

Next.js works a bit differently. You don’t separate between server and client code – it runs on both. It has a special lifecycle method getInitialProps where you can set this.props e.g. based on an initial database query, which can be rendered server-side:

https://github.com/tomsoderlund/nextjs-express-mongoose-crudify-boilerplate/blob/no-redux/pages/index.js#L6

this.state is always client-side only.

[lexich]

I have never used next.js but according examples https://github.com/zeit/next.js/blob/master/examples/with-redux/pages/index.js
https://github.com/tomsoderlund/nextjs-express-mongoose-crudify-boilerplate/blob/no-redux/pages/index.js
I think, you can write code like this

static async getInitialProps ({req, res, query}) {
   const { data } = await store.dispatch(rest.actions.entity.sync());
   return data;
}

[tomsoderlund]

I don’t even get getInitialProps to run when components are wrapped like in the redux-api examples.

There is a next-redux-wrapper NPM that adds a withRedux wrapper. Here’s from their example:

import { bindActionCreators } from 'redux'
import { initStore, startClock, addCount, serverRenderClock } from '../store'
import withRedux from 'next-redux-wrapper'

class Counter extends React.Component {
	static getInitialProps ({ store, isServer }) {
		store.dispatch(serverRenderClock(isServer))
		store.dispatch(addCount())

		return { isServer }
	}

	//...
}

const mapDispatchToProps = (dispatch) => {
	return {
		addCount: bindActionCreators(addCount, dispatch),
		startClock: bindActionCreators(startClock, dispatch)
	}
}

export default withRedux(initStore, null, mapDispatchToProps)(Counter)

Where initStore is defined as:

export const initStore = (initialState = exampleInitialState) => {
	return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)))
}

With my limited understanding of all this, I reckon I somehow need to expose reducer and the various actions (as in bindActionCreators(addCount, dispatch)) from my redux-api implementation, to accomplish something similar with withRedux.

Any tips?

Update: I guess I have reducer from const reducer = combineReducers(myReduxApi.reducers);. But I also need a createStore function to pass to withRedux.

[tomsoderlund]

Progress update:

class ShowLessonPage extends React.Component {

	static async getInitialProps ({store, isServer, pathname, query}) {
		console.log(`getInitialProps`, {store, isServer, pathname, query});
		const { dispatch } = store;
		const lessonSlug = query.lessonSlug;
		// Get one Lesson
		dispatch(reduxApi.actions.oneLesson({ id: `slug=${lessonSlug}` }));
	}

	//.....

}

const createStoreWithThunkMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reduxApi.reducers);

const makeStore = function (state, enhancer) {
	return createStoreWithThunkMiddleware(reducer, state);
}

const mapStateToProps = function (state) {
	return { oneLesson: state.oneLesson };
};

const ShowLessonPageConnected = withRedux({ createStore: makeStore, mapStateToProps: mapStateToProps })(ShowLessonPage)
export default ShowLessonPageConnected;

I at least get store into getInitialProps now, but I get a strange Error: only absolute urls are supported message that I didn’t have in my pre-withRedux version of the app. And this.props.oneLesson.data is of course empty.

makeStore is getting a state: undefined on the server generated calls, maybe that’s a clue.

[tomsoderlund]

Added a question to Stack Overflow: https://stackoverflow.com/questions/47924692/how-to-get-next-js-and-redux-api-to-work-with-next-redux-wrapper

[lexich]

Hello @tomsoderlund maybe https://github.com/lexich/redux-api/blob/master/docs/DOCS.md#rooturl

[tomsoderlund]

@lexich I solved the absolute URL issue, Although your solution is prettier.

Now, for 1 page reload it calls makeStore no less than 3 times, and only the first call contains the correct slug, see console output: https://stackoverflow.com/questions/47924692/how-to-get-next-js-and-redux-api-to-work-with-next-redux-wrapper

[tomsoderlund]

A breakthrough: returning a promise from getInitialProps makes SSR work. Now client-side rendering is acting up, funny enough.

static async getInitialProps ({store, isServer, pathname, query}) {
	const { dispatch } = store;
	const lessonSlug = query.lessonSlug;
	const resultPromise = await dispatch(reduxApi.actions.oneLesson({ id: `slug=${lessonSlug}` }));
	return resultPromise;
}

[tomsoderlund]

OK, fixed client-side rendering too. Funny thing:

• For the pages that use the simple endpoint system (reduxApi.actions.oneLesson({ id: lessonId })), the data becomes available in this.state.
• For the pages that use the complex endpoint system (reduxApi.actions.lessons.sync()), the data becomes available in this.props.

I’m assuming it’s something in my code, but the redux(-api) code is almost identical between the pages.

[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

[thmohd]

You have access to the router directly

`function MapStateToProps(state, router) {

console.log(router)

}`

Assuming that you are using withRouter
export default withRouter(connect(MapStateToProps)(Whatever))

[te-online]

@tomsoderlund It seems like you didn't need this, but maybe you still have an answer: Is there a way to pass the req request-object within getInitialProps to redux-api so that it'd be available in the adapter? I'd like to fetch entries directly from the database on the server-side by using a custom adapter, but my database reference sits on the req object...