✅ 문제

• Next Js로 개발하던 중 mui를 사용하자 오류가 발생함
• 처음 렌더시에만 오류가 뜨고 화면에 UI가 나타난 뒤에는 문제없이 작동함

🤷 Hydration이란?

Hydration은 수분 공급이라는 뜻을 가진 영어 단어이다. 하지만 개발 언어의 Hydration은 어떻게 다른지 알아보자.

• Next Js는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)을 병행해서 사용합니다.
• 여기서 SSR의 치명적인 단점이 발생합니다. 그 단점으로는 SSR은 HTML을 그려줄 수는 있어도 실제로 브라우저가 렌더링 한 것이 아니기 때문에 Javascript의 코드를 DOMElement와 매칭시켜서 동적인 페이지를 구현하지는 못한다는 것입니다.
• SSR로 인해 렌더링 된 HTML 페이지는 뼈대만 존재하는 바싹 마른 형태로 존재하게 됩니다.
• 이때 수분 공급을 해주는 것을 Hydration이라고 합니다.

Hydrate는 DOM tree에 해당되는 DOM 요소를 찾아 자바스크립트 속성(이벤트 리스너 등)들을 부착하는 일을 말합니다.

장점

1. 초기 로딩속도 감소

   • Pre-Renderingn된 Document는 자바스크립트 요소가 빠진 가벼운 상태이기 때문에 클라이언트 측에서 빠르게 로딩이 가능한 장점이 있습니다.

2. 검색엔진 최적화

🔍 원인 파악

• ssr에서 처음에 내려주는 UI(pre-render)와 브라우저에서 첫 번째로 렌더되는 UI 트리간에 차이가 있기 때문에 난 문제다.
• 첫 번째 렌더는 React의 특징인 Hydration이라고 불린다.
• 즉, React 트리가 DOM과 동기화되지 않아 발생하게 되는 문제다.

❗️ 문제가 되는 코드

studyPage.tsx

<Box
          sx={{
            width: '100vw',
            borderBottom: '1px solid black',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Tabs
            value={value}
            onChange={handleChange}
            textColor="primary"
            indicatorColor="none"
            sx={{
              '& button:active': { backgroundColor: 'black' },
              '& button.Mui-selected': {
                backgroundColor: 'black',
                color: '#dcfc73',
                border: '1px solid white',
              },
              width: '59.16vw',
            }}
          >
            <Tab
              value={0}
              label="강의 목록"
              sx={{
                width: '100%',
                maxWidth: '50%',
                borderLeft: '1px solid black',
              }}
            />
            <Tab
              value={1}
              label="실시간 수업"
              sx={{
                width: '100%',
                maxWidth: '50%',
                borderRight: '1px solid black',
              }}
            />
          </Tabs>
        </Box>
        <Box sx={{ padding: 2, width: '59.16vw' }}>
          {value === 0 && (
            <Typography>
              <StudyList studyList={studyData.lecture} />
            </Typography>
          )}
          {value === 1 && <Typography>The second tab</Typography>}
        </Box>

StudyList.tsx

const StudyList = (studyList: StudyListType) => {
  const list = studyList.studyList;

  return (
    <>
      {Object.entries(list).map(([week, data]) => (
        <div key={week}>
          <div key={week}>{week}</div>
          {Object.entries(data).map(([lecture, info]) => (
            <div key={lecture}>
              <Accordion>
                <AccordionSummary
                  expandIcon={<ArrowDropDownIcon />}
                  aria-controls="panel1a-content"
                  id="panel1a-header"
                >
                  <Typography>
                    {lecture} {info.title}
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>유튜부 영상</AccordionDetails>
              </Accordion>
            </div>
          ))}
        </div>
      ))}
    </>
  );
};

1. MUI Box, Tabs, Tab을 통해 studyList.tsx에 Tab기능을 구현했고, 밑에 Box를 만들어 Tab을 클릭 했을때 나와야하는 컴포넌트를 불러오게 설정했다.

   	<Box sx={{ padding: 2, width: '59.16vw' }}>
         {value === 0 && (
           <Typography>
             <StudyList studyList={studyData.lecture} />
           </Typography>
         )}
         {value === 1 && <Typography>The second tab</Typography>}
       </Box>

2. StudyList를 불러오는 과정에서 Hydration error가 발생함을 찾아냈고, 처음에는 StudyList 자체가 오류인가 싶어서 StudyList 컴포넌트를 독립적으로 출력해봤는데 문제가 없었고, 해당 코드에 문제가 있다고 생각했다.

👍 해결 방안

1. 사실 문제는 생각보다 간단했다. MUI의 코드대로 tab요소를 출력하는 방법을 이해하지 않고 그대로 쓰려고 했기때문에 발생한 결과였다.

   <Typography>
         <StudyList studyList={studyData.lecture} />
   </Typography>

2. 해당 부분은 요소의 순서에 맞지 않은 방법이다. 왜냐하면 해당 코드는 결국 <p>태그 안에 <div> 태그가 있는 형태였기 때문이였다.

느낀점

• 사실 처음에 오류가 너무 많이 뜨고, hydration에 대한 이해가 전혀 없었기 때문에 어려운 문제일거라고 겁을 먹어 스스로 문제에 대한 접근을 어렵게 했던 것 같다.
• 문제의 뿌리인 hydration에 대해 정리를 하다보니 ui를 그리는 과정에서 문제가 발생했다는 것을 알게 되었고, 코드를 봤을 때

  태그 안에

  태그가 있다는 것을 깨닫고 참 간단한 문제였다고 생각했다.
• mui를 쓰더라도 해당 코드가 어떻게 작동하는지 정확히 파악해야겠다는 생각이 든 하루였다!

📄 참조

https://www.univdev.page/posts/nextjs-hydration/
https://velog.io/@jhplus13/NextJS-React-Hydration-Error-%ED%95%B4%EA%B2%B0%EA%B8%B0