[Next.js] link

next<Link>는 SSG + CSR을 결합한 방식을 사용한다.

처음 렌더링 일땐 SSG를 사용하고 링크를 통해 다른 페이지로 넘어가면 CSR을 사용한다. => 네트워크 창에 보면 확인이 가능하다.

 <Link href="/section1/getStaticProps" style={{ color: 'red' }}>
        /getStaticProps
  </Link>

예시

Links라는 파일안에 getStaticProps페이지로 갈 수 있는 링크를 만들어놨다. 처음 Link페이지가 렌더링 되면 SSG방식으로 서버로 부터 HTML을 받아온다. (맨위에 links라는 목록_prefetching이 되고있다.미리 HTML화면을 받아 볼 수 있다는 점)

 

그리고 링크를 누르면,

getStaticProps페이지의 경우 HTML을 받아오지 않고 js파일이 생성되는 것을 네트워크 탭에서 확인이 가능하다.

이말인 즉슨 CSR형식으로 js파일과 JSON데이터를 가지고 렌더링을 한다는 것!

json을 눌러보면 data 확인 가능

그리고 Link태그의 좋은점!

Link태그가 보이지 않으면 이렇게 불러오지 않다가

---

/getStacticProps가 보이는 순간 미리 pre-fetching을 하는 것을 볼 수 있다.

js파일과 json을 받아온다.

이렇게 사용자가 그 링크를 보는 순간 실행 되므로써 불필요한 과정들을 줄일 수 있다.

 

 

 

 

 

 

---

 

그럼 a태그와 다른 것은 무엇일까? a태그의 경우 매번 HTML 파일을 받아와야한다.

 <a href="/section1/getStaticProps">/getStaticProps</a>

이렇게 a태그를 해놓고 다시 build를 해본다.

getStatciProps HTML파일을 받아오는 것을 확인 할 수 있다. a태그의 경우 모든 것을 SSG로 실행한다는 것을 알 수 있다.

그래서 링크를 눌러보면 깜빡거림이 아주 잠깐 있는 것을 볼 수있다. SSG의 단점이 보인다. 또한 Pre-fetching을 위한 준비도 보이지 않는다.

 

**next.js 12버전에서는 Link태그가 a태그의 역할을 완전히 수행하지 못했어서 Link태그안에 a태그를 넣어서 사용하기를 권장했으나 13버전부턴 그럴 이유가 없어졌다.

또한 Link태그에 style속성을 넣을 수 있는 것도 가능하다.