-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using redux-api with Next.js next-redux-wrapper for server-side rendering? #183
Comments
For serverside rendering you should push initialState on backend And what problem with componentDidMount? And what problem with next.js integration? |
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
|
I have never used next.js but according examples https://github.com/zeit/next.js/blob/master/examples/with-redux/pages/index.js static async getInitialProps ({req, res, query}) {
const { data } = await store.dispatch(rest.actions.entity.sync());
return data;
} |
I don’t even get There is a
Where
With my limited understanding of all this, I reckon I somehow need to expose Any tips? Update: I guess I have |
Progress update:
I at least get
|
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 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 |
A breakthrough: returning a promise from
|
OK, fixed client-side rendering too. Funny thing:
I’m assuming it’s something in my code, but the redux(-api) code is almost identical between the pages. |
Here’s a complete working example of Next.js, https://github.com/tomsoderlund/nextjs-express-mongoose-crudify-boilerplate |
You have access to the router directly `function MapStateToProps(state, router) { console.log(router) }` Assuming that you are using withRouter |
@tomsoderlund It seems like you didn't need this, but maybe you still have an answer: Is there a way to pass the |
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;
}
...
} |
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 insidegetInitialProps
(Next.js specific method) instead ofcomponentDidMount
(as in the example), to get the data rendered server-side along with the first page request.The text was updated successfully, but these errors were encountered: