Next.js 14 - z.com(4)

useSelectedLayoutSegement

• 활성화된 링크(Active link)를 감지하기 위해선 브라우저단에서 가능하다. 사용자가 어떠한 페이지에 있는지 알아야하기 때문이다.
• 브라우저 환경은 클라이언트 사이드이므로 서버 컴포넌트가 아닌 클라이언트 컴포넌트로 작업해야 한다.
• useSelectedLayoutSegment hook은 레이아웃보다 한 단계 아래의 활성화된 route segment를 획득할 수 있다.

"use client";

import { useSelectedLayoutSegment } from "next/navigation";

export default function NavMenu() {
  const segment = useSelectedLayoutSegment();
  return <></>
 }

위 이미지의 폴더 구조에서 [username], compose, explore, home, message와 같은 segment를 획득할 수 있다.

---

💡 서버 컴포넌트에서 hook, 이벤트 핸들러의 사용이 불가능한 이유?
1. 서버 사이드에서 렌더링된 마크업 결과물을 전송하기 때문에 자바스크립트 번들을 포함하지 않으므로 state의 사용이 불가능하다.
2. 프론트 서버에서 동작하므로 브라우저 환경에서 제공하는 Web API를 사용할 수 없기 때문에 이벤트 핸들러의 사용이 불가능하다.

그냥 클라이언트 컴포넌트로 사용하면 되는 것 아닌가? 싶은데 기존 SSR 방식의 hydration 과정이 필요가 없다. 서버에서 렌더링된 결과물을 보내준 뒤 라이브러리의 번들은 아얘 보내지 않으므로 zero-bundle-size라는 장점을 지니고 있어 번들 사이즈의 축소가 가능하다. 또한 물리적으로 서버와 가까워 네트워크 오버헤드를 줄일 수 있다는 장점도 있으며, 보안, 캐싱등의 장점도 존재한다. 

💡 SSR? 서버 컴포넌트?
일단 SSR과 서버 컴포넌트는 서로 다른 개념이다. 서버에서 컴포넌트를 렌더링한다는 점에서는 동일하지만 렌더링의 결과값과 동작 방식이 다르다!

SSR은 Pre-rendering의 방식으로 서버에서 HTML을 만들어낸다. 이후에 클라이언트로 전달된 JS 번들 파일과 매핑되는 hydration을 수행한 뒤 React 컴포넌트로 사용된다. 기존의 React 컴포넌트이며 이를 클라이언트 컴포넌트라고 부른다.

서버 컴포넌트는 JSON과 유사한 형태가 만들어진다(RSC payload). 그 자체로 React 컴포넌트이기에 별도의 JS 번들 파일 없이 브라우저에서 컴포넌트로 사용된다. 새로운 컴포넌트이고 React Server Component, RSC라고 부른다.

---

참조 

https://www.inflearn.com/questions/1077487/%EC%84%9C%EB%B2%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/

Next + React Query로 SNS 서비스 만들기 | 조현영 - 인프런