% 중요 %

SSR 컴포넌트 안에 (상위 페이지)에서 CSR은 가능하나

CSR 컴포넌트 안에 (상위 페이지)에서 SSR은 불가. 즉, 컴포넌트단에 async 를 못함.

% 중요 %

1. 일반적인 fetch 방식

export const fetchCalendar = async (
  params: fetchCalendarDataType
): Promise<fetchCalendarDataType[]> => {
  const { fieldId, year, month } = params;
  const response = await fetch(
    `${DIARY_URL}/v1/diary/calendar/${fieldId}${makeQuerystring({
      year,
      month,
    })}`,
    {
      cache: "no-store", // 매번 캐싱
      method: "GET",
    }
  );

  return await response.json();
};
interface ApiResponse {
  data: fetchAutoDiaryDataType;
}

1. POST , PUT 및 Authorization 방식

  const putNewNickname = async () => {
    const response = await fetch(`${MEMBER_URL}/v1/user/nickname`, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${userInfo.accessToken}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ nickname: newNickname }),
    });
    if (response.ok) {
      window.location.reload();
    }
  };

1. SSR, SSG 방식

컴포넌트 단에 async 로 데이터 페칭 >>

%%

SSR 이란 ? : Server-Side-Rendering, 요청 때마다 새로운 데이터를 패칭해서 보내줌

no-store (매 요청마다 fetch)

SSG 이란 ? Static-Side-Generation, 정적인 페이지(Static)일 때 사용 가능, 매번 캐싱 X