서버사이드렌더링 (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.. 서버가 호출하는 API와 브라우저가 호출하는 API는 다르다 : NEXTJS 들어가며Next.js로 개발하다 보면 이런 상황을 마주친다. 분명히 서버에서 API를 잘 호출하고 있는데, 같은 주소를 클라이언트 컴포넌트에서 쓰면 요청이 실패한다. 로컬에서는 둘 다 되던 코드가, 배포하고 나면 클라이언트 쪽만 망가진다.이 글은 그 원인 — API를 누가 호출하느냐에 따라 동작이 달라지는 이유 — 을 설명한다.핵심 개념: API 호출의 주체Next.js 앱에서 API를 호출하는 주체는 두 가지다.서버: Server Component, API Route, Server Action 등에서 fetch()를 실행할 때. 코드는 Next.js가 돌아가는 머신에서 실행된다.브라우저: Client Component에서 fetch()를 실행하거나, 처럼 브라우저가 직접 리소스를 요청할 때. 코드는 .. 이전 1 다음