리액트는 UI 렌더링을 위한 라이브러리이지만 대부분의 앱에는 백엔드 서버가 필요하다.
서버렌더링을 잘 이용하면 애플리케이션의 성능, 이식성 보안을 향상시킬 수 있다.
1ReactDOMServer.renderToString(element)
서버에서는 브라우저에서 사용할 수 없는 많은 자원을 사용할 수 있고 브라우저보다 안전하다.
1hydrate(element, container[, callback])
React 에서 DOM 관련 메서드를 제공하는 패키지로
1render()
1hydate()
render() : 이 함수는
1container
hydrate() : render() 와 기본적으로 동일하게 작동하지만, ReactDOMServer 가 렌더링될 때
1container
1hydrate(수화)
1renderToString()
1renderToStaticMarkup()
1const root = document.querySelector('#root')2ReactDOM.render(<App name='Saeloun' />, root)
1// 클라이언트에서 스크립트가 로딩되기 전의 상태2<html>3<head></head>4<body>5<div id='root'></div>6</body>7</html>
1// index.js2ReactDOM.hydrate(<App name='Hello' />, document.getElementById('root'))34// server.js56app.use('/', (req, res, next) => {7fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {8if (err) {9console.error(err)10return res.status(500).send('Some error happend')11}12return res.send(ReactDOMServer.renderToString(<App name='hello' />))13})14})1516// App.js1718export default function App(props) {19return <div>Hello {props.name}</div>20}2122// 클라이언트 사이드에서 스크립트가 로딩되기 전의 상태2324;<html>25<head></head>26<body>27<div id='root'>28<h1>Hello Saeloun!</h1>29</div>30</body>31</html>
CSR 은 자바스크립트가 완전히 로드되기 전에 사용자가 볼 수 있는 건 빈 화면 뿐이다.
SSR 에서는 서버에서 리액트 컴포넌트를 HTML 로 미리 렌더링하여 브라우저에 보낸다.
HTML 은 인터랙티브한 기능은 없지만 적어도 자바스크립트가 로딩되는 동안 페이지 레이아웃은 볼 수 있다
자바스크립트 로딩이 완료되면 리액트는 HTML 에 이벤트 핸드러를 연결시키는 작업을 한다.
이렇게 컴포넌트를 랜더링하고 이벤트 핸들러를 연결하는 과정을
1Hydaration
이는 '마른' HTML에 상호작용과 이벤트 핸들러로 '물'을 주는 것과 같다.
하이드레이션 후, 비로소 앱은 인터랙티브 해진다.
출처