Next.js와 i18next를 사용한 다국어 사이트 구축(5): 성능 최적화 전략

성능 최적화 전략

Next.js와 i18next를 사용한 성능 최적화 전략

5.1 Lazy Loading을 통한 번역 파일 최적화

번역 파일을 필요한 시점에만 로드하는 방법

• 다국어 사이트에서 모든 언어의 번역 파일을 한꺼번에 로드하면 초기 로딩 시간이 느려질 수 있습니다. 이를 방지하기 위해 Lazy Loading을 사용하여 필요한 시점에 번역 파일을 로드합니다.
• Lazy Loading은 사용자가 선택한 언어에 해당하는 번역 파일만 로드하여, 불필요한 데이터를 다운로드하지 않게 합니다.

i18next-http-backend를 사용하여 서버에서 번역 파일 로드

• i18next-http-backend를 사용하면 서버에서 필요한 번역 파일을 동적으로 로드할 수 있습니다.
• i18n.js 파일에서 i18next-http-backend를 설정합니다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend) // 번역 파일을 서버에서 로드
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'ko'],
    backend: {
      loadPath: '/locales/{{lng}}/translation.json', // 언어별 번역 파일 경로
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

• HttpBackend는 필요한 언어의 번역 파일만 로드하여 클라이언트의 성능을 최적화합니다.

번역 파일의 크기 최적화

• 번역 파일의 크기가 커지면 로드 시간이 길어질 수 있으므로, 번역 파일을 최적화하는 것이 중요합니다.
  • 방법:
    • 사용하지 않는 키를 제거하거나, 번역 문자열을 짧고 간결하게 작성.
    • 번역 파일을 압축하여 서버에서 전송할 때 gzip 등의 압축 방식을 사용.

---

5.2 정적 페이지 생성(SSG)과 다국어 지원의 결합

getStaticProps와 getStaticPaths를 사용하여 정적 페이지 생성

• **SSG(Static Site Generation)**는 빌드 시점에 정적 HTML 파일을 생성해 페이지를 제공하는 방식으로, 성능을 크게 향상시킬 수 있습니다. 이를 통해 정적 페이지는 빠르게 로드되고, 페이지 로딩 속도가 개선됩니다.
• 다국어 페이지에서 SSG를 활용하려면 **getStaticProps**와 **getStaticPaths**를 함께 사용하여 각 언어별 페이지를 미리 생성합니다.
• 예시: getStaticProps와 getStaticPaths 활용:

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  export const getStaticProps = async ({ locale }) => {
    return {
      props: {
        ...(await serverSideTranslations(locale, ['common'])),
      },
    };
  };
  
  export const getStaticPaths = async () => {
    return {
      paths: [
        { params: { locale: 'en' } },
        { params: { locale: 'ko' } },
      ],
      fallback: false,
    };
  };
  
  const HomePage = () => {
    return (
      <div>
        <h1>Welcome to our multilingual site</h1>
      </div>
    );
  };
  
  export default HomePage;

• getStaticProps: 빌드 시점에 번역된 데이터를 가져와 정적 페이지로 생성.
• getStaticPaths: 각 언어별 페이지를 미리 생성해 URL 경로를 지정.

 

SSG와 SSR을 결합하여 성능 최적화 및 SEO 향상

• SSG는 자주 변경되지 않는 콘텐츠에 적합하고, SSR은 동적 콘텐츠에 유리합니다. SSG와 SSR을 혼합하여 페이지의 성능을 최적화할 수 있습니다.
  • 정적 페이지는 빠르게 제공하고, 동적 페이지는 SSR을 통해 실시간으로 데이터를 렌더링하는 방식입니다.
  • 이를 통해 성능을 유지하면서도 SEO 최적화를 강화할 수 있습니다.

---

5.3 이미지 최적화

Next.js의 next/image 컴포넌트를 사용한 이미지 최적화

• Next.js는 next/image 컴포넌트를 사용하여 자동으로 이미지를 최적화할 수 있습니다.
  • Lazy Loading, 이미지 크기 최적화, 자동 포맷 변환을 통해 페이지 로딩 속도를 크게 개선할 수 있습니다.
• 예시: next/image 사용:

  import Image from 'next/image';
  
  const HomePage = () => {
    return (
      <div>
        <h1>Welcome to our multilingual site</h1>
        <Image
          src="/images/welcome.jpg"
          alt="Welcome Image"
          width={500}
          height={300}
          layout="responsive"
        />
      </div>
    );
  };
  
  export default HomePage;

 

각 언어별로 다른 이미지 제공 가능성에 대한 고려

• 언어마다 문화적 차이나 지역별 특성에 맞춘 이미지를 제공할 필요가 있을 수 있습니다.
  • 방법:
    • 언어별로 다른 이미지를 제공하거나, 조건부 로딩을 통해 언어에 맞는 이미지를 렌더링.
    • 예를 들어, 한국어 페이지에는 한국과 관련된 이미지를, 영어 페이지에는 다른 이미지가 나오도록 설정할 수 있습니다.
• 예시:

const HomePage = ({ locale }) => {
  const imageSrc = locale === 'ko' ? '/images/korea.jpg' : '/images/world.jpg';

  return (
    <div>
      <Image src={imageSrc} alt="Localized Image" width={500} height={300} />
    </div>
  );
};

---

이 단계에서는 Lazy Loading을 통한 번역 파일 최적화, **정적 페이지 생성(SSG)**을 통한 성능 향상, 그리고 이미지 최적화 방법을 학습합니다. 이를 통해 사용자 경험을 개선하고, SEO와 성능 모두를 최적화할 수 있습니다.