Next.js - understanding getInitialProps
The answer is NO
If you use Apollo with Next JS you will not have to use getInitialProps
on each page to get some initial data rendered server side. The following configuration for getInitialProps
is enough for all the components to render out with their respective queries if they have <Query>
components in them
static async getInitialProps({ Component, ctx }) { let pageProps = {}; if (Component.getInitialProps) { pageProps = await Component.getInitialProps(ctx) } // this exposes the query to the user pageProps.query = ctx.query; return { pageProps }; }
My issue and why I wasnt seeing any server side rendering is that Heroku or Now wouldnt perform SSR with a public URL ie my-app.heroku.com. To resolve this I purchased and applied a custom URL in Heroku and it worked. Along with a custom URL I had the following configuration in my Apollo config
const request = (operation) => { operation.setContext({ fetchOptions: { credentials: 'include' }, headers: { cookie: headers.cookie } }); };
This completely resolved it and now I have SSR without the pain of having to manually set getInitialProps
on each page
Hope this helps someone