프로젝트 ‘공책’의 렌더링 (CSR vs SSR)

본 글은 Next.js를 사용한 프로젝트(공책)에서 어떤 렌더링 방식을 적용할지 고민해보고 적용해본 후 작성한 내용입니다.

Next.js의 렌더링 방식과 특징

SSR

• Next.js는 기본적으로 모든 페이지를 Pre-rendering(SSR or SSG)합니다. (참조: Next.js 공식문서 - Rendering)
  웹 페이지를 서버에서 최초로 렌더링하여 완전한 HTML 페이지를 클라이언트에 전달합니다.
• SSG로 렌더링된 페이지에서 필요한 데이터를 revalidate(재검증 및 업데이트)하고 rebuild하는 ISR(Incremental Static Regeneration)을 지원합니다.
• 선택기준
  • SEO (검색 엔진 최적화) 필요성: 검색 엔진이 페이지의 내용을 쉽게 수집할 수 있어서 검색 결과에 노출이 중요할 경우 필요합니다.
  • 초기 로딩 속도: 서버에서 페이지를 렌더링하므로 최초 로딩 속도가 빠릅니다. 특히 첫 페이지 로딩이 빨라야 하는 경우 SSR을 선택할 수 있습니다.

CSR

• 페이지의 컨텐츠를 클라이언트 측에서 JavaScript를 사용하여 렌더링하는 방식입니다.
• 선택기준
  • 사용자 경험: 페이지 전환 시 화면 깜빡임 없이 부드러운 사용자 경험을 제공할 수 있습니다.
  • 서버 부하: SSR은 서버 측에서 렌더링하기 때문에 서버에 부하가 생길 수 있습니다. 대규모의 트래픽이나 사용자 요청이 많은 경우 CSR을 고려하여 서버의 부하를 줄일 수 있습니다.

프로젝트 '공책'에서는…

렌더링 방식 적용해보기

Case 1: SSR

• SSR + SWR 적용을 위해 SSR에서 응답받은 fallback을 SWR의 initialData로 세팅했습니다.

// pages/index.tsx

const Home = () => {
  const { data: session } = useSession();
  const { data } = useBooks(session?.user?.id);
  return (
    <Layout>
      ...
    </Layout>
  );
};

export default function Page({
  fallback,
}: {
  fallback: {
    [url: string]: IBooksResponse;
  };
}) {
  return (
		// SWR initial data로 설정
    <SWRConfig value={{ fallback }}>
      <Home />
    </SWRConfig>
  );
}
export async function getServerSideProps({
  req,
  res,
}: {
  req: NextApiRequest;
  res: NextApiResponse;
}) {
  const session = await getServerSession(req, res, authOptions);
	// books fallback data return
  return ssrFetcher(`/api/books?userId=${session?.user?.id}`);
}

 

Case2: CSR

• SWR은 기본적으로 CSR에 사용되므로 별다른 세팅없이 사용했습니다.

const Home = () => {
  const { data: session } = useSession();
  const { data } = useBooks(session?.user?.id);

  return (
    <Layout>
		  ...
    </Layout>
  );
};

export default Home;

렌더링 방식: CSR 채택 ✅

• 채택 이유
  • SSR 적용을 통한 SEO의 이점을 추구할 이유가 없습니다.
    • 모바일앱 형태의 서비스입니다.
    • 개인화된 메모장이므로 검색어 노출이 불필요합니다.
  • CSR 적용을 통한 부드러운 사용자 경험이 중요합니다.
    • 페이지 전환이 빠르고 자연스러워야 합니다.
      *부분적으로도 SSR을 적용할만한 페이지가 없어서 모든 페이지 CSR로 적용했습니다.