Next.js를 사용하면 저절로 좋아지는 것이 하나 있습니다. 바로 Server Side Rendering입니다.
장점
- React는 Javascript 기술이기 때문에 Js가 동작하지 않으면 페이지가 아예 rendering 되지 않습니다.
- 하지만 Next.js로 만든 웹페이지는 리로드해도 rendering이 잘 됩니다. 이것이 어떻게 가능할까요?
- 사용자가 요청하면 .next폴더에 next.js가 서버 쪽에서 react를 실행하여 그 응답 결과를 .next에 저장하여 실행하기에 가능합니다.
- 즉,
next.js는 Javascript가 아닌 html을 응답한다는 것입니다.
단점
네트워크 지연되는 상황일 경우, 어떤 특정한 페이지를 방문하였을 때, 컨텐츠가 바뀌는 영역은 굉장히 적지만웹페이지는 처음부터 끝까지 다시 다운로드를 받게 됩니다.- 사용자의 입장에서는 굉장히 느리다고 느낄 것이고 서비스를 제공하는 입장에서는 경제적 부담감이 많이 들 것입니다.
- 이미 방문했던 페이지를
다시 방문할 경우,처음부터 페이지를 다시 다운로드받고 있습니다. - 이러한 문제들을 해결하려면 어떻게 해야할까요?
해결 방법
layout.js에서 a태그가 아닌 Link태그로 바꿉니다.
//layout.js
import Link from "next/link";
import "./globals.css";
export const metadata = {
title: "WEB tutorial",
description: "Generated by du",
};
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>
);
}링크를 클릭하지 않고 커서를 위에 둔 것 만으로 백그라운드에서 페이지를 다운로드합니다.
이미 방문했던 페이지를 다시 방문할 때는 아예 통신조차도 하지 않습니다.
이렇게 웹 페이지가 여러개의 페이지임에도 불구하고 한 페이지처럼 동작하는 것을 Single Page Application이라고 합니다.
Next.js를 이용하면 a태그를 Link태그로 바꾸는 것만으로도 Single Page Application으로 바꾸는 마법을 볼 수 있게 됩니다.
