라우팅
라우팅
URL을 애플리케이션 안의 특정 컴포넌트 혹은 페이지로 매핑하는 과정
성공적인 라우팅 핵심은 단순함, 성능, 유지보수성의 올바른 균형
리액트 라우터
리액트 앱에서 선언적 방식을 사용해 클라이언트 사이드 라우팅을 정의
독립적인 써드파티 라이브러리
History API를 활용하여 UI를 URL과 동기화
라우트를 컴포넌트에 매핑하는 선언적 접근법 제공
타입 안전성이 뛰어남
파일 시스템 기반 라우팅을 지원함
Next.js 앱 라우터
파일 시스템 기반 라우팅
파일 경로가 그대로 URL 경로가 됨
Next.js 프레임워크 자체에 구현되어있음
리엑트에서 SSR을 구현하려면 서버, 클라이언트 모두에서 라우팅 로직을 처리해야함
Next.js는 SSR을 내장 지원하기 때문에 보다 구현하기 쉬움
코드를 라우트에 따라 자동으로 분할 -> 로딩 시간이 잠재적으로 개선됨
꿀팁
서버 컴포넌트는 클라이언트 사이드 내비게이션에 대해서도 항상 서버에서 렌더링됨
서버 컴포넌트를 항시 가볍게 유지하자
서버 컴포넌트와 클라이언트 컴포넌트 사이에 데이터를 전달할 때 조심
큰 데이터를 전달하면 성능에 영향줄 수 있음
초기 렌더링이 필요하지 않다면 클라이언트 컴포넌트에서 데이터를 가져오는 것도 방법
??서버 컴포넌트 사이에서 상태를 공유해야 한다면 해당 상태를 공유된 클라이언트 컴포넌트로 전달하는 것을 고려
Last updated