import Link from "next/link";
export default function Navigation() {
return (
<nav>
<ul>
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/about-us">About Us</Link>
</li>
</ul>
</nav>
);
}다른 링크로 이동하기 위해 Link를 import 해준다
href를 사용해서 이동하고 싶은 url을 입력해주면 이동 가능
현재의 위치를 파악하고 ui에 표시를 해주고 싶을 때
👉 usePathname 사용
그런데 에러가 난다 🚫
use client를 추가해야 한다는데,,
최상단에 추가해주니 에러가 사라졌다
<nav>
<ul>
<li>
<Link href="/">Home</Link> {path === "/" ? "🍀" : ""}
</li>
<li>
<Link href="/about-us">About Us</Link>
{path === "/about-us" ? "🍀" : ""}
</li>
</ul>
</nav>
현재 페이지에 따라 이모지를 보여주는 조건을 추가하니 잘 동작한다
Link 태그는 client side only라서 SSR에서는 동작하지 않기 때문에 "use client"를 추가해서 hydrate해준 것이다 (클라이언트에서도 렌더)
client에서'만' 렌더링할거야👉 가 아닌
client에서'도' 렌더링할거야 🙆♀️
렌더링
NextJS가 리액트 컴포넌트를 브라우저가 이해할 수 있는 html로 변환하는 작업
hydrate
HTML을 인터랙티브한 리액트 컴포넌트로 바꾸는 것
CSR
모든 렌더링이 클라이언트 측에서 발생
클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드
SSR
NextJS로 웹 사이트를 빌드할 때, 기본적으로 SSR을 사용
'use client' 사용 여부와 상관없이 Next.js는 모든 컴포넌트와 페이지들을 서버에서 먼저 렌더링한다
그러고 난 후에 클라이언트 컴포넌트를 서버 요청 없이 렌더링
