[NextJs] NextJs 로딩 최적화 하기 (스트리밍, Suspense, Static 렌더링)

저번글

[NextJs] NextJs 시작하기 (NextJs란?, NextJs 핵심기능)

 

- 문제

 

저번글에도 언급했지만, NextJs는 정적 사이트에 React(동적)를 사용할 수 있게 해주는 프레임워크입니다. 

아래 사진은 제 웹 프로젝트 초기 빌드 결과입니다

 

404 페이지를 제외하고는 모든 페이지가 동적 렌더링되고 있는것을 확인 할 수 있습니다.

이게 꼭 나쁘다고는 할 수 없지만, 개인적으로는 이럴꺼면 Next를 사용할 이유가 없다고 생각합니다.

 

따라서 아래 과정으로 제 프로젝트를 리팩토링 하였습니다.

 

- 해결

우선 문제 원인을 찾아야 했습니다.

따라서 처음 한 행동은 모든 코드를 주석 처리한 후 하나씩 해제하면 어떤 부분이 동적 렌더링으로 만드는지 찾는거였습니다.

 

처음 찾은 문제는 아무런 조치없이 루트 레이아웃에서 데이터를 가져오는 행위였습니다

 

이전코드

const MainLayout = async ({ children }: { children: React.ReactNode }) => {

  const profile = await getCurrentUser();
  const games = await getGames();
  const servers = await getServers();

return (
    <main className="relative bg-light-850 dark:bg-dark-100">
      <NotificationModal />
      <MainNavbar profileId={profile?.id} servers={servers} games={games} isStatic={false} />
      <div className="flex">
      	<LeftSidebar profileId={profile?.id} games={games} servers={servers} />
        <section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-36 max-md:pb-14 sm:px-14">
          <div className="mx-auto w-full max-w-5xl">{children}</div>
        </section>
      </div>
    )
};

 

아무런 조치를 취하지 않았기 때문에, 해당 웹사이트는 3개의 데이터 가져오기가 완료된 후에 렌더링이 될것입니다.

이것은 거의 최악이라고 생각합니다.

 

이를 해결하기 위해 파일 분리를 시도하였습니다.

즉, 데이터를 가져오는 로직을 최대한 하위 컴포넌트로 내렸습니다.

 

이후코드

// layout.tsx
const MainLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <main className="relative bg-light-850 dark:bg-dark-100">
      <NotificationModal />
      <MainNavbar />
      <div className="flex">
        <LeftSidebarWrapper />
        <section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-36 max-md:pb-14 sm:px-14">
          <div className="mx-auto w-full max-w-5xl">{children}</div>
        </section>
        <RightSidebar />
      </div>
    </main>
  );
};

// MainNavbar.tsx
const MainNavbar = () => {
  return (
    <nav className="flex-between background-light900_dark200 fixed z-50 w-full gap-5 p-6 shadow-light-300 dark:shadow-none sm:px-12">
      <Link href="/" className="flex items-center gap-4">
        <Image src="/images/logo.png" width={30} height={30} alt="GameCord" />
        <p className="h2-bold font-spaceGrotesk text-dark-100 dark:text-light-900 max-sm:hidden">
          Game<span className="text-primary-500">Cord</span>
        </p>
      </Link>
      <GlobalSearch />
      <div className="flex-between gap-5">
        <ThemeToggle />
        <UserButtonWrapper />
        <Suspense fallback={<div />}>
          <MainMobileNavbarWrapper />
        </Suspense>
      </div>
    </nav>
  );
};

// MainMobileNavbarWrapper.tsx
const MainMobileNavbarWrapper = async () => {
  const servers = await getServers();
  const games = await getGames();

  return <MainMobileNavbar servers={servers} games={games} />;
};

export default MainNavbar;

// LeftSidebarWrapper.tsx
const LeftSidebarWrapper = async () => {
  const servers = await getServers();
  const games = await getGames();

  return <LeftSidebar servers={servers} games={games} />;
};

 

이런식으로 레퍼 컴포넌트를 생성하여 해당 레퍼 컴포넌트에서 데이터를 가져오게 하고, Suspense를 활용하여 데이터를 스트리밍하였습니다.

 

이러면 Suspense로 감싸져있는 부분을 빈 공간으로 처리하고, 그 외 html을 가져오는 효과를 받을 수 있습니다.

이후 데이터 가져오는것이 완료되면 빈 공간이 매꿔지는 "스트리밍" 방식의 처리입니다.

 

결과는 성공적이였습니다.

- 결과

위의 작업들로 얻은 결과는 크게 두가지입니다.

1. 홈페이지를 정적 렌더링으로 만들어 최초 로딩 개선

2. 데이터를 가져오는 컴포넌트들을 스트리밍 방식을 통해 유저 경험 향상

 

이전 post 상세 페이지 진입

 

이후 post 상세 페이지 진입

 

이전과 비교했을 때, 극명한 차이를 느낄 수 있었습니다.

 

- 깃허브 이슈들

첫 렌더링시 Suspense와 Streaming을 활용하여 유저경험 향상시키기 · Issue #121 · joseph0926/GameCord

첫 렌더링시 Suspense와 Streaming을 활용하여 유저경험 향상시키기 · Issue #121 · joseph0926/GameCord

하위 페이지에 메타데이터 추가 & React.cache를 이용한 중복 호출 최적화 · Issue #123 · joseph0926/GameCord

하위 페이지에 메타데이터 추가 & React.cache를 이용한 중복 호출 최적화 · Issue #123 · joseph0926/GameCo

[FEAT] 메인 네비바 로딩 최적화 · Issue #128 · joseph0926/GameCord

[FEAT] 메인 네비바 로딩 최적화 · Issue #128 · joseph0926/GameCord

[FEAT] 로딩 최적화 · Issue #146 · joseph0926/GameCord

[FEAT] 로딩 최적화 · Issue #146 · joseph0926/GameCord

 

- 배포 링크

GameCord