[인사이트아웃] Next.js의 parallel route를 이용하여 페이지 성능 개선하기

728x90

자기소개서 작성이 막막할 땐? https://www.insightout.kr/

배경

매우 느리던 자기소개서 페이지의 로딩 속도를 개선한 사례를 소개하고자 한다.

Next.js의 parallel route를 사용하여 페이지 로딩 속도를 약 94% 개선한 내용을 공유한다.

인사이트아웃은 사용자 경험을 위해 자기소개서 작성 페이지를 접속하면 가장 최근에 작성했던 자기소개서를 보여준다.

이 페이지를 접속하기까지는 약 10초가 걸리는 치명적인 문제점이 있었다.

원인

문제의 원인은 자기소개서 작성 라우팅 방식때문이었다.

자기소개서 작성하기 메뉴를 클릭하면 /resumes/${questionId}로 이동한다.

questionId는 가장 최근에 작성했던 자기소개서로, 자기소개서 목록 조회 API 조회 후 가장 첫번째 자기소개서 질문 항목이 questionId이다.

자기소개서 레이아웃은 아래와 같은 구조를 가지고 있었다.

// app/resumes/layout.tsx

const Layout = ({ children }: PropsWithChildren) => {
  return (
    <>
      <Aside />
      <ResumeForm />
      <MyExperienceCard />
    </>
  );
};

자기소개서 목록 조회 API 조회 -> 가장 첫번째 자기소개서 질문 항목의 questionId를 찾기 전까지는 자기소개서 뿐만 아니라 자기소개서 목록 Aside, 자기소개서와는 무관한 내 경험카드까지 볼 수 없는 현상이 발생한다.

문제 해결: Parallel Routes

Next.js에서 동일한 레이아웃에서 여러개의 페이지를 렌더링을 동시에 할 수 있도록 하는 기능이다.

아래 이미지를 참고하면 더 직관적으로 이해할 수 있다.

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

Routing: Parallel Routes | Next.js

Using App Router Features available in /app

nextjs.org

이 방식을 이용해서 자기소개서 작성 페이지에서 Aside(핑크), ResumeForm(녹색), MyExperienceCard(파랑)을 "병렬적"으로 렌더링할 수 있다.

Parallel Route를 도입하기 이전

하나의 layout에서 여러개의 컴포넌트가 있다.

// app/resumes/layout.tsx

const Layout = ({ children }: PropsWithChildren) => {
  return (
    <>
      <Aside />
      <ResumeForm />
      <MyExperienceCard />
    </>
  );
};

각 컴포넌트의 로딩 상태와 에러 상태를 페이지 전역으로 관리된다.

예를 들어, Aside에서만 에러가 발생하더라도 페이지 전체에 에러로 전파된다.

Parallel Route 도입

@로 시작하는 폴더 컨벤션을 갖고 있어서, @폴더이름 내부에 page.js를 만들어주면 Parallel Routing 기능을 사용할 수 있다.

Parallel Routing은 각각의 에러와 로딩 상태를 정의할 수 있다.

@폴더이름 내부에 Next.js가 컨벤션으로 사용하고 있는 loading.js, error.js를 생성해주면 된다.

@폴더이름 컨벤션으로 정해진 slot은 같은 레벨의 레이아웃의 props로 전달된다.

즉, @aside, @myExperienceCard가 resumes/layout.tsx의 props로 전달된다.

import { PropsWithChildren, ReactNode } from 'react';

type LayoutProps = PropsWithChildren & {
  aside: ReactNode;
  myExperienceCard: ReactNode;
};

const Layout = ({ children, aside, myExperienceCard }: LayoutProps) => {
  return (
    <Container>
      {aside}
      {children}
      {myExperienceCard}
    </Container>
  );
};

export default Layout;

관심사의 분리: 에러, 로딩 처리

만약 경험카드 API는 성공했지만 자기소개서 API를 실패한 경우 다음과 같은 화면을 보여줄 수 있다.

원래 이러한 화면을 컴포넌트 내부에서 if문을 사용해서 처리하고 있었다.

이전 코드

// components/ResumeForm.tsx

const ResumeForm = () => {
  ...
  
  if (questionStatus === 'loading') return <Spinner />;
  if (!question && questionStatus !== 'loading') return <NotFoundResume />;
  
  return (
    <form onSubmit={handleResumeSubmit}>
      <FormHeader />
      <textarea
        ref={titleTextareaRef}
        value={title ?? ''}
        onChange={handleTitleChange}
        onBlur={handleTitleBlur}
        maxLength={MAX_LENGTH.TITLE}
        placeholder="문항 질문을 적어보세요."
        className="w-full min-h-[96px] py-[6px] resize-none subhead2 placeholder:text-light"
      />
    ...
    )
 };

하나의 컴포넌트 내부에서 로딩과 에러 처리를 모두 하고 있다.

만약 에러 케이스가 더 생기는 경우에는 이 컴포넌트는 점점 거대해질 것이다.

이후 코드

// apps/resumes/[questionId]/page.tsx

const Page = () => {
  return (
    <form onSubmit={handleResumeSubmit}>
      <FormHeader />
      <textarea
        ref={titleTextareaRef}
        value={title ?? ''}
        onChange={handleTitleChange}
        onBlur={handleTitleBlur}
        maxLength={MAX_LENGTH.TITLE}
        placeholder="문항 질문을 적어보세요."
        className="w-full min-h-[96px] py-[6px] resize-none subhead2 placeholder:text-light"
      />
    ...
    )
 };

// apps/resumes/[questionId]/error.tsx

const Error = () => <NotFoundResume />;

한 파일에서 에러 처리가 함께 있었던 것을 파일로 분리하여 관심사를 분리할 수 있었다.

결과

성능

Parallel Routing을 적용한 결과, 10초 -> 603밀리초로 9.5초를 단축시켰다.

퍼센테이지로 환산하면 약 94.13% 로딩 속도가 줄어들었다.

코드

Parallel Routing을 통해 성능 뿐만 아니라 클린하게 코드를 작성할 수 있었다.

각 페이지의 로딩 상태와 에러 상태를 분리하여 관리할 수 있다.
내부 컴포넌트의 복잡한 분기처리를 줄일 수 있다.
독립적으로 페이지를 분리하여 레이아웃이 거대해지는 것을 막을 수 있다.