Bug: Server-Side-Render bug

Code:

function App() {
  if (typeof window === 'undefined') {
    return (
      <div id="your-comp-id-server">
        <div id="child-id-server">server</div>
      </div>
    )
  }
  return (
    <div id="your-comp-id-client">
      <div id="child-id-client">client</div>
    </div>
  )
}

// hydrate
ReactDOM.hydrate(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

React version: 17.0.1

Steps To Reproduce

1. clone example
2. run example

Link to code example:

https://github.com/fall-wind/may-react-ssr-bug

The current behavior

The expected behavior

<div id="your-comp-id-client">
  <div id="child-id-client">client</div>
</div>

other information

source code:

https://github.com/facebook/react/blob/v17.0.1/packages/react-dom/src/client/ReactDOMHostConfig.js#L650-L663

function simpleCheckNodeType1SomeValueIsEqual(nodeType, instance, props) {
  if (nodeType !== 1) {
    return true
  }
  // just test
  var checkList = ['id']
  for (var i = 0; i < checkList.length; i++) {
    var key = checkList[i]
    // just test id different
    var domVal = instance[key] || ''
    var propsVal = (props && props[key]) || ''
    if (domVal !== propsVal) {
      return false
    }
  }
  return true
}

function canHydrateInstance(instance, type, props) {
  if (
    instance.nodeType !== ELEMENT_NODE ||
    type.toLowerCase() !== instance.nodeName.toLowerCase() ||
    !simpleCheckNodeType1SomeValueIsEqual(instance.nodeType, instance, props)
  ) {
    return null;
  } // This has now been refined to an element node.


  return instance;
}

l think just check nodeType and type is not enough. May need to check some properties.

[eps1lon]

Sorry, there is no warning in the console. you can run my demo to tell me what wrong.

Using yarn dev I can see a warning though it’s slightly different because you hydrated an empty container. Right now you should see

index.js:1 Warning: Expected server HTML to contain a matching <div> in <div>.
    at div
    at App

But this is because you’re not actually sending the server-rendered markup (see “view page source”).

From what I can tell yarn dev is not actually using the server. To use the server I have to run yarn build; dev:build-server; yarn dev:start; first and visit localhost:3006. There you don’t see a warning because that page uses the production build of React which strips a lot of warnings to save bundle size.

If I copy & paste the server rendered output into public/index.html I get the warning described in https://github.com/facebook/react/issues/20414#issuecomment-741849996.

You probably want to fix your dev setup so that it uses the server-rendered output. However, this is out of scope for this issue tracker so please check out https://reactjs.org/community/support.html or your favorite support channel.

[fall-wind]

Sorry, what’s the bug here? The reactroot data attribute?

Sorry, “The expected behavior” The information I provided is not very sufficient.

The expected behavior: div id “your-comp-id-server” should be “your-comp-id-client”; div id “child-id-server” should be “child-id-client”; text “client” is my expected behavior.