학습 Next.js - Day 03 / Link 태그, 프로그래매틱 페이지 이동, 프리패칭, API Routers, 스타일링

이유승·2024년 9월 10일

Next.js 학습

목록 보기

4/27

1. Day 03

Link 태그

-> a 태그가 서버에게 페이지를 매번 새로 요청하는 전통적인 방식인 것에 비해, Next.js의 Link 컴포넌트는 CSR 방식을 사용하여 페이지를 새로 요청하지 않고, 클라이언트 측에서 빠르게 페이지를 전환할 수 있도록 최적화된 방식입니다.
-> 이 방식은 클라이언트 사이드 라우팅을 사용하기 때문에 서버에 매번 요청하지 않고, 브라우저에서 페이지 이동이 빠르게 이루어집니다.

프로그래매틱한 페이지 이동

-> 사용자가 링크를 직접 클릭하는 방식이 아닌, 특정 버튼이 클릭되거나 조건이 달성하거나 할 때 특정 함수 내에서 페이지를 이동시키는 방법. 사용자가 클릭하지 않고도 조건이 충족되면 자동으로 페이지가 이동하게 할 수 있다.

프리패칭

-> 사전에 페이지를 미리 불러온다
-> 사용자가 보고있는 페이지 내부에 존재하는 링크와 연결된 페이지들에게 필요한 JS 번들을 사전에 미리 불러두는 기능. 페이지 이동에 드는 시간을 절감해주기 위함.
-> 그런데 이는 SSR 방식에서는 서버에서 페이지 렌더링을 마친 뒤 유저에게 보낸 다음에 서버에서 JS 번들을 보내고. 그 뒤에는 서버로 요청이 가지 않아야 한다. 그렇다면 추가적인 데이터를 요청하는 프리패칭은 왜 필요한 것인가?
-> Next.js에서는 애플리케이션에 존재하는 모든 페이지 컴포넌트들을 페이지별로 분리(스플리팅)해서 저장을 미리 마쳐둔다.
-> 그리고 JS 번들이 서버에서 클라이언트로 전달될 때에는 모든 페이지에 필요한 코드들이 전달되는게 아니라, 필요한 부분만 전달된다. 모든 코드를 한꺼번에 전달한다면 전송되는 코드의 량이 너무 많이 때문.
-> 헌데 이렇게 되면 페이지를 이동할 때마다 필요한 JS 번들을 계속 요청해주어야 한다. 프리패칭은 이런 문제를 방지해주는 것.

네트워크 탭을 확인해보면, 페이지를 이동할 때 JS 번들이 넘어오는 것을 확인할 수 있다. 필요한 분량을 나누어서 프리패칭 해두면, 페이지를 이동할 때마다 수화가 신속하게 이루어진다.

-> 그런데, 기본적으로 프리패칭은 페이지 내부에서 Link 컴포넌트로 연결된 페이지에만 동작한다. 프로그래매틱 방식의 경우에는 프리패칭이 기본적으로 되지 않고, Router의 매소드를 따로 이용해줘야 한다.

-> 프리패칭 기능은 분명 유용하지만, 필요가 없을 때가 존재한다. 이 경우에는 프리패칭을 강제로 해제할 수도 있다. 이 경우, Link 컴포넌트에서 prefetch 속성을 false로 변경해주면 프리패칭을 사용하지 않도록 한다.

API Routers

-> Next.js에서 API를 구축하여, 백엔드 서버와 같이 간단한 요청-응답을 수행할 수 있게 해주는 것.

-> Create-next-app으로 생성한 프로젝트에서는 pages 폴더 아래에 api 폴더와 hello 파일이 존재하는데, 이것이 바로 API Routers.

-> pages 폴더 아래 있지만 api 폴더는 페이지가 아닌, API 응답을 정의하는 파일로 사용된다.

-> /api/hello 경로로 요청을 보내면 hello 파일에 설정되어있는 기본 동작을 확인할 수 있다. 다른 API 요청을 만드는 것도 당연히 가능.

스타일링

-> Global CSS 파일은 App 컴포넌트가 아닌 곳에서는 호출이 불가능하다.
-> import 문으로 CSS 파일을 호출하는 것은 _app에서만 가능. 이는 여러 컴포넌트에서 CSS 파일을 각자 호출하다가 충돌하는 일을 방지하기 위함이다.
-> 이 문제는 React.js에서도 발생할 수 있는 문제인데, Next는 이걸 명시적으로 막아둔 것 뿐이다.
-> 해결 방법은 간단하다. React.js에서도 이런 문제를 방지하기 위해서 CSS Module이나 Style-components를 사용했다. Next에서도 마찬가지이다.