Dynamic Server Usage 에러와 Async Context

// 예시: API Controller
export const getUsers = async (request) => {
  const url = new URL(request.url);
  const email = url.searchParams.get("email") || "";
  // ...
}

// 잘못된 예제: setTimeout 내부에서 cookies() 호출
import { cookies } from 'next/headers';
 
async function getCookieData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      // setTimeout 내부는 원래의 Async Context와 분리됨
      const allCookies = cookies().getAll(); // 이 시점에 실행 컨텍스트가 달라져 에러 발생
      resolve(allCookies);
    }, 1000);
  });
}
 
export default async function Page() {
  const cookieData = await getCookieData();
  return <div>Cookie 데이터 확인</div>;
}

// 잘못된 예제: await를 제대로 사용하지 않음
import { headers } from 'next/headers';
 
async function getHeaderData() {
  // 여기서 Promise를 반환하지만 await가 없으면 이후 호출 시점이 달라짐
  return new Promise((resolve) => {
    // 예를 들어, fetch 작업 후 then() 안에서 headers()를 호출한다고 가정
    setTimeout(() => {
      const allHeaders = headers().getAll(); // 새로운 실행 컨텍스트에서 호출됨
      resolve(allHeaders);
    }, 1000);
  });
}
 
export default async function Page() {
  // getHeaderData()를 제대로 await하지 않으면 컨텍스트가 바뀔 수 있음
  const headerDataPromise = getHeaderData();
  // 이 시점에서 headerDataPromise는 아직 완료되지 않았고, 이후 처리 시점에 실행 컨텍스트가 달라짐
  const headerData = await headerDataPromise;
  return <div>Header 데이터 확인</div>;
}

// 올바른 예제: Async Context 내에서 미리 데이터를 추출
import { cookies } from 'next/headers';
 
async function getCookieData() {
  // 먼저 cookies()를 호출하여 원래의 실행 컨텍스트 내에서 데이터를 가져옴
  const allCookies = cookies().getAll();
  return new Promise((resolve) => {
    setTimeout(() => {
      // 이후 비동기 작업에서는 미리 가져온 데이터를 사용
      resolve(allCookies);
    }, 1000);
  });
}
 
export default async function Page() {
  const cookieData = await getCookieData();
  return <div>Cookie 데이터: {JSON.stringify(cookieData)}</div>;
}

// 올바른 예제: Promise를 올바르게 await
import { headers } from 'next/headers';
 
async function getHeaderData() {
  // headers()를 먼저 호출하여 원래 컨텍스트 내에서 데이터를 가져옴
  const allHeaders = headers().getAll();
  return new Promise((resolve) => {
    setTimeout(() => {
      // 미리 가져온 데이터를 사용
      resolve(allHeaders);
    }, 1000);
  });
}
 
export default async function Page() {
  // 반드시 await를 통해 올바른 실행 컨텍스트 내에서 처리
  const headerData = await getHeaderData();
  return <div>Header 데이터: {JSON.stringify(headerData)}</div>;
}

// /app/api/armies/route.js
import { getUsers } from "@/backend/apiControllers/getUsers";
import { connectDB } from "@/backend/utils/dbConnect";
import { NextResponse } from "next/server";
 
export const GET = async (request) => {
  // try/catch 밖에서 URL 파싱
  const { searchParams } = new URL(request.url);
  
  try {
    await connectDB();
    // 필요한 경우 getUsers에 searchParams를 인자로 전달
    const users = await getUsers({ searchParams });
    return NextResponse.json(users);
  } catch (error) {
    console.error(error);
    return NextResponse.json({
      apiMessage: { errorMsg: "Internal Server Error, Please try again later" },
    });
  }
};

// /app/api/armies/route.js
// /backend/apiControllers/getUsers.js
import prisma from "@/prisma/prismaClient";
 
export const getUsers = async ({ searchParams }) => {
  const email = searchParams.get("email") || "";
  const phone = searchParams.get("phone") || "";
  const id = searchParams.get("id") || "";
 
  // ... rest codes ...
 

// /app/api/armies/route.js
export const dynamic = 'force-dynamic';
 
import { getUsers } from "@/backend/apiControllers/getUsers";
import { connectDB } from "@/backend/utils/dbConnect";
import { NextResponse } from "next/server";
 
export const GET = async (request) => {
  try {
    await connectDB();
    const users = await getUsers(request);
    return NextResponse.json(users);
  } catch (error) {
    console.error(error);
    return NextResponse.json({
      apiMessage: { errorMsg: "Internal Server Error, Please try again later" },
    });
  }
};