Example: Passing data from server through API

[unregistered]

As requested by @arunoda here is an example of how to pass data in the js api through the query params. Relates to Issue #1117

I opened this against the master branch but let me know if it should go against v3 beta

[arunoda]

Since this is an example, may be it's better to do this inside the "server.js" to keep it simple and short.
And I think we don't need to use res.format as well.

do something like this:

server.get('/item', (req, res) => {
  const itemData = api.getItem()
  return app.render(req, res, '/item', { itemData })
})

[unregistered]

The res.format is to support isomorphic rendering of that page so it works when linked to. I could also mount 2 separate routes, one at /item which renders the html, another at maybe /_data/item which sends the json. But I've found that doing it in the same route method is more concise. Seems to me that it would be necessary, but let me know if I'm misunderstanding something.

I can move the route to server.js though, and leave how they break things off up to the reader.

[arunoda]

Then may be you need to expose a different route for the data.

[unregistered]

Updated the CR. Is that what you had in mind?

[arunoda]

This is great. Could you send this against the v3-beta branch?

[unregistered]

@arunoda here it is against v3-beta, though there's another change in package.json that you'd have to verify. If it's not I can open a new PR with v3-beta on my fork. Edit: nevermind, it looks like that will go away with a merge conflict resolve.

[unregistered]

Hi @arunoda I've noticed a downside to doing it this way, which is that next inserts all the data passed into query into __NEXT_DATA__ in the SSR'd output:

<script>
__NEXT_DATA__ = {"props":{"item":{"title":"Now","subtitle":"Realtime global deployments","seller":"Zeit"}},"pathname":"/item","query":{"itemData":{"title":"Now","subtitle":"Realtime global deployments","seller":"Zeit"}},"buildId":1500535262707,"buildStats":null,"assetPrefix":"","err":null}

This can be undesirable when injecting a large amount of data that's used incidentally during rendering, or passing sensitive data the user should not be able to see. Any advice?

[unregistered]

Hi @arunoda do you have any thoughts on my latest comment regarding leaking data in the HTML?

[pruhstal]

@unregistered I think this is because:

https://github.com/zeit/next.js/blob/1424b84c98e5e8e2efc279d1790c49c970f21eca/server/render.js#L98

is calling this: https://github.com/zeit/next.js/blob/canary/lib/utils.js#L49

Which checks to see if there's a getInitialProps method attached on the component.

If it is it'll spread those props into __NEXT_DATA__.

If you could somehow call res.finished right after this:

https://github.com/zeit/next.js/pull/2594/files#diff-3f14957c7ec2d722cdf540ed20059dd4R19

it should hopefully not inject those props (but I haven't tried it yet) per this:

https://github.com/zeit/next.js/blob/1424b84c98e5e8e2efc279d1790c49c970f21eca/server/render.js#L66

If not, then maybe @arunoda knows, however, this is a good example and I'd like to see it get added!

EDIT: this looks like it does something similar: https://github.com/zeit/next.js/blob/18f8ab392ae2a93140df2545f537c544c1b88241/examples/with-apollo-auth/lib/withData.js#L42

[danielbayerlein]

Any news?

[unregistered]

@danielbayerlein we currently use a variation of this on our site, except instead of passing data through query, we mutate the req object to attach ssrData. This has the benefit of avoiding the serialization issue mentioned above.

[timneutkens]

Will merge when the tests pass 🙏

[danielbayerlein]

@timneutkens Thank you!!! 💚