웹 애플리케이션의 성능 최적화는 빠르고 원활한 사용자 경험을 제공하는 데 매우 중요합니다.

강력한 React 프레임워크인 Next.js를 사용하면 내장된 다양한 기능을 활용하여 앱의 속도와 효율성을 향상시킬 수 있습니다.

Next.js 앱에서 최고의 성능을 얻기 위한 10가지 주요 전략은 다음과 같습니다.

1. 필요한 JavaScript와 CSS만 로드하세요.

불필요한 파일로 인해 앱이 너무 커지는 것을 방지하려면 필수 JavaScript 및 CSS만 로드해야 합니다.

Next.js는 기본적으로 JavaScript를 자동으로 코드 분할합니다. 즉, 각 페이지는 해당 기능에 필요한 JS만 로드합니다.

마찬가지로 대용량 CSS 파일을 전체적으로 가져오는 것을 피하세요. 모듈식 또는 범위가 지정된 CSS를 사용하여 각 페이지에 로드되는 사용되지 않는 CSS의 양을 줄이세요.

구현 방법:

• 필요한 경우 구성 요소를 동적으로 가져옵니다.
• CSS 모듈 가져오기의 범위를 특정 구성 요소로 유지합니다.

import styles from './button.module.css'; // CSS module

const Button = () => {
  return Click me;
};

2. 종속성의 지연 로딩

지연 로딩은 로드 시간을 개선하는 강력한 기술입니다. 크거나 덜 중요한 구성요소가 필요할 때만 로드되도록 보장합니다.

이렇게 하면 초기 번들 크기가 줄어들어 페이지의 첫 번째 의미 있는 렌더링 속도가 빨라집니다.

구현 방법:

Next.js는 지연 로딩이 아닌 필수 구성 요소에 대한 동적 가져오기를 지원합니다.

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  ssr: false,
});

export default function Home() {
  return ;
}

3. Next.js의 구성 요소 사용

Next.js는 내장된 구성 요소를 제공하여 다양한 화면 크기와 형식에 맞게 이미지를 자동으로 최적화합니다.

이 구성요소는 이미지가 지연 로드되고 가능한 경우 WebP와 같은 최신 형식으로 제공되어 성능이 크게 향상되도록 합니다.

구현 방법:

import Image from 'next/image';

export default function Home() {
  return (
    
  );
}

4. JavaScript보다 CSS를 선호하세요

가능하다면 애니메이션 및 전환에 JavaScript 대신 CSS를 사용하세요.

CSS 애니메이션은 하드웨어 가속을 활용할 수 있으므로 일반적으로 성능이 더 뛰어난 반면, JavaScript 기반 애니메이션은 버벅거림 및 성능 병목 현상을 일으킬 수 있습니다.

예:

간단한 페이드인 효과를 위해 JavaScript를 사용하는 대신 CSS 전환을 사용하세요.

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.fade-in-visible {
  opacity: 1;
}

5. 처음에 로더를 표시하지 마세요.

스피너 또는 스켈레톤 화면을 로드하면 사용자에게 진행 상황을 알 수 있지만 앱이 느리다는 신호를 보낼 수도 있습니다.

처음에 로더를 표시하는 대신 콘텐츠를 빠르고 점진적으로 로드하도록 앱을 최적화하는 데 집중하세요.

구현 방법:

• 서버 측 렌더링(SSR) 또는 정적 사이트 생성(SSG)을 사용하여 콘텐츠를 미리 로드합니다.
• 주 콘텐츠가 렌더링된 후 페이지에서 덜 중요한 부분을 지연 로드합니다.

6. Next.js 글꼴 최적화 사용

글꼴을 제대로 처리하지 않으면 로드 시간이 느려질 수 있습니다. Next.js에는 성능 향상을 위해 앱에 가장 적합한 글꼴 로딩 전략을 자동으로 선택하는 글꼴 최적화 기능이 내장되어 있습니다.

구현 방법:

내장된 Google Fonts 통합을 사용하여 최적의 성능으로 글꼴을 로드하세요.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Home() {
  return 
Hello, world!
;
}

7. 스크립트 최적화

필요한 경우에만 외부 스크립트를 로드하세요. 스크립트가 특정 페이지에만 필요하지만 전체 앱에는 필요하지 않은 경우 전역적으로 로드하지 마세요.

Next.js를 사용하면 구성 요소를 사용하여 스크립트가 로드되는 방법과 시기를 제어할 수 있습니다.

구현 방법:

import Script from 'next/script';

export default function Home() {
  return (
    
      >
  );
}

최적화 전략:

• 필수적이지 않은 스크립트에는 strategy="lazyOnload"를 사용하세요.
• 사용자 상호작용 전에 필요한 중요한 스크립트에는 strategy="beforeInteractive"를 사용하세요.

8. 사용하지 않는 패키지 제거

시간이 지남에 따라 프로젝트가 발전함에 따라 번들을 부풀리는 사용하지 않는 종속성이 축적될 수 있습니다.

depcheck와 같은 도구를 사용하여 사용하지 않는 패키지를 정기적으로 확인하고 제거합니다.

구현 방법:

프로젝트에서 depcheck를 실행하여 사용되지 않는 종속성을 찾아서 제거하세요.

npx depcheck

9. 현재 번들 크기 확인

성능 저하를 방지하려면 번들 크기를 주의 깊게 관찰하는 것이 중요합니다.

@next/bundle-analyzer 도구를 사용하면 번들에 있는 각 모듈의 크기를 시각화하여 대규모 종속성을 더 쉽게 식별하고 최적화할 수 있습니다.

10. 서버 구성 요소 사용

Next.js 13에는 서버에서 페이지의 일부를 렌더링하고 최소한의 JavaScript만 클라이언트에 보낼 수 있는 서버 구성 요소가 도입되었습니다.

이렇게 하면 클라이언트 측 JavaScript의 양이 크게 줄어들어 성능이 향상됩니다.

결론

Next.js 앱의 성능 최적화는 지속적인 프로세스이지만 이러한 모범 사례를 따르면 로드 시간을 크게 줄이고 사용자 경험을 개선할 수 있습니다.

앱이 처음부터 빠르고, 반응성이 뛰어나고, 효율적인지 확인하려면 다음 전략을 구현하세요!

즐거운 코딩하세요!