소스코드
https://github.com/egoing/nextapp/commit/e0dc92feeb55b80239f0015792a60f281f930001
라이브 예제
https://nextapp-9efh7p3uc-egoing.vercel.app/
우리가 하고 싶은 것
- 링크를 클릭하면 페이지 전체 리로딩이 일어나지 않고 필요한 콘텐츠만 로딩하고 싶다.
- 이미 방문한 페이지는 캐슁을 해서 다시 다운로드 하지 않도록 하고 싶다.
- 미리 페이지를 로드했다가 실제 요청이 있을 때 클라이언트 측에서 즉시 응답한다.
Link 적용
1. 브라우저의 개발자도구/네트워크 탭을 엽니다.
2. 링크를 클릭했을 때 서버와 통신하는 양상을 확인합니다.
3. 모든 a 태그를 Link 콤퍼넌트로 변경합니다.
import Link from 'next/link'
import './globals.css'
export const metadata = {
title: 'WEB tutorial',
description: 'Generated by egoing',
}
export default function RootLayout({ children }) {
return (
<html>
<body>
<h1><Link href="/">WEB</Link></h1>
<ol>
<li><Link href="/read/1">html</Link></li>
<li><Link href="/read/2">css</Link></li>
</ol>
{children}
<ul>
<li><Link href="/create">create</Link></li>
<li><Link href="/update/id">update</Link></li>
<li><button>delete</button></li>
</ul>
</body>
</html>
)
}
4. 다시 링크를 클릭해서 아래와 같은 변화를 확인합니다.
- 페이지 리로딩이 없어졌다.
- 방문한 페이지를 다운로드 받지 않는다.
- 미리 페이지를 다운로드 한다.
5. SPA의 의미 생각하기
하나의 페이지에서 모든 작업을 처리하는 앱을 의미합니다. 서버로부터 가져올 데이터가 있다면 ajax와 같은 방법을 통해서 동적으로 로딩합니다. 이것을 SPA(single page application)이라고 합니다. Link는 Next.js에서 SPA를 매우 쉽게 구현하도록 도와주는 도구입니다.
