Next.js에서는 사용자의 요청 혹은 Build Time에서 Data를 Fetching하고 배치시키기 위해 사용하는 함수가 있다. (CSR React 딴에서 useEffect(ComponentDidMount)를 이용해 Data Fetching을 진행하여 데이터를 보여주는 것과 같다고 생각하면 된다.) 이에 대해 사용하는 방법과, 각자의 특성에 대해 설명하고자 한다. getInitialProps 페이지를 SSR로 생성하며 Data fetching를 해야할 경우 사용된다. function Page({ stars }) { return Next stars: {stars} } Page.getInitialProps = async (ctx) => { const res = await fetch('https://api..

* 본 포스팅은 Next.js를 기반으로 작성되었음을 알립니다. * Next.js에서는 SSG를 SG(Static-Generation)으로 표현하고 있지만, 통용적으로 SSG라 사용되고 있다. SSR과 CSR의 차이는 이전 포스팅에 모두 나와 있으니, 해당 포스트를 참고하면 된다. SSR과 SSG 차이 Next.js에서는 두 가지 형태의 사전 렌더링(Pre-Rendering) 방법을 제공하고 있다. SSR : 사용자의 요청에 의해 동적인 HTML을 생성하는 렌더링 방법이다. 사용자 요청 횟수에 따라 계속해서 HTML을 생성한다. SSG : 빌드시 최초 1회 작성되는 정적인 HTML을 생성하는 렌더링 방법이다. 빌드시 생성된 HTML은 이 후 재요청시 재사용 된다. Next.js에서는 위 2개의 사전 렌더..

Next.js React로 만드는 서버 사이드 렌더링(Server Side Rendering 이하 SSR) 프레임워크 제공되는 주요 기능 ▶ hot reloading - 개발중 저장되는 코드는 자동으로 새로고침 된다. live loading과는 다른 점을 지니고 있으며, 차이점은 아래와 같다. hot reloading - Application의 현재 상태를 잃지 않고 변경된 사항을 수정한다. live reload - Application의 현재 상태를 초기화하고, 처음으로 돌아가 새로고침 처리한다. ▶ Automatic routing - React에서 라우팅을 하기 위해서는 태그나, 특정 코드를 작성해야 했다. ("'/posts' url로 접속시 Post Component를 보여줘!" 라는 코드) 하지만..