개발자

next js getStaticProps rehydration 질문 있습니다.

2023년 01월 25일조회 223

SSG, ISR, SSR 이론은 다 알고 있습니다. 그런데 개발도중 NEXT.JS 고질병인 client, server 충돌경고를 종종 겪는중 의문이 생겼습니다. 페이지를 미리 그리는데 왜 에러가 나지 하는 생각에 질문 드립니다. 1. 만약 SSG로 만든 페이지가 HTML로 만들어져서 화면에 미리 렌더링이 되는데, 그럼 미리 렌더링된 이후(제어권이 리액트로 넘어감) CSR은 화면을 로드할때 사전에 만든 HTML을 로딩하나요? 아니면 해당 페이지를 새로 그리나요? 2. 만약 새로 페이지를 그린다면 기존 pre render된 html 파일 내용과 csr이 그린 데이터가 다르면 next.js가 match 경고를 출력하나요? 2.1 next js에서 server, client 내용이 다르면 match경고를 발생시키는 이유는 무엇인가요? 3. csr이 미리 만들어진 html을 사용하여 페이지를 그린다면 이유가 뭔가요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

손정현님의 프로필 사진

안녕하세요! 리액트에서 rehydration에 대한 개념을 잘 정리한 글이 있어서 공유합니다 - https://www.joshwcomeau.com/react/the-perils-of-rehydration/#rehydration--render-7 간단하게 설명을 드리자면, rehydration은 서버에서 받은 html과 react가 최초 생성한 react node들이 맞는지 확인하는 거라고 합니다. (이때 어떤 상태에 따라서 다시 node를 그리거나 하는 행위는 하지 않는다고 해요) 그래서 서버에서 받은 html과 rehydration 후 생성된 react의 node들이 다를 경우 mismatch 에러를 내뱉는다고 합니다. mismatch 에러를 내뱉는 이유는 의도하지 않은 경우, 대부분 버그일 확률이 높다고 간주하기 때문이에요. 대부분의 해결법은 useEffect에 해당 로직을 옮기는 걸 추천하는데요. 이유는 최초 마운트 후 (rehydration 이후) 로직에 따라서 새로운 node들이 그려지기 때문에 mismatch 에러를 피할 수 있기 때문이에요. next.js만 발생하는 문제는 아니고 리액트를 지원하는 모든 서버 렌더링 프레임워크에서 발생할 수 있는 문제입니다. - https://beta.reactjs.org/reference/react-dom/client/hydrateRoot#usage

성장하고싶어요님의 프로필 사진

성장하고싶어요

프론트2023년 01월 25일

1. csr방식은 사전에 dom과 html을 안그리고 라이프 사이클 따라 그립니다. 구글링하면 라이프사이클 모식도 많아요. 말씀 하신건 ssg방식으로 사전에 완성된 페이지를 말씀하시는거 같은대, 자세한건 js 번들링을 찾아보시면 됩니다 2. 리액트에서 리렌더링현상이 발생하는건 가상dom이 변경될때 입니다. 언마운팅 마운팅 업데이트 순서로 진행됩니다. 2-1. 사전에 짜인 스크립트나 태그 와 실제로 그려야 할값이 다르면 하이드레이션 에러가 납니다. 없는 변수에 값을 할당하면 오류가 나는것 처럼요

성장하고싶어요님의 프로필 사진

성장하고싶어요

프론트2023년 01월 25일

3. 사전에 그려진 html을 사용하는 이유를 유추해보자면, 사용자와 빠른 상호작용을 위해서 라고 생각됩니다. 굳이 그렇게 만들었다는건 페이지가 금방금방 변화 하기 때문인거 같습니다. 저는 답변에 자신이 없어 댓글로 남깁니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!