Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add note about NEXT_DATA hydration #37480

Merged
merged 6 commits into from
Jun 6, 2022

Conversation

MaedahBatool
Copy link
Contributor

@MaedahBatool MaedahBatool commented Jun 6, 2022

Missing documentation around NEXT_DATA hydration when using getServerSideProps(). This PR warn users that the result of getServerSideProps()/getStaticProps is also available on the client-side due to React Hydration so they should not use any sensitive information in the props.

Bug

  • Related issues linked using fixes number
  • Integration tests added
  • Errors have helpful link attached, see contributing.md

Feature

  • Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
  • Related issues linked using fixes #number
  • Integration tests added
  • Documentation added
  • Telemetry added. In case of a feature if it's used or not.
  • Errors have helpful link attached, see contributing.md

Documentation / Examples

  • Make sure the linting passes by running pnpm lint
  • The examples guidelines are followed from our contributing doc

Copy link
Member

@ijjk ijjk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can expand on this and potentially have a separate section specifically about hydration although this seems like a good initial note to have, thanks!

@ijjk ijjk changed the title Add docs about NEXT_DATA hydration Add note about NEXT_DATA hydration Jun 6, 2022
@kodiakhq kodiakhq bot merged commit f7ac942 into vercel:canary Jun 6, 2022
@MaedahBatool
Copy link
Contributor Author

I think we can expand on this and potentially have a separate section specifically about hydration although this seems like a good initial note to have, thanks!

Yes, that's a nice idea. We can def. work something around this.

@@ -68,6 +68,8 @@ For the initial page load, `getInitialProps` will run on the server only. `getIn
- `getInitialProps` can **not** be used in children components, only in the default export of every page
- If you are using server-side only modules inside `getInitialProps`, make sure to [import them properly](https://arunoda.me/blog/ssr-and-server-only-modules), otherwise it'll slow down your app

> Note that irrespective of rendering type, any `props` will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://reactjs.org/docs/react-dom.html#hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep the format consistent with other notes. Note:

I think we can drop "that irrespective of rendering type"

Note:* Any props returned in getInitialProps will be passed to the...

"Make sure that you don't pass any" to just "Don't pass any..."

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants