Next.js의 대표적인 기능

huni_·2022년 7월 5일
0

Next.js

목록 보기
2/2

pre-rendering

next.js에서 기본적으로 모든 페이지를 프리 렌더링 함. 클라이언트 사이드에서 모든 작업을 수행하는 대신 미리 각 페이지에 대해서 HTML 파일을 미리 만들어서 성능과 SEO 측면에서 도움을 줌.
최소한의 자바스크립트 코드를 사용해 HTML 화면을 미리 생성하고 자바스크립트가 로드되면 그때 컴포넌트와 앱 화면이 완전히 활성화 되고 이런 과정을 hydration이라고 한다.

React


next.js에서는 SSG와 SSR 형태의 프리 렌더링을 지원하고 있음. 성능상 SSG를 추천하고 있지만 각 페이지마다 어떤 종류를 택할지 선택할 수 있음.
Detail에서만 SSR을 할 수 있게 선택한 코드

Data-fetching

1. getStaticProps

각 페이지에서 async 함수로 getStaticProps가 export 되면 Next 서버에서 빌드 시점에 이 함수를 호출하고 리턴한 props를 이용해 페이지를 프리렌더링한다.

// javascript case
export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}

// typescript case
import { GetStaticProps } from 'next';
export const getStaticProps: GetStaticProps = async (context) => {}

2. getServerSideProps

매 요청마다 새로운 데이터를 갱신하게 하려면 getServerSideProps안에서 데이터를 패치한다.
정적페이지라면 getStaticProps로 데이터를 가져오면 되지만 최신화된 데이터를 사용해야 하는 경우 요청마다 페칭을 보내도록 할 수 있다.

// javascript case
export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  };
}
// typescript case
import { GetServerSideProps } from 'next';
export const getServerSideProps: GetServerSideProps = async (context) => {}

3. getStaticPaths

동적 라우팅 처리를 하려면, 빌드 타임에 html이 그려질 때 각 라우팅 path 정보를 가진 리스트가 필요함. 라우팅 처리를 하는 곳에서 async 함수로 getStaticPath를 export 하면 Next서버는 해당 함수가 리턴한 모든 path 경로의 페이지들을 프리렌더링한다.

export async function getStaticPaths() {
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true
  };
}

fallback은 지정되지 않은 경로로 접속했을 때 404 페이지로 처리할 것인지 여부를 담음

profile
FrontEnd Developer

0개의 댓글