인프런 커뮤니티 질문&답변

안녕하세요~

직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요!

서버컴포넌트로 Link를 생성하고

useSelectedLayoutSegment로 active클래스 처리해주려고 합니다!

export default function SideBar() {
  const links = [
    { path: "/home", pathName: "Home" },
    { path: "/", pathName: "탐색하기" },
    { path: "/", pathName: "쪽지" },
    { path: "/", pathName: "프로필" },
  ];

  return (
    <div className={classes.nav}>
      <div>logo</div>
      <nav>
        <ul>
          {links.map((link, idx) => {
            return (
              <li key={`${link}-${idx}`}>
                <SideLink href={link.path}>{link.pathName}</SideLink>
              </li>
            );
          })}
        </ul>
      </nav>
      <button className={classes.btn}>게시하기</button>
    </div>
  );
}

interface SideLinkProps {
  children: ReactNode;
  href: string;
}

export default function SideLink({ children, href }: SideLinkProps) {
  const segment = useSelectedLayoutSegment();
  const isSegment = href.slice(1);

  return (
    <Link
      href={href}
      className={segment === isSegment ? classes.active : undefined}
    >
      {children}
    </Link>
  );
}

근데 랜더링이

Sidebar가 서버에서 초기 랜더링 하고

client에서 class 반영한다 라고 이해하고 있는데용

브라우저에서 "페이지 소스보기"를 했더니

이미 class에 active가 반영된 상태로 랜더링 되어있어요

캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다.

hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데

왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다!

검색해도 명확한 답이 없어서 질문드려요!