Next.js 동적라우팅(slug), 성능 최적화(prefetch)

동적 라우팅(slug)

• - 예시 구조: app/bolg/[slug]/page.ts|js

• - 동작: next/link 를 활용해서 /blog/nextjs , /blog/reptile 로 접속 시 [slug] 값이 변수처럼 컴포넌트에 전달

• - 장점: blog 하위로 게시판이 여러개여도 slug 하나로 관리를 할 수 있다

성능 최적화(prefetch)

사용자가 링크를 클릭하기 전, 링크가 화면에 노출되면 해당 페이지의 데이터를 미리 받아오는 기능 (기본 활성화)

활성화 (default)

• - 클릭하자마자 페이지가 즉시 전환

• - 사용처: 메인 네비게이션 메뉴, 접속 많은 페이지

비활성화(prefetch={false})

• - 클릭 시 데이터 요청으로 로딩 생길 가능성이 있음

• - 사용처: 무한 스크롤 리스트, 많은 데이터 목록, 데이터 절약

👍 적절히 사용하는 방법 중 하나

• - mouseover 시 setActive=true prefetch= active ? true : false 마우스오버시 프리페칭을 시작하도록 할 수 있다