[React] 하이드레이션(Hydration), Next etc.

1. 하이드레이션
2. Next.JS

---

1. 하이드레이션(Hydration) ⭐️

• 하이드레이션
  • 리액트에서 서버사이드 렌더링 혹은 SSG(스태틱 사이트 제네레이션)을 실행한 HTML 결과물을 받아온 뒤, 브라우저에서 이것을 다시 리액트 트리에 맞게 파싱하는 행위
    
    
• 리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공함 ↓

/* 컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수 */
ReactDOM.render(element, container[, callback])

• 이 render함수는 컴테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해줌.
  그리고 렌더링이 완료도면 세번째 인자로 전달된 콜백이 실행되게 할 수 있음.
• 즉, ReactDomdml render메소드는 컴포넌트를 렌더링한 후에 콜백을 실행함
  
  
• 반면, ReactDOM에는 hydrate라는 메소드도 존재함 ↓

ReactDOM.hydrate(element, container[, callback])

• 메소드 모양이 render와 똑같은데, hydrate는 렌더링 하지 않고 이벤트 핸들러만 붙여줌.
  
  
• SSR(Server Side Rendering)을 해서 이미 마크업이 채워져있는 경우에는 굳이 render메소드를 사용할 필요없지만,
  hydrate로 콜백을 붙여야 함
  
  CSR(Client Side Rendering)을 하는 경우에는 타겟 컨테이너에 리액트 컴포넌트가 렌더링 된 적이 없을 것이기 때문에 render메소드를 사용, 하지만 SSR 프레임워크와 함께 리액트를 사용할 때는 hydrate 사용을 고려해야 함.
  
  

2) Hydration 과정 ⭐️

Hydration 과정

• 서버가 완성된 HTML을 내려줌. 이때 Dehydrate란 동적인 것을 정적으로 만드는 행위를 말함.
• 그리고 나서 JS가 실행되면서 리액트가 정적인 HTML과 store를 동적인 리액트 컴포넌트 트리와 store로 변환하는 과정이 일어나느데, 이걸 (Re)hydrate(정적→동적)라고 함.
• 문제는!
  • 이렇게 rehydrate가 일어나면 화면이 한 번 더 그려지는 현상이 발생하게 되는데, 리액트는 서버에서 완성된 HTML이 내려와서 이미 화면에 제대로 렌더링이 됬는지 안됬는지 모르고 자기 할 일을 하기 때문임
• 그래서 SSR을 하는 경우에는 ReactDOM의 render메소드가 아니라 hydrate메소드를 사용해야 하는 거임~
  
• 서버에서 내려준 HTML로 렌더링 된 화면은 그냥 단순히 그림일 뿐임;;(리액트가 관리하지 않는 화면이란 뜻)
  SSR을 하더라도 컴포넌트를 리액트가 관리하게 하기 위해서는 hydration은 꼭 필요한 작업 !
  
  

3) Hydration 이슈 ⭐️

• hydrate 단계에서, 
  1. 렌더링한 결과물이 어떤 컴포넌트인지 확인하고,
  2. 각 컴포넌트에 걸린 이벤트들을 실제 DOM에 걸어주는 동작을 하게 된다.
• 하이드레이션이 잘못되었을 때, 대부분 마주하는 문제들은 거의 1번 과정이 잘못되어서 일어남.
  

Q) 왜 발생하는가!?

• Next.JS에서 내부적으로 사용하는 ReactDOM.hydrate 함수는 다음과 같은 일을 함
  1. 서버에서 받아온 DOM tree와 자체적으로 렌더링한 tree를 비교
  2. 두 tree 사이의 차이(diff, difference)를 얻어낸 뒤, 자체적으로(클라이언트사이드) 렌더링 한 tree에 비교하면서 어떤 DOM이 어떻게 매칭되는지 이해함
  3. 이해한 내용에 따라 CSR 동작 실행
