프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • vanilaJS
  • 알고리즘
  • nomadcoders
  • 코딩프로젝트
  • Til
  • 자바스크립트
  • 모던자바스크립트딥다이브
  • 코드스테이츠
  • 자바스크립트알고리즘
  • 스파르타코딩클럽
  • 비트마스크
  • 2023 인프콘 후기
  • nomadcoder
  • 내일배움단
  • JavaScript
  • 내일배움카드
  • 투포인터알고리즘
  • 국비지원
  • MySQL
  • 자바스크립트비트마스크

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

[TIL] 2023-1008
TIL

[TIL] 2023-1008

2023. 10. 9. 14:54

Facts

- react-notion-x 를 활용해 notion page 를 html 로 옮기는 작업을 하고 있음

- 그냥 문서 보면서 적용해보는 중

 

Feelings

- 이것저것 뜯어보는 재미는 있다. 

 

Findings

- supperHydrationWarning

Next.js 의 app router 와 server component 를 사용하는 도중 아래와 같은 에러를 만났다. 

결론적으로 위 에러를 안보이게 하려면 suppressHydrationWarning 옵션을 true로 주면 된다.

 

이런 에러가 발생하는 원인이 뭘까? 서버를 통해 렌더링 되기를 기대하는 결과물과 실제로 클라이언트에서 렌더된 결과물이 일치하지 않았을 때 발생하는 에러이다. hydration 의 정의를 생각해보면, 서버에서 렌더링된 정적 html 을 동적으로 다룰 수 있도록 클라이언트에서 자바스크립트를 통해 변경되는 과정이다. 여기서 서버에서 렌더된 html 과 클라이언트에서 렌더될 html 에 차이가 발생하면 추가적인 연산이 필요하고, 이는 사용자 경험의 저하로 이어질 수 있다. 위와 같이 옵션을 주어서 에러를 억제하는 것은 근본적인 해결 방법은 아닌 셈이다.

 

근데 위 문제가 특별한 상황은 아니고, 크롬 + next 로컬 환경에서 개발하다보면 익스텐션 때문에 종종 뜬다.

 

Feedback

- 매일 조금씩 꾸준히 합시다

저작자표시 (새창열림)

'TIL' 카테고리의 다른 글

[TIL] 2023-1023 부상 주의 삐용삐용  (0) 2023.10.23
[TIL] 2023-1011  (0) 2023.10.11
[TIL] 2023-1006 배포주기에 대한 고민, 하체한 날  (5) 2023.10.06
[TIL] 2023-1005  (2) 2023.10.05
[TIL] 2023-1004  (0) 2023.10.05
    'TIL' 카테고리의 다른 글
    • [TIL] 2023-1023 부상 주의 삐용삐용
    • [TIL] 2023-1011
    • [TIL] 2023-1006 배포주기에 대한 고민, 하체한 날
    • [TIL] 2023-1005
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바