[Next] 동일한 페이지에 CSR, SSR을 상황에 맞게 적용하는 방법

해당 글에서는 동일한 페이지에서, 주소 입력으로 바로 가는 경우에는 SSR을 적용하고 다른 페이지에서 타고 들어가는 경우에는 CSR을 적용하는 방법을 설명합니다.

핵심은 getServerSideProps, getStaticProps와 같이 서버 단에서 실행되는 함수들에서 분기를 어떻게 하느냐입니다.

export async function getServerSideProps({
  req: { url }
}: GetServerSidePropsContext) {
  const isClient = isClientReq(url)

  // CSR인 경우
  if (isClient) {
    return {
      props: {
        ...
      },
    }
  }

  // SSR인 경우
  ...
}

export const isClientReq = (
  url: string | undefined
) => url?.startsWith('/_next')

getServerSideProps를 예로 들겠습니다.
이 메서드에서는 GetServerSidePropsContext라는 인터페이스를 가지는 context라는 객체를 매개변수로 갖습니다.

여기서, req에서 url을 가져올 수 있는데 CSR인 경우에는 내부적으로 /_next라는 주소가 앞에 붙습니다.

그래서 이것을 기준으로 CSR인지, SSR인지 구분할 수 있게 되므로 위와 같이 isClientReq라는 함수를 만들 수 있게 됩니다.

req?.url?.startsWith('/_next') 기준으로 CSR인지 SSR인지 구분할 수 있게 됩니다.