next.js에서 a 태그 대신 Link를 사용하는 이유
FE/Next.js2023. 9. 22. 21:19nextjs를 사용하는 이유
Link 컴포넌트를 사용하는 이유에 대해 알아보기 전에 CSR과 SSR에 용어 정리가 필요합니다.
nextjs를 사용하는 이유 중 가장 큰 이유는 서버 사이드 렌더링(Server Side Rendering) 이라고 할 수 있습니다. 서버 사이드 렌더링은 줄여서 SSR이라고 부르기도 합니다. 반대로 React의 경우는 Client Side Rendering, CSR 입니다.
단어에서도 알 수 있듯이 SSR은 서버에서 미리 렌더링하여 html 파일을 만들어주고, 만들어진 html 파일을 사용자에게 전달하는 방식으로 동작합니다.
반면에 CSR의 경우는 javascript에 의해 클라이언트에서 화면을 렌더링한다는 차이점이 있습니다.
SSR은 서버에서 미리 html 파일을 만들어주기 때문에 SEO에 더 최적화되어 있고, 초기 진입 속도도 CSR에 비해 상대적으로 빠릅니다. 여러가지 장점이 있어서, 대형 프로젝트에는 SSR 프로젝트를 많이 사용하곤 합니다.
Link 컴포넌트 vs a 태그
nextjs에서는 라우팅을 위해 Link 컴포넌트를 사용합니다. a 태그도 있는데, Link 컴포넌트를 사용하는 이유는 무엇일까요?
최초 url을 통해 접근할 때는 SSR에 의해 이미 생성된 html 파일을 받아오게되고 받아온 html 파일을 화면에 보여줍니다.
이후에 Link 컴포넌트를 통해 다른 페이지로 이동하게 되면, CSR 형태로 페이지가 이동하게되어, 클라이언트(브라우저)에서 렌더링을 진행하게 됩니다.
하지만 a 태그를 사용하게되면 url을 통해 직접 접근하는 방식으로 이동하기 때문에 서버로부터 html 파일을 새로 받아와서 화면 전체를 다시 만들게 됩니다.
따라서, a 태그를 사용하기 보단 Link 컴포넌트를 사용해서 라우팅 하는 것이 좋습니다. 하지만 위 내용은 내부 링크에 대한 내용이고, 만약 외부 링크로 이동을 한다면 Link를 사용하든 a 태그를 사용하든 상관 없습니다.
nextjs 프로젝트 생성
조금 더 이해를 돕기 위해, 예제 프로젝트를 생성해봅시다.
링크를 포함한 Header 컴포넌트를 생성합니다.
// components/Header.tsx
import Link from 'next/link';
export default function Header() {
return (
<header className="p-10 border-b border-slate-100">
<nav className="flex gap-x-4 text-indigo-500 font-bold">
<a href="/">Home(a)</a>
<a href="/about">AboutMe(a)</a>
<Link href="/">Home</Link>
<Link href="/about">AboutMe</Link>
</nav>
</header>
);
}
방금 만든 Header를 모든 페이지에 적용하기 위해, layout.tsx에 추가합니다.
// app/layout.tsx
// ...
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<Header />
<main className="h-[80vh] w-[100vw]">{children}</main>
</body>
</html>
);
}
라우팅 될 페이지 2개를 생성합니다. app/page.tsx 와 app/about/page.tsx
// app/page.tsx
export default function Home() {
return <div className="h-full w-full flex items-center justify-center">Home</div>;
}
// app/about/page.tsx
export default function About() {
return <div className="h-full w-full flex items-center justify-center">AboutMe</div>;
}
테스트를 위한 프로젝트가 완성되었습니다.
그럼, a 태그를 사용할 때와 Link 컴포넌트를 사용할때를 비교해봅시다.
a 태그를 사용할 때는 아래와 같이 페이지를 그리기위한 리소스 파일들을 모두 다시 불러오게 됩니다.
반면에 Link 컴포넌트를 사용하게 되면 이동할 페이지의 메타 정보만을 불러오게 되고, CSR이 일어나게 됩니다.
'FE > Next.js' 카테고리의 다른 글
| Next.js 14 프로젝트 규모에 따른 디렉토리 구조 (0) | 2024.02.13 |
|---|---|
| vercel에 Next.js 웹 앱 프로젝트 무료 호스팅하기 (0) | 2024.02.09 |
| Next.js 14 버전 설치 및 프로젝트 생성하기 (2) | 2024.02.09 |
IT 기술에 대한 글을 주로 작성하고, 일상 내용, 맛집/숙박/제품 리뷰 등 여러가지 주제를작성하는 블로그입니다. 티스토리 커스텀 스킨도 개발하고 있으니 관심있으신분은 Berry Skin을 검색바랍니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
