🔧 Next.js 성능 최적화기 ② - 지연 로딩으로 메인스레드 다이어트 하기

Minimize main-thread work, 6.7초 😓

Minimize main-thread work가 6.7초로, 첫 페이지 열자마자 메인스레드가 할 일이 너무 많이 상태였다.
JS 파일이 많고, 데이터도 엄청 불러오고 렌더링도 많아지니까 그런거 같았다.
근데 나는 컴포넌트도 잘 쪼개고, use client도 최대한 줄이면서 서버 컴포넌트로 잘 써놨어서 더이상 구조적으로 쪼갤 건 없었다.
그래서 결국 남은 문제는:

첫 페이지에서 너무 많은 걸 보여주고 있었던 게 문제였다.

---

그래서 나는 "지연 로딩"을 적용했다.

지연 로딩은 말 그대로 지연해서 로딩하는 것이다.
필요한 시점이 될 때 그때 가서 객체(컴포넌트)를 가져오는 방식이라고 이해하면 된다.

첫 페이지에서 바로 보여주지 않아도 되는 것은 지연로딩으로 메인스레드의 부담을 줄이는 방법

예를 들어 내 사이트에서는

• 로그인 / 마이페이지 버튼
  헤더에 바로 보여야 하니까 지연 로딩이 불가능함
• 로그인 / 회원가입 모달
  버튼 누르기 전까진 안 보여도 되니까 지연 로딩하기 딱 좋음
• 인기 스터디 슬라이더
  스켈레톤 UI가 있어서 처음부터 꼭 보여줄 필요는 없음 → 지연 로딩 적합

---

로그인 모달 지연 로딩

Next.js에서 동적 import 할 땐 dynamic()을 쓰는데, 이건 클라이언트 컴포넌트에서만 가능하다.
그래서 나는 DynamicmodalWrapper.tsx라는 클라이언트 컴포넌트를 하나 생성했다.

"use client";
import dynamic from "next/dynamic";

// 모달 컴포넌트 동적 import, SSR 비활성화
const LoginSignupModal = dynamic(
  () => import("@/components/auth/LoginSignupModal"),
  { ssr: false }
);

export default function DynamicModalWrapper() {
  return <LoginSignupModal />;
}

여기서 ssr: false는 서버에 렌더링하지 않고 브라우저에만 렌더링하겠다는 뜻이다. 이 모달 컴포넌트는 유저가 버튼을 눌러서 필요한 순간에만 불러오게 되는 것!

---

✅ 인기 스터디 슬라이더도 지연 로딩

로그인 모달처럼 인기글 슬라이더도 dynamic으로 감쌌다.

const PopularStudySlider = dynamic(() => import("./PopularStudySlider"), {
  ssr: false,
  loading: () => (
    <div className="grid grid-cols-1 md:grid-cols-3  ">
      {Array.from({ length: 1 }).map((_, i) => (
        <PopularCardSkeleton key={i} />
      ))}
    </div>
  ),
});

처음에는 인기글도 지연로딩을 하는게 맞는지 고민했다. 인기글은 빠르게 보여주는게 좋을거 같아서
근데 오히려 지연로딩을 적용하니까 페이지가 더 빨라져서 인기글이 더 빨리 보이는 느낌이 들었다.
아마 전체 페이지가 무거워서 느려지던게 지연로딩으로 조금 분산되니까 나머지가 더 빨리 로딩되는게 아닐까?

추가적으로 loading 옵션을 사용해서 스켈레톤 UI을 보여주면서 사용자 경험을 향상시켰다.

---

최종결과

이렇게 인기글 슬라이더 + 로그인 모달을 지연 로딩으로 분리하고 나서 다시 성능 측정해봤더니…

Minimize main-thread work
6.7초 → 5.6초로 줄어듦!! 🎉

간단한 지연 로딩으로 1.1초나 줄어들어서 만족스러웠다.

---

다음편에서는 DB 최적화와 인덱스 추가 등으로 백엔드 응답 속도를 줄인 과정을 정리할 예정임니다.