• 리액트는 DOM Element 단위에서만 비교하므로, className이나 id 같은 프로퍼티가 엉뚱한 엘리먼트에 잘못 붙는 현상이 발생하게 되며, 이로 인해 잘못된 스타일이 먹히는 것이 가장 일반적으로 겪을 수 있는 문제임.
• 예를 들면, 모바일에서만 sticky Header 를 렌더링 하도록 하였는데, 데스크탑 클라이언트의 Contents에 sticky Header의 스타일이 먹혀있다거나, 하는 식
  
  

Q) 어떻게 해결하는가!?

• 정상적인 해결 방법
  • 클라이언트 사이드에서만, 혹은 서버 사이드에서만 렌더링되는 로직을 제거(쉽게 말해 return null을 하지 않음)
    
    1. return null 대신 return <div />
    2. return null 대신 visibility: hidden; 또는 display: none;
    
    
• 꼼수 해결 방법
  - 이 문제가 발생하는 컴포넌트가 비동기로 받아올 특정 데이터를 꼭 필요로 한다거나, return null이 아니면 레이아웃이 깨진다거나, 컴포넌트 로직이 복잡해 위 방법으로 고치기엔 시간이 없다거나 할 때 다음과 같은 방법을 사용할 수 있음
  • 리액트가 두 컴포넌트를 어떻게든 구분할 수 있게 해주기!
    
    1. 서로 다른 엘리먼트를 사용. 특히 이렇게 렌더링이 되다 말다 하는 컴포넌트의 루트를 div, span, section, p, 같은 대체 가능한 엘리먼트로 변경
    2. 혹은, 사이 사이에 <div />가 아닌 요소를 삽입

 

2. Next 

CSR : 첫 렌더시 그냥 페이지 로드, 다시 렌더링함으로써 데이터를 불러옴. 그래서 데이터가 검색엔진에 안 걸림. 그러나 한 번에 데이터를 왕창 불러오기 때문에 페이지 이동할 때 빠름
SSR : 첫 렌더시 데이터도 서버측에서 함께 로드. 렌더 한 번이라 초기 로딩속도 빠르고, 검색엔진에 데이터들이 걸림. 그러나 페이지 불러올 때마다 중복 데이터 불러와야 해서 페이지 이동시 느림.

• CSR의 경우, 초기에 페이지가 일단 렌더가 된 이후, 클라이언트에서 데이터를 불러오며 다시 한 번 렌더링
  
• 한편, SSR을 수행하는 경우, 처음 렌더가 될 때 서버 측에서 데이터도 함께 가져와서 그려줌.
  
  
• 그렇기 때문에 SSR의 경우, 한 번에 렌더링이 되기 때문에 초기 로딩속도가 빠르지만, 
  페이지를 넘길 때마다 중복되는 데이터일지도 서버측에서 다시 불러와줘야하기 때문에 페이지 과부하가 걸릴 위험성이 CSR에 비해 큼.
  
  
• 그럼에도 SSR을 사용하는 이유는 페이지가 로딩될 때 데이터도 동시에 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문임
• 따라서 첫 로드시 빈 상태인 CSR과 달리 검색엔진 최적화에 효과적이다~
  
  

1) Next의 렌더링 수행 방식  ⭐️

• Next.js는 SSR을 기반으로 하지만, 페이지가 로드된 이후엔 React에서 CSR을 이용하는 방식을 차용함

1. 페이지는 서버가 그리고
2. pages/안에 폴더를 만들면, 해당 라우팅의 페이지들은 서버측에서 먼저 로드해줌(SSR 기반으로 서버에 사전에 저장된 렌더트리의 HTML 로드 → 사전 렌더링(pre-render))
3. 페이지가 그려진 이후에 페이지 내부에서 동적인 데이터를 패치하는 과정(axios,swr, fetch, XMLHttpRequest)은 CSR의 방식을 따름.
   ! 이때의 데이터들은 일단 페이지가 로드된 이후에 클라이언트 측에서 다시 렌더되며 불러와지기 때문에 SEO에 걸리지 않음.
   
   

