[Next.js] Next.js 알아보기

Next.js 알아보기

# Next.js란

Next.js는 React를 효율적으로 이용할 수 있도록 도와주는 React의 프레임워크이다. Next.js 서버 측에서 React 코드를 실행한 뒤 pre-rendering하여 HTML을 생성하여 브라우저에게 보낸다. 그 후 브라우저에서 React를 사용해 웹 페이지를 완성하는 과정으로 작동한다.

Next.js의 특징을 살펴보며 어떤 장점이 있는지 알아보자.

# Next.js 특징

1. SSR (Server Side Rendering)

CSR 방식으로 렌더링되는 React와는 다르게, Next.js는 SSR 방식으로 렌더링할 수 있게 해준다. CSR은 첫 로딩 시간이 길고 SEO(검색 엔진 최적화)에 불리하다는 단점이 있는데, SSR을 이용하면 웹 페이지 접속 시 바로 화면을 볼 수 있고 검색엔진이 HTML파일을 해석할 수 있어 검색에 유리해진다.

그러나 첫 페이지를 SSR 방식으로 처리한 이후 다른 페이지로 이동할 때부터는 CSR 방식으로 처리하기 때문에 SPA의 장점은 유지된다.

CSR과 SSR의 차이 : https://inthedev.tistory.com/17

2. 직관적인 라우팅

React에세는 react-router-dom과 같은 패키지를 이용하여 라우팅을 했다. 그러나 Next.js에서는 pages 폴더 안에 있는 파일이 곧 페이지가 된다. 예를 들어 user이라는 페이지를 만들고 싶다면 pages/name.js 이렇게 파일을 생성해주기만 하면 라우팅이 된다. 또한, pages/user/[name] 와 같이 []를 사용하여 파일을 생성하면 dynamic route로 사용할 수 있다.

3. Link

import Link from 'next/link'

function Home() {
  return (
    <div>
      <div>
        <Link href="/">Home</Link>
        <Link href="/about">About Us</Link>
      </div>
    </div>
  )
}

export default Home

페이지 간의 이동을 구현할 때 기존의 React에서는 react-router-dom의 Link를 이용했지만, Next.js에서는 Next.js에서 지원하는 Link를 사용하면 된다. Next.js의 Link는 리렌더링 없이 화면을 전환해주고 SEO에 유리하다는 장점이 있다.

4. Code Splitting 지원

Code Splitting이란 하나의 번들 파일을 여러 개의 번들 파일로 나눈 뒤, 실제 로드될 화면에 필요한 번들만 불러오는 것을 의미한다. 필요한 파일만 사용하기 때문에 자바스크립트 로딩 시간을 줄일 수 있다.