Geony's Devnotes
Search
⌘ + K

리액트와 서버

Geony
2022-09-16
react
dev
coding

리액트와 서버

서버를 이용한 리액트 설계

  • 리액트는 UI 렌더링을 위한 라이브러리이지만 대부분의 앱에는 백엔드 서버가 필요하다.

  • 서버렌더링을 잘 이용하면 애플리케이션의 성능, 이식성 보안을 향상시킬 수 있다.

  • 1
    ReactDOMServer.renderToString(element)
    메서드를 사용하면 UI를 서버에서 렌더링할 수 있다.

  • 서버에서는 브라우저에서 사용할 수 없는 많은 자원을 사용할 수 있고 브라우저보다 안전하다.

  • 1
    hydrate(element, container[, callback])
    를 이용하면 클라이언트와 서버 쪽 렌더링을 함께 사용할 수 있는 하이브리드 경험이 가능하다.

ReactDOM 이란 ?

  • React 에서 DOM 관련 메서드를 제공하는 패키지로 

    1
    render()
    와 
    1
    hydate()
    등을 메서드로 제공한다.

  • render() : 이 함수는 

    1
    container
    안의 DOM 에 리액트 엘리먼트가 렌더링 된 후, 해당 컴포넌트에 대한 참조값을 제공한다.

  • hydrate() : render() 와 기본적으로 동일하게 작동하지만, ReactDOMServer 가 렌더링될 때 

    1
    container
    를 
    1
    hydrate(수화)
    하기 위해 사용된다. 리액트는 이벤트 리스너 등을 기존 마크업에 연결하여 동적 기능을 채워 넣는다.

ReactDOMServer

  • 정적 파일에 컴포넌트를 렌더링한다.
  • 1
    renderToString()
    과 
    1
    renderToStaticMarkup()
    함수들은 서버와 브라우저 모두에서 사용할 수 있다.

CSR (클라이언트 사이드 렌더링)

  • CSR은 자바스크립트를 이용해 브라우저 상에서 페이지를 직접 렌더링한다.
  • 모든 로직과 데이터 페칭, 템플리팅, 라우팅 등이 클라이언트 쪽에서 처리된다.
  • CSR로 렌더링할 때 사용자는 페이지가 완전히 로딩될 때까지는 아무것도 표시되지 않은 빈 화면을 보게 된다.
  • 이는 사용자 경험에 안 좋은 영향을 끼치게 되어 페이지 이탈을 유발하고
  • 웹 크롤러 또한 빈 사이트를 인덱싱하지 못해 SEO 에도 좋지 않다.

SSR (서버 사이드 렌더링)

  • SSR 을 이용하면 페이지가 완전히 렌더링되기 이전에 먼저 서버를 이용해 앱의 HTML 데이터를 추출하여 브라우저에게 보내준다.
  • DB에서 데이터를 가져오고 HTML 페이지를 만들고 클라이언트에 보내는 이 모든 프로세스가 몇 밀리초 안에 벌어진다.
  • 따라서 사용자는 브라우저 화면을 열고 페이지를 보기까지 로딩 시간을 거의 느끼지 못할 것이다.
  • 다만 자바스크립트가 로드 되기 이전이므로 클릭과 같은 동적 기능은 이용할 수 없다.
  • 이는 사용자 이탈을 방지하고 SEO에도 좋다.

Hydration

  • render() 와 유사하게 작동하지만 빈 DOM 에 렌더링하는 대신, 모든 컴포넌트가 HTML 로 렌더링된 DOM에 내용을 채워넣는 방식이다.

CSR의 경우

1
const root = document.querySelector('#root')
2
ReactDOM.render(<App name='Saeloun' />, root)
1
// 클라이언트에서 스크립트가 로딩되기 전의 상태
2
<html>
3
  <head></head>
4
  <body>
5
    <div id='root'></div>
6
  </body>
7
</html>

SSR 의 경우

1
// index.js
2
ReactDOM.hydrate(<App name='Hello' />, document.getElementById('root'))
3


4
// server.js
5


6
app.use('/', (req, res, next) => {
7
  fs.readFile(path.resolve('./build/index.html'), 'utf-8', (err, data) => {
8
    if (err) {
9
      console.error(err)
10
      return res.status(500).send('Some error happend')
11
    }
12
    return res.send(ReactDOMServer.renderToString(<App name='hello' />))
13
  })
14
})
15


16
// App.js
17


18
export default function App(props) {
19
  return <div>Hello {props.name}</div>
20
}
21


22
// 클라이언트 사이드에서 스크립트가 로딩되기 전의 상태
23


24
;<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 에 이벤트 핸드러를 연결시키는 작업을 한다.

  • 이렇게 컴포넌트를 랜더링하고 이벤트 핸들러를 연결하는 과정을 

    1
    Hydaration
    이라고 한다.

  • 이는 '마른' HTML에 상호작용과 이벤트 핸들러로 '물'을 주는 것과 같다.

  • 하이드레이션 후, 비로소 앱은 인터랙티브 해진다.

Hydrate 의 과정

  1. 앱의 정적인 버전을 렌더링한다. (이를 통해 페이지가 완전히 로딩되기 전에 무언가를 사용자에게 보여줄 수 있다.)
  2. 동적 자바스크립트를 요청한다.
  3. 정적 콘텐츠를 동적 콘텐츠로 교체한다.
  4. 사용자가 콘텐츠 각 부분을 클릭하는 이벤트가 이제 정상 작동한다.

Hydration 사용의 장점

  1. 최초 로딩 시간 단축으로 좋은 사용자 경험
  2. SEO 향상

출처

  • Learing React
  • https://velog.io/@hyemin916/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%B1SSR%EC%9D%98-Hydration-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
path: /