[질문]React에서 기본적으로 하는 랜더링방식?

[Chominsu98]

오늘 강의를 하시면서 hydrate관련된 내용을 해주시다가 Universal Rendering을 말씀해주셨는데
그럼 리액트에서는 기본적으로 hydrate를 사용해서 랜더링을 진행해온건가요???
아니면 원래는 render()이렇게 진행하는데 상황에 따라서 hydrate()를 선택해서 바꿀 수 있는건가요??

그리고 만약 hydrate()가 이렇게 ReactDomServer를 통해서 진행할 수 있게 되는 것이면
Next.js에서와 그럼 React가 무슨차이점이 생기는지도 궁금해요🙋‍♂️ 결국 둘다 hydrate를 쓰는건데
Next를 써야하는 이유가 무엇인지 좀 아직 처음이라 헷갈리네요 ㅠㅠ

[SaeWooKKang]

리액트는 SPA 기반의 CSR입니다. 웹에 요청을 보내면 서버에서 html 파일을 응답해주고, 브라우저의 렌더링 엔진이 파싱합니다. 파싱중 script태그를 만나면 js 소스를 요청하고 응답이 완려되면(html5의 async defer키워드도 찾아보심이..) 자바스크립트엔진이 파싱하며 DOM에 React를 mount합니다. 그래서 SSR 방식과 달리, CSR 방식은 TTV == TTI 인겁니다.
리액트도 Universal Rendering을 지원하지만, 그렇게 구현해서 쓸바엔 Next 프레임워크에서 지원을 해주기에 쓰는것 같습니다. Next는 프레임워크고, React는 라이브러리인데 어떤 기능이 추가됐는지 찾아보시면 좋을것 같아요:)
틀린 부분 말씀해주세요!!

[wgnator]

저도 요새 React 18을 공부중인데, 민수님 말씀대로 React 18은 서버/클라이언트에 모두 사용하여 SSR을 구현할 수 있고 hydration 을 지원하며, Suspense/lazy로 바운더리를 지정하는 것으로 hydration 단위를 쉽게 정할 수 있습니다. 물론 이전 React는(아마도 16정도 까지는) SSR에 대한 기능이 없었던 것으로 알고 있습니다. 심지어 유저가 어떤 컴포넌트와 먼저 상호작용 하는지에 따라 hydration 순서마저 알아서 바뀝니다. 자세한 내용은 다음 깃헙의 React 18 Discussion 에 잘 설명되어 있습니다:
reactwg/react-18#37

vercel/next.js 깃의 코드를 들여다 보면 Next.js 도 사실상 React 의 hydration 을 그대로 사용하고 있는 것으로 보입니다. (React 가 hydration을 지원하기 전에는 어떤 방식으로 했는지 궁금하네요)
packages/next/client/app-index.tsx

...
export function hydrate() {
  const reactEl = (
    <React.StrictMode>
      <Root>
        <RSCComponent />
      </Root>
    </React.StrictMode>
  )

  const isError = document.documentElement.id === '__next_error__'
  const reactRoot = isError
    ? (ReactDOMClient as any).createRoot(appElement)
    : (React as any).startTransition(() =>
        (ReactDOMClient as any).hydrateRoot(appElement, reactEl)
      )
  if (isError) {
    reactRoot.render(reactEl)
  }
}
...

React 18 이 올해 정식 출시되어서 서서히 Next.js 를 굳이 써야 하는지에 대한 글들이 올라오고 있는 것 같습니다. 하지만 React 18로 같은 기능을 구현하려면 backend 를 따로 구현해야 하는 등 많은 작업이 따르겠지요. Next만의 장점이라면 쉽게 head 태그를 추가하여 SEO 를 해주는 점, font/image 로딩 최적화, 직관적인 라우팅, SSG 와 ISG, Vercel 에서 제공하는 서버를 이용하면 쉽게 서버까지 셋팅을 할 수 있다는 점이겠네요. 물론 SEO 같은 경우 helmet.js 등으로 커버할 수 있어서 사실상 SSG나 ISG가 필요하지 아니면 React 18 로도 충분히 빠른 웹사이트를 만들 수 있는 것 같습니다. Next.js 는 기본으로 이러한 아키텍처를 제공해 주니 초기 스타트업 처럼 개발 속도가 무엇보다 중요한 상황에서는 매우 유용할 것 같습니다.

저도 공부중이어서, 틀린내용 있으면 지적 부탁드립니다!

[Chominsu98]

두 분 다 친절한 답변 너무 감사드립니다!리액트는 그동안 자주 써왔는데 next를 배우면서 React18과의 차이점을 배우다보니 뭔가 큰 차이가 없다고 느껴졌는데 결국에는 이미구현된 프레임워크의 특징을 쓸수있다는게 결론이군요!

[starkoora]

@Chominsu98

그럼 리액트에서는 기본적으로 hydrate를 사용해서 랜더링을 진행해온건가요???
아니면 원래는 render()이렇게 진행하는데 상황에 따라서 hydrate()를 선택해서 바꿀 수 있는건가요??

기본적으로는 render를 하고, 서버에서 SSR을 해서 보내줬을 때만 개발자가 hydrate로 적용해주는 겁니다. render를 그대로 사용하면 서버측에서 받아온 결과물을 버리고 새로 화면을 그리게 되니까요.

그리고 만약 hydrate()가 이렇게 ReactDomServer를 통해서 진행할 수 있게 되는 것이면
Next.js에서와 그럼 React가 무슨차이점이 생기는지도 궁금해요🙋‍♂️ 결국 둘다 hydrate를 쓰는건데

이 부분은 위에서 잘 설명을 해주셨으니 생략을 하고, 하나만 첨언을 하자면 Next.js를 사용하면 기본적으로 SSR을 하게 됩니다. 컴포넌트에 콘솔을 찍어보시면 무조건 서버측 로직을 한번 돌고, 그 다음 클라이언트 쪽에서도 로직이 돌죠. 따라서 hydrate를 할 것이라고 생각해볼 수 있습니다.