[프로젝트] Next.js_🫠 4

들어가기 전에...

지금까지 생겼던 의문들을 정리해보자

Q1. SSR은 빌드시점에 데이터를 다 가져오는게 아닌데 어떻게 SEO 측면에 유리한 걸까?

SSR(서버 사이드 렌더링)은 각 요청마다 서버 측에서 데이터를 가져와 페이지를 렌더링함. 따라서 SSR은 빌드 시점에 데이터를 미리 가져오지 않음.
SSR은 초기 로딩 시에 완전한 HTML 페이지를 제공

Q2. CSR을 해도 결국 api를 요청하는건 서버에 요청하는거 아닌가? 이게 SSR과 정확히 뭐가 다른거지? SSR도 서버에 요청을하고 CSR도 서버에 요청하잖아

초기 로딩 시점에 데이터를 가져오는 위치가 서버인지 클라이언트인지가 두 방식의 주요한 차이점
CSR의 경우, 초기에는 빈 페이지가 로드되고, 이후 JavaScript가 실행되면서 데이터가 가져와지고 페이지가 업데이트됨.
반면에 SSR의 경우, 서버가 페이지를 렌더링하면서 필요한 데이터를 미리 가져와서 완전한 페이지를 제공함.

CSR:
사용자가 페이지에 접속
페이지는 초기에 빈 상태로 로드
클라이언트 측 JavaScript는 API를 호출하여 데이터를 가져옴
데이터가 성공적으로 불러와지면, 페이지는 해당 데이터를 사용하여 렌더링

SSR:
사용자가 페이지에 접속
서버는 초기 요청에 대해 페이지를 렌더링하면서 API를 호출하여 데이터를 미리 가져옴
서버는 완전한 형태의 페이지를 사용자에게 제공, 페이지에는 미리 불러온 데이터가 포함되어있음.

Q3. SSG,SSR,CSR 각각 API를 부르는 시점이 어떻게 될까?

SSG->SSR->CSR
SSG은 빌드 시점에 데이터를 불러오므로, 사용자가 페이지에 접속했을 때 가장 빠르게 렌더링됨.
SSR은 각 요청마다 서버 측에서 데이터를 가져오므로, SSG보다는 느릴 수 있지만, CSR보다는 빠르게 페이지를 제공함.
CSR은 초기에는 빈 페이지가 로드되고, 이후에 클라이언트 측 JavaScript가 실행되면서 데이터를 가져옴.

✅ SSR 직접사용해보기

SHOP화면 카테고리 데이터, 제품 데이터를 불러올때 SSR,SSG 중 선택을 해야함.

관리자가가 제품 데이터 하나를 추가했을 경우, 사용자가 내가 추가한 그 제품 데이터를 볼 수 있으려면....

• SSG를 사용할 경우
  getStaticProps에서 revalidate 옵션을 사용해야 함. revalidate을 사용하지 않으면, 정적 생성된 페이지는 빌드된 이후에만 업데이트되며, 새로운 데이터를 반영하려면 명시적으로 개발자가 빌드를 다시 실행해야함.
  revalidate의 경우 페이지 내용이 변경되었을 때만 새로운 데이터를 가져와서 페이지를 갱신함. 데이터가 변경되지 않았다면 이전에 생성된 정적 페이지를 계속 사용함.

• SSR을 사용할 경우
  새로운 데이터를 요청 시에 동적으로 가져와서 페이지를 렌더링할 수 있음.
  데이터 업데이트 시에 빌드를 다시 실행할 필요가 없음.

SSR 구현 예시

export async function getServerSideProps() {
  const queryClient = new QueryClient();

  const productQuery = await queryClient.prefetchQuery(
    [QUERYKEYS.LOAD_PRODUCT],
    loadMarketProduct,
  );

  const categoryQuery = queryClient.prefetchQuery(
    [QUERYKEYS.ADMIN_GET_CATEGORY],
    adminGetCategory,
  );

  await Promise.all([productQuery, categoryQuery]);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

  const queryClient = useQueryClient();

  const productData = queryClient.getQueryData([QUERYKEYS.LOAD_PRODUCT]) as {
    data: {
      content: Array<any>;
    };
  };

  const categoryData = queryClient.getQueryData([
    QUERYKEYS.ADMIN_GET_CATEGORY,
  ]) as { data: Array<any> };

getServerSideProps 함수를 사용하여 서버 측에서 데이터를 가져오고, 그 데이터를 클라이언트로 전달
클라이언트 측에서는 useQueryClient 훅을 사용하여 동일한 쿼리 클라이언트에 접근하고, 이전에 불러온 데이터를 가져옴

이 글을 작성할때까지만 해도 SSR로 구현하려고 했지만, SSG를 사용하기로 결정

이유 : 관리자는 새로운 제품 데이터는 일주일에 한번 업데이트하고, 카테고리 데이터의 경우는 거의 잘 변하지 않음. 이럴 경우 SSG를 하는게 효율적임.

SSG 구현

export async function getStaticProps() {
  const queryClient = new QueryClient();

  // Prefetch queries
  await queryClient.prefetchQuery([QUERYKEYS.LOAD_PRODUCT], loadMarketProduct);
  await queryClient.prefetchQuery(
    [QUERYKEYS.ADMIN_GET_CATEGORY],
    adminGetCategory,
  );

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
    revalidate: 10,
  };
}

아래는 SSR과 동일

끝!...

🫠