SSR (2) 썸네일형 리스트형 DOMMatrix is not defined: Next.js SSR 에러 하나 잡은 이야기 Next.js 프로젝트에 PDF 뷰어(react-pdf)를 붙였더니, 페이지를 열 때마다 콘솔에 이런 에러가 찍혔다. DOMMatrix is not defined PDF 미리보기 화면을 아직 열지도 않았는데 왜 홈 화면만 들어가도 에러가 났을까. 원인을 따라가 보니 SSR(서버 사이드 렌더링)의 기본 동작 방식을 다시 짚어볼 필요가 있었다.Next.js는 컴포넌트를 두 번 실행한다Next.js는 페이지를 브라우저에 보내기 전에, HTML을 미리 만들어두기 위해 Node.js 서버에서 컴포넌트 함수를 한 번 실행한다. 이게 SSR이다. 이렇게 만든 HTML을 먼저 보내서 사용자가 빈 화면 대신 콘텐츠를 바로 보게 하고, 그다음 브라우저가 같은 컴포넌트를 다시 실행해서 클릭 같은 인터랙션을 붙인다(hydra.. Vue 개발자가 Next.js를 배우며 겪은 혼란: Server Component와 Client Component 이해하기 Vue와 Nuxt에 익숙한 개발자로서 Next.js를 처음 접했을 때, 가장 혼란스러웠던 부분은 "왜 데이터를 fetch 했는데 화면이 업데이트되지 않는가?"였습니다. Vue에서는 당연하게 작동하던 반응형 시스템이 Next.js에서는 전혀 다른 방식으로 동작했고, revalidatePath라는 낯선 함수를 호출해야 했습니다.이 글은 Vue/Nuxt 개발자가 Next.js의 Server Component와 Client Component를 이해하는 과정을 담았습니다.첫 번째 혼란: 왜 화면이 업데이트되지 않는가?Vue/Nuxt에서의 당연함Vue나 Nuxt에서 개발할 때, 반응형 시스템은 너무나 자연스럽게 작동합니다. {{ post.title }} 이 코드는 예상대로 작동합니다. 게시글을 추가하면 .. 이전 1 다음