Slide 65
Slide 65 text
Browser
...
// Initialization data includes parameters and content data used
during SSR
const jsonTag = document.getElementById('xxx-json’);
const initialData = JSON.parse(jsonTag.textContent);
const props = {
...initialData.shpHeader?.props,
initialData
};
//For operation without JS version update, hydrate is not used
// hydrate is based on the assumption that the DOM structure is
the same for SSR and CSR
const container = this.children[0];
container.innerHTML = '';
ReactDOM.render(
React.createElement(ShpHeader, props), container);
...
...
const container =
document.createElement('div’);
const props = {
hoge: this.getAttribute('hoge')
};
const component =
React.createElement(ShpHeader, props);
ReactDOM.render(component, container);
this.appendChild(container);
...
CSR Isomorphic
Reactコンポーネント描画方式の変更