최근 서버 사이드 렌더링이 다시 주목을 받으며 떠오르는 Next.js는 많은 기업에서 원하고 있는 기술이다. Next.js에 대해 정리해본다.

Next.js 란 ?

Next.js 는 React에서 서버 사이드 렌더링 (Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 프레임워크이다. React 자체에서도 서버 사이드 렌더링을 구현할 수 있지만, 구현의 복잡함과 여러움 등 여러 문제들이 있다. Next.js는 이러한 문제들을 간단하게 해결할 수 있도록 도와주고, Next.js를 통하여 SPA의 장점과 SSR의 장점을 모두 가져갈 수 있다.

Next.js 주요 기능

코드 스플리팅과 간단한 라우팅

기존 React 프로젝트에서는 초기 렌더링 시에 모든 컴포넌트들을 내려 받는다. 이와 같은 방식은 규모가 커질수록 초기 로딩 시간이 증가하는 단점이 있다. Next.js에서는 서버 사이드 렌더링과 코드 스플리팅을 자동으로 제공해주기 때문에 필요한 페이지만 렌더링하여 퍼포먼스를 올려준다. 이를 위해 Next.js에서 요구하는 구조에 맞게 코딩을 해야 한다. ( 라우팅을 하고 싶은 경로의 이름으로 만들어진 파일을 pages 폴더 안에 소문자로 넣어야한다. )

또한, react-router의 < Link >와 비슷한 next/link로 간단하게 페이지 라우팅을 할 수 있다. react-router 에서는 to='' 를 사용하지만 next/link 에서는 href와 as를 이용한다.

ex)

<Link href="/detail">
    <div> detail로 이동 </div>
</Link>

next/router 모듈을 이용하면 기존 react에서 처럼 .push 로 라우팅이 가능하고, 해당 모듈은 아래에서 설명할 prefetch도 지원해준다.

---

사전 데이터 불러오기

Next.js에서 제일 비중이 큰 기능일 것 같다. 사전 데이터를 불러오기 위한 getInitialProps 메소드는 next v9 이상부터는 getStaticProps, getStaticPaths, getServerSideProps로 나누어 사용하는 것을 권장한다.

getInitialProps

import axios from 'axios';

class GetInitial extends React.Component {
    static async getInitialProps ({req}) {
        const response = await axios.get('https://url~.com');
        return {
            data: response.data
        }
    }

    render() {
        const { data } = this.props;
        
        return (
        	<div> {this.props.data} </div>
        );
    }
}

export default GetInitial;

클래스형 컴포넌트가 시작됨과 동시에 getInitialProps 메소드를 이용하여 외부 데이터를 렌더링 전에 받아올 수 있다. 이와 같이 받아온 사전 데이터는 해당 클래스형 컴포넌트의 props 값으로 이용하여 사용이 가능하다.
componentDidMount 와 비슷하다고 생각할 수 있는데, 이는 렌더링 횟수에 차이가 있다.

componentDidMount : 초기 렌더링 후, componentDidMount 후 상태 변화로 인한 재 렌더링.

getInitialProps : 사전 데이터 세팅을 완료 후 렌더링.

---

next v9 <= 의 메소드들은 [정적 생성] 이냐, [서버 사이드 렌더링] 이냐의 차이로 나뉜다.

[정적 생성] getStaticProps / getStaticPaths

1. 프로젝트가 빌드하는 시점에 html 파일들을 생성.
2. 모든 요청에 재사용 (빌드 시점에 만들어놓은 것을 사용자 요청 시 재사용)
3. 퍼포먼스 이유로, next.js는 정적 생성을 권고

• 유저가 요청하지 않아도 정적으로 미리 만들어놔도 되는 페이지들에 적합.
  
  

[서버 사이드 렌더링] getServerSideProps

1. 매 요청마다 html을 생성
2. 항상 최신 상태 유지

• 항상 최신 데이터를 보여줘야하는 페이지들에 적합.
  
  

---

Prefetching

Prefetching은 사전 데이터 패칭을 지원한다. < Link > 컴포넌트에서 prefetch 메소드로 설정할 수 있고, 기본값은 true 이다.

<Link href="/detail" prefetch={true | false}>
    <div> detail로 이동 </div>
</Link>

이 Link의 prefetch로 연결된 html 태그가 viewport에 나타나게 되면 Next.js는 Link 컴포넌트에 연결된 page들의 코드들을 미리 가져와 사전 데이터 패칭을 한다.

learn:
https://nextjs.org/docs/getting-started