거의 알고리즘 일기장

nextjs 초심자 권모씨 평소와 같이 zustand persist를 사용하던중 content mismatch 문제가 발생하는데... 이게 어떻게 된일일까?? 사건의 전말은 이렇다! //... const Mismatch = () => { const user = useUser(); return {user?.name ?? 'user is null'}; }; 얼핏보면 문제가 없어보인다. 하지만, 피해자는 이 코드의 환경이 nextjs 라는 사실을 간과했다!! 문제는 store hydrate가 되는 지점이다!! html -> store hydrate -> react rehydrate 이런식으로 store hydrate가 react의 rehydrate 되기 직전에 된다!! 이게 왜 문제가 되는지는 react do..

nextjs를 처음 사용해보는 권모씨 평소와 같이 antd, styled-component를 사용하던중 문제를 발견하는데... 아씨.. 왜이리 스타일이 늦게 먹는것 같지?.. 나는 react처럼 똑같이 세팅하고 그라는디.. ㅠ 이유가 무엇일까??... 이유는 바로 nextjs의 랜더링 방식에 있다!! nextjs는 (default인 ssg 기준으로) HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 먼저 보낸다. 이때, 미리 빌드타임에 생성된 html 문서에 스타일링이 먹히지 않아서 FOUC(flash of unstyled content) 문제가 생기는것이다. (styled-component는 css-in-js 방식이므로 js파일에 있다. antd도..