학습 Next.js - Day 15 / App Router 데이터 페칭, 데이터 캐싱, Request Memoization

• App Router에서는 Server Component를 통해 직접 데이터 페칭이 가능하며, 필요한 컴포넌트에서 비동기 함수로 데이터를 불러올 수 있다. 이는 Page Router의 방식과 달리, 데이터가 최상단에 집중되지 않아 하위 컴포넌트로의 Props 전달이 복잡하지 않다.

• Cilent Component는 비동기 방식의 동작을 권장하지 않으며, 환경변수를 사용할 때는 주의가 필요하다.

• NEXT_PUBLIC 접두사가 없는 환경변수는 서버에서만 사용 가능하며, 클라이언트 컴포넌트에서는 접근할 수 없다.

• Next.js의 데이터 캐시 기능을 활용하면 서버 자원을 절약할 수 있으며, 다양한 캐시 옵션(force-cache, no-cache, revalidate, tags)을 통해 데이터 요청을 효율적으로 관리할 수 있다.