Next.js 라우팅

next-link로 라우팅하기(CSR)

import Link from 'next/link';

const Links = () => {
  return (
    <main>
      <h1>Links</h1>
      <Link href="/section1/getStaticProps">/getStaticProps</Link>
    </main>
  );
};

export default Links;

• next/link의 Link 컴포넌트를 이용해서 라우팅하는 방식으로, HTML의 a태그와 완전히 동치된다.

• 그럼 a태그를 안 쓰고 Link 컴포넌트를 사용하는 이유는 무엇일까?

Next.js의 라우팅은 CSR처럼 동작한다.

• /links로 접속하면 위와 같이 네트워크 탭에 뜨는데, 제일 밑을 보면 getStaticProps.json과 js가 있는 것을 볼 수 있다.

• 여기서 json파일은 props 데이터를, js파일은 해당 페이지의 HTML을 그리기 위해 미리 가져온다.

• 다시 한 번 말하자면, 제일 첫 페이지만 설정한 대로(SSG, SSR, CSR, ISR) 동작하지만, next/link를 사용한 라우팅을 할 경우, 다음 페이지는 CSR처럼 움직이고, 그를 위해서 미리 json과 js를 가져오게 된다.

• 실제로 next/link를 통해서 페이지를 이동하면, 위 사진에서 볼 수 있듯이 새로운 페이지를 가져오는 것이 아니라, js와 json을 이용해서 직접 그리게 된다.

💡

즉, Next.js는 기본적으로 첫 진입 페이지만 설정한 대로(SSR, SSG, CSR, ISR) 동작하고, next/link를 이용한 라우팅 시 다음 페이지는 모두 CSR처럼 동작하게 된다,

next-router로 라우팅하기

import { useRouter } from 'next/router';

const Links = () => {
  const router = useRouter();

  return (
    <main>
      <h1>Links</h1>
      <button onClick={() => router.push('/section1/getStaticProps')}>
        /getStaticProps
      </button>
    </main>
  );
};

export default Links;

• next-router의 useRouter를 사용하여 라우팅 할 수도 있는데, historyAPI와 비슷한 사용법을 갖고 있다.

• 가장 큰 차이점으로는 useRouter를 이용한 라우팅은 기본적으로 prefetch하지 않는다.

next-link와 next-router의 차이

• 위 사진에서 보면 next-router를 이용해서 라우팅을 하면 json과 js파일이 불러와지지 않는다.

• 그렇다고 CSR이 아닌건 아니다. 페이지를 이동하려고 하면, 그제서야 js와 json파일을 가져온다(prefetch).

• 이렇게 next-link는 Link컴포넌트가 화면에 들어올 때 미리 js와 json을 가져오고,

• next-router는 화면에 들어오더라도 js와 json을 미리 가져오지 않는다.

next-router로 prefetch 하기

useEffect(() => {
    router.prefetch('/section1/getStaticProps');
  }, []);

• 그렇다고 next-router가 prefeth를 절대 지원하지 않는 건 아닌데, 위 코드와 같이 prefetch를 수동으로 해주면 된다.

정리

1. next-link든 next-router든 Next.js는 라우팅을 CSR 처럼 처리한다.(첫 페이지만 기존 정책대로 처리한다)

2. next-link는 prefetch(화면에 Link컴포넌트가 보일 때 js와 json을 미리 가져옴)한다.

3. next-router는 prefetch하지 않지만, 설정으로 가능하긴 한다.

Uploaded by N2T

(24.01.13 12:40)에 작성된 글 입니다.