Можно ли реагировать, пропуская некоторые dom-узлы на гидрате, которые отличаются от серверного рендера.

Question

Если мой серверный компонент, например:

class Test extends React.Component { 
...
render() {
return <React.Fragment>
    <div> {this.props.server_data} </div>
    <div onClick={make_this_div_update_on_client}> 
         {this.state.client_staff}
    </div>
    </React.Fragment >
   }
}

и на сервере я буду рендерить с реквизитом, которые не доступны на клиенте

ReactDOMServer.renderToString(<Test server_data="Hello from server!" />)

но на фронтенде, когда я регидратирую приложение с помощью:

ReactDOM.hydrate(<Test />, document.querySelector(".app"));

Он обновляет этот узел DOM, потому что this.props.server_data пусто.

Как я могу реагировать, чтобы не трогать некоторые узлы DOM, созданные на сервере, и гидрировать только другие части дерева? Возможно ли такое поведение?

Например что-то вроде этого:

class Test extends React.Component { 
...
render() {
return <React.Fragment>
    <div donTouchThisOnClient> {this.props.server_data} </div>
    <div onClick={make_this_div_update_on_client}> 
      {this.state.client_staff} 
    </div>
    </React.Fragment >
   }
}