<Link>는 클라이언트 사이드 라우팅을 위한 메서드

• <a> 라우팅 하면 번쩍한다
• NextJS는 자동으로 코드 스플리팅 하는데 <Link> 컴포넌트 보면 해당 경로 컴포넌트 prefetch 한다

<Image> 는 이미지 최적화를 해준다

• <img> 태그로 단순히 하면 이미지 height width 최적화도 안되고 크기 최적화도 안된다
• WebP로 변화 시켜 놓는다
• 레이지 로드도 해준다

Static Generation v.s. Server-side Rendering

• 서버 부하때문에 정적 생성을 추천한다

  • 단 최신 데이터로 그려야되면 SSR 로 생성해야된다

• 페이지별 선택 가능

  

getStaticProps

• “Hey, this page has some data dependencies — so when you pre-render this page at build time, make sure to resolve them first!”

• 이전에는 getInitialProps 가 쓰였는데 9.3버전 이후부터는 **getStaticProps / getServerSideProps 둘로 분기 되었다

• 정적 생성시 build 타임에 그리기 전에 데이터를 먼저 가져와야 되는경우

  export default function Home(props) { ... }
  
  export async function getStaticProps() {
    // Get external data from the file system, API, DB, etc.
    const data = ...
  
    // The value of the `props` key will be
    //  passed to the `Home` component
    return {
      props: ...
    }
  }
  

getServerSideProps

• SSR 시 request 타임에 그리기 전에 데이터 먼져 가져와야 되는경우

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

• 서버에 부하를 주기 때문에 꼭 데이터를 requset 타임에 가져와야 되는 경우만 쓰도록 한다 그외는 getStaticProps 로 처리

• 또, 굳이 서버에서 받아서 그려서 나올 필요 없는것 들은 단순하게 컴포넌트만 정적 생성하고 클라이언트 사이드 에서 fetch 하고 리렌더 하면 된다

  • 이를태면 private하게 보여야되는 dashboard 같은 것들은 굳이 pre render될 필요없다

파일이름을 [ ] 로 지으면 다이내믹 경로 설정 된다

// pages/[id].tsx

import { useRouter } from "next/router";

export default () => {
  const router = useRouter();

  return (
    <>
      <h1>post</h1>
      <p>postid: {router.query.id}</p>
    </>
  );
};

// localhost:3000/123 으로 접속시 postid 가 123으로 나옵니다.

// pages/[값].tsx 왼쪽 페이지 구조의 값은 router.query.값과 동일합니다.