• 만약 페이지가 로드될 때 함께 데이터가 패칭되어야 하는 상황이라면(pre-rendering)
• next.js의 데이터 패칭 방식 (getInitialProps, getStaticProps, getStaticPath, getServerSideProps)을 이용해 첫 렌더에 데이터가 패칭될 수 있도록 처리를 해주어야 함 (참고)
  
  
  
• Q) Next를 사용하는 이유 ⭐️
• ① 사전 렌더링 및 서버 사이드 렌더링
  - 서버 사이드 렌더링 기능을 제공해 클라이언트 사이드 렌더링 환경보다 빠른 렌더링을 불러올 수 있음
  
  ② Hot Code Reloading 지원
  - Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드
  
  ③ 자동 코드 분할
  - 코드의 모든 가져오기가 번들로 묶여 각 페이지와 함께 제공됨. 결과적으로, 불필요한 코드가 페이지에 로드되지 않게 됨
  
  ④ 설명 필요X
  - Next는 기본적으로 웹팩과 바벨을 사용함. 이미 서버 사이드 렌더링 및 개발에 필요한 설정이 되어 있으므로 빠르게 개발 시작 가능
  - 사용하고 싶은 플러그인이 있다면 손쉽게 추가해 사용할 수 있도록 지원함
  
  ⑤ 타입스크립트 내장
  
  ⑥ 파일기반 네비게이션 가능
  - 리액트에서는 `react-router`라는 라이브러리를 사용해 라우팅 설정을 해줘야함. 그로 인해 페이지의 경로에 대해 직접 설정을 해줘야 함
  - 하지만 Next는 파일 시스템 기반 라우팅을 사용해, 폴더의 경로에 따라 페이지이 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점
  
  
• Q) Next를 구성하는 기본 설정 파일은? ⭐️
• A) _app.jsx, _document.jsx, _error.jsx, 404.jsx
  • _app.jsx
    - App 컴포넌트는 모든 페이지의 공통 페이지 역할
    - App 컴포넌트를 이용하여 모든 페이지들을 초기화하여 다음과 같은 역할을 할 수 있음
    - 페이지들의 공통된 레이아웃, 페이지를 탐색할 때 상태 유지, 추가 데이터를 페이지에 주입, 글로벌 CSS 추가
     
    
  • _document.jsx
    - 일반적으로 응용 프로그램 <HTML>및 <body> 태그를 보강하는데 사용
    - 도큐먼트를 이용하여 <title>, <description>, <meta>등 프로젝트의 정보를 제공하는 HTML 코드를 작성할 수 있고,
    - 폰트나 외부 api, cdn 등을 불러오도록 할 수 있음
    - 또한 CSS-in-JS의 서버 사이드 렌더링을 위한 설정을 할 때 사용
    - Head 태그에 meta 태그를 추가하여 해당 프로젝트에 대한 정보를 추가할 수 있고, 구글 폰트 등에서 제공하는 폰트를 link 로 불러와 전역으로 적용시킬 수 있음
    
    
  • _error.jsx
    - next에서 빌드 된 프로덕션 환경에서 에러가 발생하면 에러 페이지로 넘어감
    - 따로 라우팅 경로를 설정하지 않더라도, 빌드 된 프로덕트 환경에서 에러가 발생한다면 에러 페이지로 자동적으로 넘어감
    - 추가적으로 에러 상황에 따라서 500, 404 등도 추가할 수 있음

/* pages/_app.jsx */

import Header from '../components/Header';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <Header />
      <Component {...pageProps} />
      <style jsx global>
        {`
          body {
            margin: 0;
          }
        `}
      </style>
    </>
  );
};

export default MyApp;


/* pages/_document.jsx */

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ko">
        <Head>
          <meta name="title" content="깃허브 레포지토리" />
          <meta name="description" content="깃허브 레퍼지토리 리스트입니다" />
          <link
            href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700&display=swap&subset=korean"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;


/* pages/_error.jsx */

const Error = () => {
  return (
    <div>
      <p>에러가 발생했습니다</p>
    </div>
  );
};

export default Error;