안녕! 이 게시물에서는 next.js의 정적 파일에 대해 이야기하고 애플리케이션 성능을 향상시키기 위해 정적 파일을 사용하는 시기와 방법에 대해 이야기하고 싶습니다.

저는 한동안 Nextjs로 작업해 왔습니다.
웹팩 사용, 라우팅 등과 같이 reactjs로 애플리케이션을 코딩할 때 발견하는 많은 문제를 해결하기 때문에 매우 강력한 프레임워크입니다.
그러나 물론 이 모든 것은 우리가 원하는 대로 수정할 수 있습니다.

또한 nextjs에는 SSR(Server Side Rendering)과 SSG(Static Generation)라는 두 가지 유형의 렌더링이 있습니다.
다음으로 정적 페이지를 생성하는 잘 알려진 Gatsby의 경쟁인 이 마지막 유형에 대해 이야기할 것입니다.

정적 페이지를 만들려면 어떻게 해야 합니까?

페이지를 정적으로 만들려면 페이지에 getStaticProps 함수를 추가하기만 하면 됩니다.

const Contact = ({title}) => (
  <>
    <h1>{title}</h1>
  </>
)

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact"
    },
  }
}

export default Contact

getInitialProps 또는 getServerSideProps 와 마찬가지로 우리가 반환하는 것은 나중에 애플리케이션에 props 로 도착하는 매개변수입니다.

이것만 있으면 연락처 페이지가 빌드 시간에 정적으로 렌더링됩니다.yarn build 를 실행하여 확인할 수 있습니다. 결과는 다음과 같습니다.

범례에서 연락처 페이지가 정적 파일과 크기로 내보내진 것을 볼 수 있으며 파일 탐색기에서 볼 수 있습니다.


그러나 이것이 전부는 아닙니다. 예를 들어 이미 정적으로 생성된 페이지에 어떤 시점에서 변경 사항이 추가되었을 수 있으며 프로덕션에서 이 새 콘텐츠로 다시 생성되기를 원할 수 있습니다.
이를 위해 nextjs 버전 9.5부터 이 페이지를 다시 렌더링하려는 몇 초마다 구성할 수 있는 "증분 정적 재생성"이 있습니다.
이는 revalidate가 반환하는 값에 getStaticProps를 추가하기만 하면 매우 쉽게 수행할 수 있습니다.

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact",
      // Next.js will attempt to re-generate the page:
      // - When a request comes in
      // - At most once every second
      revalidate: 1, // In seconds
    },
  }
}

이 모든 것은 정보 페이지, 연락처 페이지 등으로 변경될 수 있는 흔하지 않은 페이지에 적합합니다. 하지만 ...

동적 페이지는 어떻게 됩니까?

이를 위해 정적으로 내보낼 경로를 지정할 수 있는 또 다른 기능이 있습니다.
동적 경로가 필요합니다. 예를 들어 블로그 게시물을 내보내려면 파일에 이와 같은 항목이 있어야 합니다.

이 새 파일에는 getStaticProps 도 필요하지만 새 getStaticPaths 함수도 추가합니다.

const PostPage = () => {
  const router = useRouter()
  const {
    query: { id }
  } = router

  return (
    <>
      <h1>POST #{id}</h1>
    </>
  );
};

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

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

export default PostPage

우리는 무엇을 반환하고 있습니까?

경로: 내보낼 수 있는 경로입니다. 예를 들어 map 함수로 생성할 수 있습니다.

폴백: 이 소품을 사용하면 paths 내에 특정 경로가 없으면 렌더링을 강제하도록 nextjs에 알릴 수 있습니다.

이전 예에서 yarn install 를 실행하면 다음 콘솔 출력이 표시됩니다.

이전 이미지에서 설정한 경로가 어떻게 내보내졌는지 볼 수 있으며 파일 시스템에서도 찾을 수 있습니다.


이것으로 현재 내가 가장 좋아하는 프레임워크 중 하나를 사용하여 정적 페이지 생성에 대한 간단한 소개를 마칩니다 ❤️.

읽어주셔서 감사합니다!