Comments (14)
I don’t think just adding a sentence to the blog post is enough. Originally, we planned to have a whole separate post about this, but @sebmarkbage didn’t find the time to write it.
This is going to keep confusing people over and over, and this behavior should be described somewhere in detail, together with the rationale for it.
from react.dev.
This issue is all yours! 😄
I've added an "in-progress" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.
Cheers!
from react.dev.
@bvaughn Can I work on this issue?
from react.dev.
We should probably do a post after releasing 16.1.0 that introduces the “suppress warning” feature and explain the new behavior in more detail there. Then we can link to that post from the hydrate
API doc.
from react.dev.
@gaearon I totally agree on writing a blog post. I'm just updating our app to 16 and I ran into the SSR breaking design when generated markup does not match.
from react.dev.
@gaearon Can you please update the title and description of this issue to be more reflective of what you're looking for then? (Or alternately, just open a new issue)
from react.dev.
I'm not sure how to update the title. It still describes what I want to happen. I just don't think adding a sentence that's easy to miss to release notes counts as documenting a fundamental change in behavior which hasn't ever changed before (and which people often rely on).
My suggestion is in #25 (comment) but perhaps there are other solutions? I don't want to prescribe a particular one. For new users, it should be something that is easily visible next to our hydrate API reference. For old users, it should be something they can point to and share to educate the community (blog post sounds like a good format). It should include an explanation for why we changed this, and the exact things you can and cannot rely on.
from react.dev.
For example, my blog post about attributes provided such rationale and migration advice for the attribute change. It seems like we're not getting issues about the new behavior which means it was well understood.
On the other hand we've gotten five or six issues about SSR behavior. Even with that new sentence, it is too easy to miss or get confused. So it probably deserves its own blog post.
I'm not saying this issue is necessarily actionable for someone else. I see it most as todo for ourselves. No one has more context on this than us. But I want to keep it open until we fix it.
from react.dev.
Sure, the title's fine I guess. It just seems that I incorrectly summarized what we're looking for and it seems like you have a better idea than I do, and so it may save external contributors time and confusion if we update the description to more clearly reflect what we're looking for. 😄
Even if it's just "a core team member should write a blog post".
from react.dev.
I took a stab at updating the description and the labels.
from react.dev.
I've been trying to understand what it means for the server & client-side mismatch to be dangerous:
it’s dangerous to have missing nodes on the server render as this might cause sibling nodes to be created with incorrect attributes.
Is there any test or example to show an incorrect rendering?
from react.dev.
Just stumbled into this issue in my nextjs app.
Took me some time to find the original discussion and then this issue.
Any news about the blog post?
from react.dev.
I think this issue can be closed now as the docs on hydrate()
seems to document this behavior well.
from react.dev.
the description for hydrate in the docs does seem to touch on this point, but would be a lot helpful if it talks about some of the pitfalls that can happen because of this. In my case, due to conditional rendering, the order of components was different on server vs client and while patching up hydrate
changed the dom structure on the client
from react.dev.
Related Issues (20)
- [Mistake]: React 19 says that startTransition callback must be synchronous. It is not true. HOT 1
- React Fiber documentation not present in the current Docs
- [Bug]: ERR_SSL_PROTOCOL_ERROR on Translations Page
- [Suggestion]: Update the starter code in sandbox of Tic tac toe game tutorial
- [Suggestion]: Improve code in Tic-Tac-Toe demo HOT 3
- [Suggestion]: How to avoid null checks when initializing useRef later
- Doc not found: https://react.dev/contributing/design-principles.html
- [Bug]: No Mention of RFCs (or ANY Way to Provide Feedback) on Site HOT 1
- React components should be pure, not "idempotent" HOT 2
- page does not exist HOT 1
- Fetching data with Effects
- [Bug]: The sandpack bundler aint working HOT 1
- [Bug]: Missing explanation
- [Suggestion]: Reference: component prop list shoud be more readable
- [Suggestion]: Broken link in README.md for react-html package HOT 4
- [Suggestion]: items in the sidebar tree should collapse on clicking.
- [Typo]: Minor typo in Updating Objects in State HOT 2
- Several pages not found in Prerequisites at React Fiber Architecture.
- Link in react console warning is not found
- Broken warning URL in console HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.dev.