[NextJS] NextJS 장점, React와 차이점 (노마드코더)

노마드코더에서는 Next.js 기본 강의를 무료로 볼 수 있다. 되게 짧고 간략하게 핵심을 잘 설명해놓은 것 같아서 정리해보았다.

https://nomadcoders.co/nextjs-fundamentals

NextJS 시작하기 – 노마드 코더 Nomad Coders

 

NextJS VS ReactJS

Framework vs Library

Framework: 내 코드를 호출시키는 것. 적절한 위치에 잘 적기만 한다면 모든걸 동작하게 한다.

Library: 남의 코드를 호출하는 것

React와 Next.js의 가장 큰 차이점 React는 Library고 Next JS는 Framework라는 것이다. 

 

Server-side vs Client-side

Server-side

 

Client-side

Next js의 가장 좋은 기능 중에 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것이다. 이때, 페이지들은 정적으로 만들어진다. 

이 점도 React와 굉장히 다른 부분이다. 굉장히 인터넷 환경이 느릴 경우, React의 경우 아무것도 없는 흰화면이 뜨고 천천히 페이지가 만들어질 것이고 Next JS의 경우 UI는 바로 보이게 될 것이다. 즉, Next JS는 데이터를 가져오는데는 시간이 오래 걸리더라도 HTML을 사용자가 바로 볼 수 있다.

React의 경우 client-side render를 하는 앱을 만든다. (Client Side Render = 브라우저가 유저가 보는 UI의 모든 것을 만드는 것) 즉, 브라우저가 왔을 때만 자바스크립트를 실행할 수 있다. 만약 인터넷 속도가 느린 3G 환경이라면 아무것도 없는 흰화면이 먼저 뜨고, 전체 페이지가 굉장히 느리게 뜨게 된다.

 

Routing

Next.js에선 링크를 사용하는데 anchor 태그 (<a>)를 사용하면 안된다. 왜냐면 Next.js에선 특정 페이지로 네비게이션할때 사용하는 특정 컴포넌트가 있기 때문이다. 

Anchor 태그를 사용하여 네비게이션을 구성할경우, 페이지로 이동할때마다 브라우저가 다른 브라우저로 보내기 위해 전체 페이지가 새로고침이 될 것이다. 이러면 속도면에서 굉장히 느리다. 

그래서 사용하는 것이 Link가 있다. Link는 클라이언트 사이드 네비게이션을 제공해준다.

import Link from "next/Link";

export default function NabBar(){
	return (
    	<nav>
        	<Link href="/">Home</Link>
		</nav>
    )
}