Next.js 간단히 알아보기

 

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다.

과거의 웹사이트들은 대부분 SSR 방식으로 동작해 왔지만 스마트폰이 대중화 되면서 기존의 웹들이 

모바일에 최적화 되어있지 않아 사용에 불편함이 생기게 되었다. 그래서 사용자들은 모바일 앱과 같은 형태의

웹페이지가 필요하게 되었는데 이러한 문제를 해결하기 위해서 React, Angular, Vue 등 과 같은

라이브러리, 프레임워크가 생기게 되었고 CSR(Client Side Rendering)이 가능한 SPA가 등장하게 되었다.

SPA는 Single Page Application으로 기존의 웹페이지와 다르게 1개의 페이지에서 여러 동작을 

수행할 수 있어 모바일 앱과 비슷한 형태로 메뉴바는 고정되어있고 컨텐츠 영역만 계속 변경되는 방식이다.

# CSR 과 SSR 비교

둘의 차이점을 확인해보자.

프론트엔드 개발자라면 누구나 한번 들어봤을 React는 CSR 방식을 이용한다.

CSR 방식은 화면의 프레임 등을 먼저 렌더링한 뒤 비동기방식으로 데이터를 요청해서 불러와 화면에 데이터를 출력해준다.

이러한 방식을 사용하는 이유는 보통 사용자가 3초이내에 화면이 렌더링 되지 않으면 해당 페이지를 떠난다고 한다. 

그렇기 때문에 CSR 렌더링 방식으로 하면 데이터를 불러오기 전 까지 로딩창을 보여주던지 또는 화면의 일부를 보여줌으로서 사용자를 조금이라도 더 해당페이지에 길게 머물수 있도록 도와준다.

반면에 CSR을 사용하면 한번에 모든 데이터를 불러와야하기 때문에 초기 로딩속도가 느릴 수 있다. 

또한 검색엔진 최적화에 문제가 발생할 수 있다. 좋은 검색엔진의경우 해당 페이지가 CSR 방식이라는것을 

알아 차리고 곧 데이터가 불러와지겠다는것을 판단할 수 있지만

좋지 못한 검색엔진의 경우 해당 페이지가 초반에 로딩 되어있을때 어떠한 데이터도 존재하지 않기 때문에 웹사이트가 검색 순위에서 밀려나는 문제가 발생할 수 있다.

반면에 SSR 방식을 사용하는 Next.js의 경우 html과 데이터로 페이지를 만들어 한번에 전달하여 화면을 출력한다.

React 처럼 모든 데이터를 한번에 불러오는것이 아닌 방문하고자하는 해당 페이지에 대한 데이터 정보만 

불러오는 코드 스플릿팅 기능으로 조금 더 빠르게 화면을 출력할 수 있고 검색엔진 최적화를 할 수 있다는 장점이 있다.

그러므로 일반적으로 사용자가 처음 페이지에 방문할때는 SSR 방식을 적용하고 그이후 페이지 이동등의

이벤트가 발생할 때는 CSR 방식을 이용하면 좋다.

# Next.js의 특징

1. 기본적으로 SSR 방식

2. 더 빠르게 페이지를 불러오기 위해 자동으로 코드 스플릿팅 기능

3. 간단한 클라이언트 사이드 라우팅을 제공

4. Hot Module Replacement(HMR)을 지원하는 Webpack 기반의 개발 환경을 제공한다.

5. Express나 다른 Node.js HTTP 서버를 구현할 수 있다.

6. 커스텀 API서버 (as - 라우트 마스킹)

7. getInitialProps()

위의 몇 특징들에 대한 보충 설명을 해보면

#코드 스플릿팅

일반적으로 리액트의 SPA 방식에서는 초기에 렌더링할 때 모든 컴포넌트를 내려 받는다. 

하지만 규모가 커지고, 용량이 증가하면 로딩속도가 지연될 수 있는 문제점을 가지고 있다.

Next.js는 이러한 문제점을 개선해서 필요에 따라 파일을 불러올 수 있게 여러개의 파일을 분리하는 코드 스플릿팅 기능을 사용하였다.

Next.js를 사용하기위해 생성한 pages 폴더안에 있는 각각의 js파일은 각각의 page 역할을 하며 

React 컴포넌트들은 components 폴더와 같은 폴더안에 위치하게 된다.

만약 브라우저에 사용자가 접속하게되면 첫 페이지 index만 불러오고 그 이후에 다른 페이지로 넘어갔을때 해당 페이지만 불러오게 된다.

# 간단한 클라이언트 사이드 라우팅

사용방법은 Router와 Link를 모두 import 하여 사용할 수 있다.

Link 에서의 href는 해당 페이지로 이동하는 역할을 하며

Link 에서의 as 는 href로 작성한 URL을 보기좋게 보이도록 변경해주는 역할을 한다.

Router는 Link 처럼 해당 페이지로 이동하게 도와주는 역할을 하지만 개발자에게 더 큰 권한을 주어 쉽게 Redirect 할 수 있게 해준다.

# 커스텀 API서버 (as - 라우트 마스킹)

Link 컴포넌트에 as를 사용하게되면 페이지 이동은 가능하지만 해당 페이지에서 새로고침을 하게되면 오류가 발생한다. 

해당 URL은 보기 좋게 만든것이기 때문에 해당 URL로 요청하면 에러가 발생한다.

그래서 이러한 에러를 처리할 수 있도록 직접 커스텀 서버를 생성해서 as로 작성된 URL 주소가 href를 확인하여 처리할 수 있도록 해주어 정상적으로 동작하게 할 수 있다.

# getInitialProps()

Next.js에서 페이지의 데이터를 가져올 수 있는 표준 API를 제공한다.

getInitialProps 라 불리는 비동기 함수를 사용한다.

React에서는 데이터를 불러오기전에 한번 렌더링되고 데이터를 불러온 뒤 또한번 렌더링되어 두번의 렌더링이 발생하지만

Next.js에서는 데이터를 미리 갖고오기 떄문에 한번에 렌더링이 가능하다.