search

beecomci / today_i_learned

0 stars 0 forks source link

[React-Basic-Hooks] 4. Render React Element(ReactDOM / ReactDOMServer) #8

Open beecomci opened 3 years ago

beecomci commented 3 years ago

Render React Element(ReactDOM / ReactDOMServer)

React Element === plain javascript object

ReactDOM #

ReactDOM.render(
  reactElement, // 그릴 element
  containerDOM, // 실제 그려질 DOM 전달
  [callback] // render/update 후에 호출될 함수
)
function tick() {
  // 한번 만들면 immutable해서 변경 불가능 -> 그럼 매번 time element를 새로 만들어주면 됨
  const time = (
    <div>
      <h1>current time: {new Date().toLocaleTimeString()}</h1>
    </div>
  );

  ReactDOM.render(
    time,
    document.querySelector('#app')
  )
}

tick(); // 1초 뒤에 뜨니까 처음부터 보이도록
setInterval(tick, 1000);

// 실제로는 props를 매번 넘기거나 내부 state를 변경하지, 이렇게 매번 render() 호출하지 않음 !!! 
ReactDOM.hydrate(
  reactElement,
  containerDOM,
  [callback]
)
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import App from '../defaultApp/App';

const root = document.body.querySelector('#app');

root.innerHTML = ReactDOMServer.renderToString(<App />);

/* SSR에서 온걸 CSR에서 그림
** SSR 결과를 innerHTML 했을 때 사용자가 보는 dom은 다 그려졌고,
** SSR은 서버에서 결과를 string으로 받고, 그래서 사용자 이벤트 같은 것들은 미동작. 
** hydrate는 CSR에서 render를 하면서 마크업에서 이벤트를 붙여주고 동작하게끔 하는 역할 
*/
setTimeout(() => {
  ReactDOM.hydrate(<App />, root, () => console.log('rendered'));
}, 3000)

ReactDOMServer #

stream api

🛑 server only: UTF-8 encoding 된 byte stream을 return 한다.

beecomci commented 3 years ago

Ref.

SSR (Server Side Rendering)

image

CSR (Client Side Rendering)

image

실제로 사용하면 ?

image

SEO (Search Engine Optimization)

왜 SSR에서는 SEO 지원이 쉬울까?

Ref.

SPA (Single Page Application)

그러면 CSR === SPA ?

그러면 React는 SPA ? CSR ?

beecomci commented 3 years ago

Isomorphic Javascript (Universal Javascript)

Isomorphic Javascript with SSR

장점

단점

Ref.