ReactDom.hydrate удаляет SSR DOM - PullRequest
Новая
       12

ReactDom.hydrate удаляет SSR DOM

0 голосов
/ 27 февраля 2020

В официальных документах написано React will attempt to attach event listeners to the existing markup. Поэтому я подумал, что если я использую ReactDOM.hydrate, он будет только добавлять события. 

// server.js
app.get('/', (req, res) => {
    const html = fs.readFileSync(path.resolve('./build/index.html'), 'utf8');

    return res.send(
    html.replace(
      '<div id="root"></div>',
      '<div id="root">hihi</div>',
    ),
  );
}

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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


// App.jsx
import React from 'react';
import styled from 'styled-components';

export default () => {
  return <Title}>Hi !</Title>;
};

const Title = styled.h1`
  color: blue;
`;

Однако, когда работает гидрат, он удаляет DOM, созданный SSR, и заменяет его на DOM созданный CSR (сценарий реакции)

enter image description here

Почему это происходит?

1 Ответ

0 голосов
/ 27 февраля 2020

Это не так, как работает React SSR. Вы должны были также отреагировать на стороне сервера и, вероятно, для этого вы можете использовать renderToString на стороне сервера. Таким образом, реакция будет знать, что это обработанный сервером узел реакции, и он нуждается в гидратации на стороне клиента.

...