getInitialProps

So, learnt something today.

With nextjs “getInitialProps” will run server-side when the page first loads, but then run client-side on reloads (i.e. if you navigate back to it).

This means my website breaks if you go “back” to a search results page, as it tries to hit the headless WordPress back-end – which it can’t. So it errors out, and you get this lovely message:

Application error: a client-side exception has occurred (see the browser console for more information).


Solution – put the WordPress call behind an api, and then either always hit that api from “getInitialProps”, or work out whether you’re running client side or server side, as below:

FilteredPage.getInitialProps  = async(ctx) => {
  var bookmarks;

  if(global.window){
    bookmarks = await fetch(`/api/bookmarks`).then((result) => result.json());
  } else {
    bookmarks = await getBookmarks();
  }

  return {
      bookmarks
  };
}

#nextjs