현재 웹에서 링크를 옮길때마다 페이지를 다운로드 받고, 또 이전에 방문했던 페이지로 돌아갈 때에도 다운로드 받게 되어있다. 이러한 문제점은 사용자에게는 느리다는 불편함을 주고 서비스를 제공하는 입장에서는 비용이 많이 든다.
이러한 문제점을 없애기 위해 <a>태그 대신 <Link>태그를 사용하면 된다.
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'Web tutorials',
description: 'Generated by sungwk',
};
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/1'>Update</Link>
</li>
<li>
<button>delete</button>
</li>
</ul>
</body>
</html>
);
}코드 상단에 Link태그를 import해주고 기존의 a태그를 Link태그로 바꾸면 링크에 마우스를 올리자마자 백그라운드에서 해당 페이지의 내용들을 다운로드받고 클릭하면 페이지 전환 없이 바로 이동한다. 그리고 이전에 방문했던 페이지에 재방문할 때에는 서버와 통신도 하지 않는다. 이러한 변화는 사용자에게는 웹이 빨라질 것이고 서비스 제공자에게는 비용이 줄어들 것이다.
이처럼 웹페이지가 여러개임에도 불구하고 하나의 페이지처럼 동작하는 것을 Single Page Application 이라고 하고 NextJS에서는 a태그를 Link태그로 바꾸는것 만으로 SPA를 사용할 수 있다.
