홈으로 돌아가기

서버 컴포넌트 예제

이 페이지는 서버 컴포넌트입니다 - 'use client' 지시문이 필요 없습니다!

사용 방법

example.tsxtsx
import { headers } from "next/headers";
import { createServerTranslation, getServerLanguage } from "i18nexus/server";

import commonEn from "@/locales/common/en.json";
import commonKo from "@/locales/common/ko.json";
import serverExampleEn from "@/locales/server-example/en.json";
import serverExampleKo from "@/locales/server-example/ko.json";

const translations = {
  common: { en: commonEn, ko: commonKo },
  "server-example": { en: serverExampleEn, ko: serverExampleKo },
};

export default async function Page() {
  const language = getServerLanguage(await headers(), {
    defaultLanguage: "ko",
    availableLanguages: ["en", "ko"],
  });
  const t = createServerTranslation(language, translations);

  return (
    <main>
      <h1>{t("Server Component Example")}</h1>
      <p>{language}</p>
    </main>
  );
}

서버 컴포넌트의 이점

더 작은 JavaScript 번들

클라이언트로 전송되는 React Context나 훅 없음

더 빠른 초기 로딩

서버에서 렌더링된 번역

더 나은 SEO

올바른 언어로 완전히 렌더링된 HTML

하이드레이션 불일치 없음

서버와 클라이언트가 항상 동기화됨

현재 상태

현재 언어
ko
컴포넌트 타입
Server Component
번역 방법
createServerTranslation()
Server Components - i18nexus