Server Component에서 API를 호출할 때 인증 등으로 헤더, 쿠키 정보가 필요할 경우 따로 첨부하기

[ucharles]

발단

• 인증과 함께 좋아요 로직 구현 중 발생
• 무한 스크롤이 적용된 랜딩 페이지에서는 서버에 헤더 정보가 전송되지만, /[lng]/capsule/[id] 혹은 /[lng]/search에서는 헤더 정보가 전송이 되지 않음

문제

• Server Component에서는 자동으로 브라우저의 헤더 정보를 첨부하지 않기 때문에, 별도로 첨부해야 함
• 헤더 정보를 별도로 첨부하지 않아, 인증이 되지 않는 현상 발생

해결

• Server Component에서 API 호출 시 인증이 필요한 경우, 아래와 같이 별도로 헤더(쿠키) 정보를 첨부

  
  // ../capsule/[id]/page.tsx

import { cookies } from "next/headers";

export default async function Page({ params: { lng, id }, }: { params: { lng: string; id: string }; }) { const cookie = cookies(); const response = await fetch(API_URI + /api/capsules/${id}?lng=${lng}, { method: "GET", next: { revalidate: cacheTimeEnum.FIVE_MINUTES }, headers: { cookie: cookie, }, }); const data = await response.json(); }

[ucharles]

https://github.com/ucharles/gachatory/pull/94 에서 반영 완료