SSG

Next.js 프레임워크는 Data Fetching 시에 SSR(Server-side Rendering), SSG(Static-site Generation), 그리고 Dynamic Routing 등의 세 가지 방법을 제공한다. 각각의 방법에 대해서 하나씩 깊게 알아보고 언제 어떻게 써야 하는지 사용법을 공부해 보고자 한다. SSR(Server-side Rendering) 만약 어떤 페이지에서 getServerSideProps 함수를 호출하면, Next.js는 getServerSideProps에서 데이터를 반환받을 때 마다 이 페이지를 pre-rendering 할 것 이다. export async function getServerSideProps(context) { return { props: {}, //..

이번 포스팅에서는 Next.js에서 지원하는 동적 라우트(Dynamic Route)에 대한 개념을 살펴보고 간단한 예제로 실습까지 해보는 시간을 가지려고 한다. 참고로 튜토리얼은 Next.js 공식 홈페이지에서 제공하는 자료 및 소스코드를 가지고 진행하였다. 예제는 간단한 블로그를 만드는 프로젝트이다. 블로그의 페이지 컨텐츠는 외부 데이터에 의존하는데, getStaticProps 함수를 통해서 데이터를 패치하고 렌더링한다. 이번에는 각각의 블로그 포스팅 페이지 경로가 외부 데이터에 의존하는 부분에 대해서 다뤄보려고 한다. Next.js에서는 경로를 바탕으로 정적으로 페이지를 생성할 수 있는 기능을 제공한다. 이 기능이 Next.js에서 동적 url을 가능하게 한다. 동적 라우트를 생성한다는 말은 만약에 ..