📚 Reference

• 공식 문서 1

📜 Chapter

Routing

Front-end 성능 최적화

Next.js - 성능 최적화

‣

‣

‣

next/link

• next/link
• Link
• SSG / ISG → CSR 으로 페이지 이동 효과
• 페이지를 이동할 때, 더이상 추가적인 HTML를 받아오지 않는다.
• 최초 실행은 SSG로 실행되지만 페이지를 라우틸할 때는 CSR 방식으로 빠르게 이동한다는 뜻이다.
• SSG와 CSR을 결합한 routing을 할 수 있다.
• JavaScript와 json 파일로 해당 페이지에 대한 정보를 미리 가져와서 빠르게 CSR 방식으로 라우팅 할 수 있는 것이다.
• HTML은 이미 프리랜더링 되어 있기 때문에 SEO도 문제가 없다.
• next/link는 안 보일 때는 파일을 불러오지 않다가 이 파일을 누를 수 있을 때, lazy한 방식으로 파일을 가져온다는 뜻이다.
• Next.js는 불필요한 네트워크 요청을 지양한다.

import Link from 'next/link'

• react-router-dom의 기능을 하는 태그
• Next.js 13 버전 이후
  • a 태그를 완전히 대체할 수 있다. 바로 스타일을 입힐 수 있다.
• Next.js 12 버전
  • Link가 a 태그를 완전히 대체하지 않았기 때문에 직접 자식으로 a 태그를 넣는 것을 권장한다.
  • a 태그에 스타일을 입혀야 적용이 된다.