Next 캐싱 문제

MongoDB의 Collection에 데이터를 패칭하고 패칭한 데이터를 이제 컴포넌트에 불러오는 것을 공부 중에 있었다.

[app>api>movies>route.ts]

import { NextRequest, NextResponse } from "next/server";
import clientPromise form "../../../lib/mongodb";

export async function GET(request: NextRequest) {
  console.log('--------');
  try {
    const client = await clientPromise;
    const db = client.db('sample_mflix');
    const movies = await db.collection('nomad').find({}).toArray();
    return NextResponse.json(movies);
  } catch (error) {
    return NextResponse.error();
  }
}

[app>(home)>page.tsx]

async function getMovies() {
  const response = await fetch('http://localhost:3000/api/movies', {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }
  
  const movies = await response.json();
  return movies;
}


export default async function HomePage() {
  const movies = await getMovies();
  return (
    <div>
      {movies.map(movie => (
        <Movie key={movie.id} id={movie.id} title={movie.title} />
        ))}
      </div>
    )
}

이렇게 하면 잘 렌더링 된다.

그러다 문뜩 MongoDB 의 데이터를 조작하면 어떻게 되는지 궁금해졌다.
그래서 collection 의 데이터를 조금 변형해봤다.

Inside Out2 > Inside Out3

---

제목을 바꿔봤고 전체 데이터를 갖고오는 것이 아닌 5개의 데이터를 갖고 오도록 하였다.
코드를 다음과 같이 바꿨다.

[app>api>movies>route.ts]

const movies = await db.collection('nomad').find({}).limit(5).toArray();

이제 내 예상은 Inside Out의 제목은 3으로 바뀌어야했고 데이터는 5개만 가져와야했다.
하지만, 예상과 반대로 전과 다름없는 화면을 렌더링 하고 있었다.

무슨 문제인가 하고 곰곰히 생각해보았다.

[ 1. MongoDB 의 변경된 데이터가 반영이 안되었다. ]

혹시나 MongoDB 에서만 적용이 되고 api fetch 할 때는 전혀 반영이 안되었을 수도 있다.
그래서 다음과 같은 url 주소에 접속해보았다.

http://localhost:3000/api/movies

이 곳에 들어가면 내가 패칭한 json이 있기 때문이다.
확인해본 결과, MongoDB 에서 변경한 데이터가 잘 패칭되었다. 그렇다면 api 의 문제는 아니다.

[ 2. 브라우저 캐싱 문제 ]

그렇다면 캐싱문제가 아닐까 라는 생각을 하였다. 코드상에서는 문제가 없어 보였기 때문이다.
따라서, 강력새로고침 (Ctrl + F5) 를 해보았다.

그랬더니, Inside Out3 의 제목과 5개의 데이터들이 렌더링 되었다.