03. Next.js Pre-rendering, Data Fetching, API Routes

Pre-rendering과 Data Fetching

• Pre-rendering: Next.js는 기본적으로 모든 페이지를 미리 렌더링해둠 → JavaScript를 허용하지 않아도 접속할 수 있음

• Static Generation: 빌드 시에 HTML을 미리 렌더링해두고, 요청할 때마다 재사용하는 방식, 데이터 업데이트가 적은 페이지에 권장됨

  • 외부에서 데이터 요청을 해야하는 경우, getStaticProps 라는 비동기 함수 사용
  • 페이지에서만 export 가능
  • 이 함수는 개발 시에는 매 요청마다 동작하지만, production 시에는 빌드할 때만 서버에서만 동작함 → DB 쿼리도 직접 작성할 수 있음

  ... 
  export async function getStaticProps() { 
      const res = await fetch('..'); 
      return res.json(); 
  }
  
  export default function Home({ allPostsData }) { 
  ...

• Server-side Rendering: 요청할 때마다 서버에서 HTML을 렌더링하는 방식

  • 외부에서 데이터 요청을 해야하는 경우, getServerSideProps 라는 비동기 함수 사용

  export async function getServerSideProps(context) { 
      return { 
          props: { 
              // props for your component 
          }, 
      }; 
  }

  • 하나의 프로젝트 내에서 두 방식을 혼용할 수 있음

API Routes

• pages 폴더에 api 폴더 생성

• 서버에서만 동작함

• getStaticProps 혹은 getStaticPaths 에서 API 루트를 가져오면 안 됨

• form 입력 처리 시 API를 사용하면 바로 DB에 저장할 수 있음

  // pages/api/hello.js 
  
  export default function handler(req, res) { 
  res.status(200).json({ text: 'Hello' }); 
  }

※ 참고 링크
https://nextjs.org/learn/basics/create-nextjs-app/setup