Next.js - understanding getInitialProps Next.js - understanding getInitialProps reactjs reactjs

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