104%

Custom Document는 서버사이드렌더링 되는 페이지의 마크업을 추가하기 위해 사용한다. 이 Custom Document내부에는 getInitialProps가 있는데 여기서의 getInitialProps는 서버사이드렌더링 될때 필요한 데이터를 비동기로 가져오기 위해서 존재한다. next.js는 기본적으로 Document.js를 가지고 있지만 서버사이드렌더링 될때 어떤 특정 데이터를 페이지에 내려주고 싶다던지 마크업을 수정하고 싶다던지 하는 커스텀 요구사항이 있을때 pages폴더 아래에 _document.js파일을 만들어주면 된다. import Document, { Html, Head, Main, NextScript } from 'next/document' class MyDocument extends..

서론 프로젝트를 진행하다가 삽질한 내용을 공유합니다. Next.js에서는 getInitialProps라는 메소드가 있습니다. 이 메소드를 사용하면 화면이 렌더링 되기 전에 필요한 데이터를 미리 준비해 놓을 수 있습니다. getInitialProps는 다음과 같은 상황에서 트리거 됩니다. 1. 주소창에 직접 URL을 치고 들어온 경우 SSR(Server Side Rendering)이 일어납니다. 이때 getInitialProps가 실행됩니다. 2. next/link나 next/router를 사용해서 클라이언트 사이드 라우팅(CSR)을 한 경우. 이 경우에도 getInitialProps가 실행됩니다. 이슈 제가 만들고 있는 프로젝트는 SNS라서 메인페이지에 진입했을때 피드의 리스트가 쭉 출력되어야 합니다. ..

hydration = 수화 수화란 우리 몸에 수분을 보충하는 행위를 뜻한다. 리액트에서 왜 hydration이라는 용어를 사용하는건지는 아래 내용을 살펴보고 다시 한번 생각해보자. 리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공한다. ReactDOM.render(element, container[, callback]) 컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수이다. 이 render함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해준다. 그리고 렌더링이 완료되면 세번쨰 인자로 전달된 콜백이 실행되게 할 수 있다. 즉 ReactDom의 render메소드는 컴포넌트를 렌더링한 후에..