• 프레임워크 기능을 익히고, 그 장점을 온전히 이해하기 위해서는 실제로 서비스로 만들어봐야한다.
• 프론트엔드 서비스를 만들고 사용자들에게 제공하기 위해 결국에 파일로 치환이 되야하는데, 파일을 하나로 제공할건지, 아니면 파일을 쪼개서 제공할 건지. 딱 필요한 만큼의 코드만 가져와 빠르게 보여줄수 있다.

Link Component

<a href=”/posts/first-post”>첫번째 글</a>

<Link href=”/posts/first-post”><a>첫번째 글</a></Link>

두가지 페이지 이동 방식의 차이

1. 기본 <a>

   1. 브라우저에 새로운 url을 치고 들어간 것과 같은 효과
   2. Next에서 제공하는 <Link> 의 최적화 도구들이 사용 되지 않는다.
   3. 새로운 페이지를 이동했을때 모든 페이지들의 정보를 모두 불러온다.

2. Next의 <Link>

   1. 새로운 페이지로 이동했을때 그 페이지에 필요한 정보만 불러온다.

Client Side Navigate

• 브라우저에서 url을 직접쳐서 이동하는 것과 다르게 JS상에서 page 컴포넌트만 교체하는 방식
• 확인 : body에 backgroundColor : pink 를 주고 페이지가 바뀔때 배경색이 유지되는지 확인
• <Link> 로 페이지 이동할때는 backgroundColor가 유지된다 === html이 리로드 되지 않는다. === 전체 페이지가 리로드 되는 것이 아니라, JS를 통해 특정 페이지만 불려와졌다.=== 모든 데이터가 새로 받아와 지는게 아니다.

Code Splitting

• Next.js는 Automatic code Splitting을 제공한다.
• 특정 페이지에 접근할때는 해당 페이지를 그릴때 필요한 chunk만 로드 한다.
• 페이지 이동할떄는 목적지 페이지에 필요한 chunk 만 추가 로드

<aside> 💡 이를 통해 성능을 최적화 한다.

</aside>