[ React ] Next.js : React Framework + <Link>, CSN

Next.js 시작하기

npx create-next-app < project name >
cd < project name >
npm run dev

 

실행결과

 

<Link> vs <a> :: Client Side Navigation

<a> tag의 경우 href 의 경로의 page로 이동을 할 때 page를 새로 불러오게 되어 상태 값이 유지되지 않아 새로고침 되고, 속도가 저하된다. 

 

<Link> tag의 경우 page를 새로 불러오는 것이 아닌 url 주소만 바꿔준다. <Link> tag가 있을 경우 해당 경로의 page를 미리 다운로드 받아오기 때문에 로딩하는 속도가 <a> tag에 비해 빠르다. 

 

=> <a> tag에 비해 <Link> tag가 더 부드럽게 page 전환이 된다. 

 

Code Spliting and Prefetching

Next.js 는 자동으로 Code Spliting 을 수행하여, 각 page는 해당 페이지에 필요한 것만 로드한다. 즉 index.js page가 rendering될 때 다른 page의 코드는 처음에 제공되지 않는다.

+ <Link> tag에 연결된 page를 미리 가져와 page 전환이 즉각적으로 이루어짐.

 

https://nextjs.org/learn/basics/create-nextjs-app/setup

Learn | Next.js