Next.js

Next.js

Next.js

SSR을 쉽게 구현하도록 도와준다.

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

React도 SSR을 고려하여 설계되었기 때문에 자체적으로도 구현이 가능하지만, 개발환경을 만들기 위해서는 생각보다 복잡하여 해결하기 위해 Next가 나왔으며, 사용법도 간편하다.

 

웹사이트들은 대부분 SSR로 동작 되어 왔기 때문에, 페이지가 여러 개로 구성된 Multi Page Form 방식을 사용했었다.

하지만 스마트폰이 등장하면서 웹들은 모바일에 최적화가 되어있지 않았기 때문에 사용에 불편함이 커지게 되었고, 모바일 앱과 같은 형태의 웹앱이 필요하게 되었다.

 

이러한 문제를 해결하기 위해서 React, Vue, Angular 등 여러 라이브러리, 프레임워크가 생기게 되었고, CSR이 가능한 SPA가 등장하게 되었다.

기존의 웹 페이지와 다르게 1개의 페이지에서 여러 동작이 이루어지는 방식으로 (Single Page Application) 마치 모바일 앱과 비슷한 형태로 이루어져 있어 Header영역은 고정되어 있고, Main 영역의 상태만 계속 변경하는 방식을 사용한다.

 

 

SSR vs CSR

일반적인 React 렌더링 방식은 render() 함수가 먼저 실행되고, 그 다음 ComponentDidMount() 함수를 통해 데이터를 가져와서 다시 한 번 렌더링이 됩니다. 반면에 Next는 getInitialProps()라는 함수를 사용하기 때문에 데이터를 먼저 가져와서 한 번에 렌더링을 해준다.

SSR은 한 번에 렌더링이 되기 때문에 초기 로딩 속도는 빠르지만, page 이동 시에는 CSR보다 느리다.

page를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에

 

하지만, CSR은 초기로딩 속도는 느리지만, 첫 페이지 로딩 때 모든 파일을 내려 받기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용하면 된다.

* CSR: Client Side Rendering

 

Next.js 핵심기능

작동원리

1. 초기에 사용자가 Server에 페이지 접속을 요청하면, SSR 방식으로 렌더링 될 HTML을 보낸다.

2. 브라우저에서 Javascript를 다운로드하고 React를 실행한다.

3. 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 때, Server가 아닌 CSR방식으로 브라우저에서 처리한다.

 

1. 코드 스플리팅

일반적인 리액트 싱글페이지에서는 초기 렌더링 때 모든 컴포넌트를 내려 받는다. 하지만 규모가 커지고, 용량이 커지면 로딩속도가 지연될 수 있는 문제점이 있다.

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

 

폴더 구조를 보면 pages 폴더 안에 각 page 즉, 라우트들이 들어가며, components폴더에는 React 컴포넌트들이 들어간다.

브라우저 실행 => 사용자가 접속 => index.js만 불러옴.

다른 페이지로 넘어갔을 때는 해당 페이지만 불러오게 된다.

 

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

Next.js는 정말 간편한 라우팅을 제공한다.

Router와 Link를 모두 import해서 사용할 수 있으며, Link에서는 href와 as props가 있는데 이 href는 해당 페이지로 이동해 주는 역할을 하고, as는 href의 URL을 조금 더 직관적으로 만들어 주는 역할을 한다.

 

Router는 링크와 동일하게 해당 페이지로 이동해주는 역할을 하지만 개발자에게 조금 더 제어권을 넘겨줘서 쉽게 Redirect도 가능하다.

import Link from "next/link";
import Router from "next/router";

function Home({ id }) {

  return (
    <div>
      // Link
      <Link as={`/movie`} href={`/movie?id=${id}`}>
        <div>Movie</div>
      </Link>

      // Router
      <div onClick={() => Router.push(`/movie?id=${id}`)}>Movie</div>
    </div>
  )
}

export default Home;

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

Link 컴포넌트에서 as를 사용하게 되면 실제 페이지가 없는 곳에 요청하게 된다.

직접 커스텀 서버를 생성해서 as의 URL이 href를 바라볼 수 있게 처리를 따로 해줘야 새로고침이나 뒤로 갔을 때도 렌더링이 가능해진다.

 

4. getInitialProps()

Next.js의 핵심기능인 getInitialProps 함수를 통해 데이터를 가져올 수 있다. 코드를 보시면 React의 ComponentDidMount는 렌더링이 두 번 되지만, Next에서는 데이터를 미리 갖고 오기 때문에 한 번에 렌더링이 가능한다.

 

 

느낌점

리액트 라우터와 비교했을 때, 쉽고 편하게 사용할 수 있다는 장점과 코드 스플리팅 구조 또한 편했다.

적절히 사용하면 좋은 서비스를 제공할 수 있을 거 같다.