데이터 가져오기, 캐싱, 그리고 환경 변수

서버에서 데이터 가져오기 (Data Fetching)

웹 서비스는 다른 서버의 API(데이터베이스나 외부 서비스와 소통하는 창구)로부터 데이터를 가져와 화면에 그리는 것이 주된 역할입니다. Next.js에서는 이러한 작업을 아주 직관적으로 수행할 수 있습니다.

기본 Fetch 함수 사용하기

자바스크립트에 내장된 `fetch` 함수를 사용하면 외부 서버에 데이터를 요청할 수 있습니다. 우리가 앞서 배웠던 `async/await` 비동기 문법을 활용하여 데이터가 도착할 때까지 기다렸다가 화면에 렌더링하는 것이 일반적인 패턴입니다.

Next.js의 서버 컴포넌트에서는 브라우저의 제약 없이 이 작업을 서버 측에서 직접 수행할 수 있습니다. 덕분에 브라우저의 성능에 구애받지 않고 서버 대 서버로 훨씬 빠르고 안정적으로 데이터를 받아올 수 있습니다.

export default async function MoviePage() {
  // 서버에서 데이터 가져오기를 기다립니다
  const response = await fetch('https://api.example.com/movies');
  const movies = await response.json();

  return (
    <ul>
      {movies.map((movie) => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

한 번 가져온 데이터 재사용하기: 캐싱 (Caching)

만약 쇼핑몰 메인 페이지에 들어오는 수만 명의 사용자에게 똑같은 상품 목록을 보여줘야 한다고 가정해 보겠습니다. 매번 사용자가 접속할 때마다 데이터베이스에 상품 목록을 새로 요청한다면 서버는 엄청난 과부하에 시달리게 됩니다.

캐싱이 필요한 이유와 원리

캐싱(Caching) 은 한 번 가져온 데이터를 임시 저장소(캐시)에 기억해 두고, 다음 번에 똑같은 요청이 들어오면 서버나 데이터베이스를 괴롭히지 않고 기억해둔 데이터를 즉시 꺼내 보여주는 기술입니다. 이를 통해 웹 페이지의 로딩 속도를 드라마틱하게 끌어올리고 서버 비용을 절약할 수 있습니다.

Next.js의 자동 캐싱 시스템

Next.js의 기본 `fetch` 함수는 이 캐싱 기능이 내장되어 있습니다. 기본적으로 한 번 외부 API를 호출하면, Next.js는 그 결과를 스스로 기억해두고 재사용합니다.

만약 AI가 작성해 준 코드가 데이터를 불러오는데, 데이터베이스를 수정해도 화면이 계속 과거의 데이터를 보여준다면 십중팔구 이 '캐싱'이 너무 강력하게 걸려 있기 때문입니다. 이때는 AI에게 "데이터를 캐시하지 말고 항상 실시간으로 가져오도록 fetch 옵션을 수정해줘"라고 요청하면 됩니다.

민감한 정보 보호하기: 환경 변수 (Environment Variables)

외부에서 데이터를 가져오거나 결제 시스템을 연동할 때, 보통 우리는 서비스 제공자로부터 부여받은 '비밀 키(API Key)'를 사용해야 합니다.

환경 변수란 무엇인가

만약 코드 안에 이 비밀 키를 적어두면 소스 코드가 유출되었을 때 누구나 여러분의 이름으로 유료 서비스를 마음대로 사용할 수 있게 됩니다. 이런 사고를 막기 위해, 소스 코드에는 절대 비밀 키를 적지 않고 별도의 안전한 파일(`.env`)에 숨겨두고 꺼내 쓰는 방식을 사용하는데, 이를 환경 변수라고 부릅니다.

NEXT_PUBLIC의 의미와 주의점

Next.js에서 환경 변수를 다룰 때는 아주 엄격한 보안 규칙이 존재합니다.

AI와 작업할 때 종종 "환경 변수가 undefined로 나옵니다"라는 오류가 발생한다면, 브라우저 환경에서 보안상 숨겨진 키에 접근하려고 했기 때문일 가능성이 큽니다. 이럴 때는 로직을 서버 컴포넌트로 옮기거나, 공개해도 안전한 키인지 점검해야 합니다.