accessing parsed url in getInitialProps

[bmcmahen]

As far as I can tell, the static getInitialProps doesn't provide a uniform way to access url params on the client and server. On the server, you can access req and parse the url yourself. On the client, we don't seem to have access to the route information within the getInitialProps function. The uses for this are fairly obvious, i think, such as loading a particular user profile based on an :id param, and so on. I'm also wondering if auth could somehow be implemented here too -- thought I'm less clear if that's the best API.

[impronunciable]

@bmcmahen Actually there is and it's featured here https://github.com/zeit/nextgram/blob/master/pages/photo.js#L5

there is a demo for that app at https://nextgram.now.sh

[bmcmahen]

But that's accessible only in the render function (or stateless functional components), and not the getInitialProps static function.

[danoc]

@bmcmahen – Have you found a way to do this?

Running into the same problem now.

When rendering client side, getInitialProps receives an object that looks like this:

{
  err: undefined,
  xhr: XMLHttpRequest
}

When rendering server side, it receives an object like this:

{
  req: IncomingMessage,
  res: ServerResponse,
}

I use getInitialProps make an API call that requires parsing the URL and grabbing a value from the query parameters. This can be done in the server side approach by accessing the url property of IncomingMessage, but AFAIK, there is no way to do this client side.

[nkzawa]

This should be a kind of bugs to be fixed. One way is to execute history.pushState before calling getIntialProps, so that you can just access window.location.

I think it's great since it's similar to what happens on popstate. First url is changed, second a component is fetched on both pushstate and popstate.

cc @rauchg

[rauchg]

I accidentally duplicated this here: #188