Next.js 란?

개인적으로 공부하려고 열심히 찾아서 읽고 정리해보았다.

※ 라이브러리
: 어플리케이션을 만들 때 필요한 자원(기능:함수)의 모임

※ 프레임워크
: 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경

※ SEO(Search Engine Optimazation)
: 검색 엔진 최적화. 구글, 네이버와 같은 검색 엔진들이 서버에 등록된 웹사이트들을 하나씩 돌면서 웹사이트의 html 문서를 분석해주는 것.

1. Next.js 란 ?

• React 기반 프레임워크
  - 서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능하게 하는 Node.js 위에서 동작하는 오픈 소스 웹 개발 프레임워크다.

---

💡 Next.js 와 React 비교

Next.js를 사용하는 이유를 알아보기 전에 먼저 React의 특성과 함께 비교한 내용.

(1) React

• 특징
  • Single Page Application(SPA)
    • 단 하나의 페이지를 통해 유저의 요청을 처리해 주는 방식
      • 사이트에 접속할 때, 하나의 페이지를 불러오는데 이 때, 필요한 모든 자바스크립트 파일을 한 번에 불러온다. 페이지 이동을 하는 경우, 받아온 파일을 이용하여 UI를 렌더시키고, 필요한 데이터는 서버에서 JSON 형태로 받아서 UI를 빠르게 변화시킬 수 있다. 이 부분에 있어서 사용자 경험이 좋다.
      • 하지만 모든 자바스크립트 코드를 불러와야 하기 때문에 처음 페이지를 로딩할 때 시간이 오래 걸린다. 또 검색엔진에 좋지 않다.(검색엔진봇이 사이트에 방문했을 때 콘텐츠를 제공하지 못하여 사이트를 파악하는데 어려움이 있다).
    => 리액트에서 SPA, 즉 하나의 페이지로만 웹 어플리케이션을 구성하기 위해 사용되는 방식이 다음에 나오는 Client Side Rendering(CSR), 그리고 컴포넌트다.

• Client Side Rendering(CSR)
  • 클라이언트 측에서 렌더링이 일어난다.
  • 웹사이트를 요청했을 때, 빈 html을 가져와서 script를 로드하기 때문에, 첫 로딩이 되기까지 시간이 오래 소요되고 SEO에 취약하다는 단점도 있다.
  • 렌더링에 필요한 리소스들(html, css, js, react 라이브러리)을 초기 요청 시에 모두 보내준다.
  • 리액트를 통해 만들어진 웹페이지는 컴포넌트들로 화면이 구성되는데, 클라이언트 측에서 발생하는 이벤트에 따라 컴포넌트들을 동적으로 처리하며 원하는 화면을 구성한다. 그 때 필요한 코드들을 클라이언트가 초기에 서버로부터 모두 받아오기 때문에 클라이언트가 단 하나의 페이지에서 컴포넌트들을 조작하며 동적으로 화면을 렌더링 할 수 있는 것이다.
• Virtual DOM
  • 변경사항이 생기면 해당 부분만 가상 돔을 통해 적용해본 후, 이를 실제 DOM과 비교해보고, 결과적으로 변화가 있는 부분만 리렌더하는 방식.
  • 가상의 DOM을 구성하는 만큼, 메모리 사용량이 늘어난다는 단점이 있지만, 덕분에 빠른 속도로 렌더링을 할 수 있다.

=> 즉, 리액트는 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식을 사용한다.

• 장점
  • 전체 페이지를 리렌더링 하는 것이 아니기 때문에, 빠르다.
  • 서버에 리소스 요청을 처음에만 하기 때문에, 서버 측에서도 요청 처리에 대한 부담이 적어진다.

• 단점
  • 1. 속도
       - 모든 자바스크립트 코드와 화면 구성에 필요한 리소스들을 불러와야 해서 처음 페이지를 불러올 때 SSR에 비해 시간이 오래 걸린다. 이 때문에 리소스 낭비가 있을 수 있다.
  • 2. SEO(검색엔진) 최적화에 좋지 않음
       - 특정 사이트에 필요한 리소스를 포함하여 모든 리소스들을 초기에 서버로부터 전달받았는데, 유저가 해당 사이트에 접속하지 않을 수도 있음.

(2) Next.js

• Server-Side Rendering(SSR)
  • 서버로부터 완전하게 만들어진 html 파일을 받아와 페이지 전체를 렌더링 하는 방식
  • 서버에서 미리 페이지를 만들어(pre-rendering) 채워진 html을 다운 받는다.
    • 사이트에 접속할 때 미리 렌더링된 html을 불러온다.
      필요한 자바스크립트 파일을 불러올 때까지(hydrate) 반응은 하지 않지만, 빠르게 화면을 보일 수 있기에 속도가 빨라 보인다.
    • html 페이지를 서버 단에서 빠르게 pre-rendering 하고 유저에게 빠른 웹페이지로 응답할 수 있다는 것이 가장 큰 장점이다. 특히, 이 pre-rendering 한 문서는 모든 js 요소들이 빠진 굉장히 가벼운 상태이므로 클라이언트에게 빠른 로딩이 가능하다.
  • 단계 :
    1. SSR을 기반으로 서버에 사전에 저장된 렌더트리(render tree)의 html을 로드 (pre-render 후 CSR 사용)
    2. 페이지가 그려진 이후에 페이지 내부에서 동적인 데이터를 패치(axios, fetch, XMLHttpRequest)하는 과정은 CSR 방식을 따른다.
    3. 만약 페이지가 로드될 때 함께 데이터가 페칭되어야 하는거면 pre-render
    4. next.js의 데이터 패칭 방식(getInitialProps, getStaticProps, getStaticPath, getServerSideProps)을 이용해 첫 렌더링 시에 html 파일 뿐만 아니라 데이터가 패칭 될 수 있도록 처리해야 한다.
• pre-rendering
  • 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로 사용자 경험이 좋고, SEO에서도 장점을 얻을 수 있다.
  • SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해준다. 물론 혼합하여 사용도 가능하다.

• 빌드 시에 만든 모든 페이지를 미리 렌더링 한다. 이렇게 만들어진 html은 처음 페이지를 불러올 때 사용자에게 빠르게 보여진다. 빠른 렌더링으로 검색엔진에도 좋다. html을 불러온 후에는 페이지에 필요한 최소한의 자바스크립트 코드만 불러와 페이지를 사용할 수 있게 된다. 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에 서버 사이드 렌더링을 통해 html을 생성하게 된다.

• 설정이 따로 필요없음
  • 기본적으로 웹팩과 바벨을 사용하고 있는데, 이들을 사용하여 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있다. 또, 사용하고 싶은 플러그인이 있으면 간단하게 추가하여 사용할 수 있도록 지원을 하고 있다.

• typescript 내장
  • 기존의 자바스크립트 문법을 그대로 사용하면서 정적 타입 언어의 장점을 가질 수 있다.
  • next와 ts를 함께 사용할 때, 타입 지원을 통해 편리함과 안정성을 얻을 수 있다.
  • next는 ts 설정을 따로 할 필요가 없이 사용할 수 있고, ts를 잘 지원하고 있다.
• 파일 기반 네비게이션 기능
  • react에서는 라우트를 위해서 'react-router' 라이브러리를 사용하거나, 다른 방법으로 라우팅 설정을 해줘야 한다. 그로 인해, 페이지의 경로를 직접 설정해줘야 했지만, next는 파일 시스템 기반 라우팅을 사용한다. 그래서 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편하다.
• styled-jsx 지원
  • next는 자체 css-in-js인 styled-jsx를 지원한다. next에서 기본적으로 제공하는 기능이기에 스타일을 서버 사이드 렌더링 하기 위한 설정이 필요하지 않다.

• 장점
  • 속도
  • SEO(검색엔진) 최적화
    - 검색엔진 봇에 렌더링된 html을 제공하여 seo에 좋다.

• 단점
  • 1. 서버 부담
       - 페이지 이동 시 템플릿을 중복해서 로딩하고, 서버 사이드 렌더링을 하는 것이 서버에 부담을 주기 때문에 성능 상 좋지 않다.
  • 2. 화면 깜빡임
       - 페이지 이동 시 새로운 페이지를 요청하기 때문에 페이지 이동 시에 깜빡임이 존재한다.

=> Next는 SPA와 SSR의 단점을 해결하기 위해 React에 SSR을 기능을 더하여 SPA와 SSR의 장점을 가질 수 있게 되었다.

---

2. 리액트만 사용하면 안되는지 ?

SPA, CSR

3. Next.js를 사용하는 이유

• react 기반 프레임워크로 개발자에게 높은 생산성과 편의성을 제공한다.
• SSR(Server-Side Rendering)
• SEO(Search Engine Optimization)
• 리액트의 단점 때문에

• 📝 리액트에 SSR 기능을 추가하려면 ?
  • 웹 서버 생성, 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정 필요.
  => 하지만, Next를 사용하면 이런 것들을 설정하지 않고, 사용할 수 있게 된다. 이러한 개발 환경을 설정하는 번거로움을 줄일 수 있는 것이 Next의 특징 중 하나이다.

hydrate이란 ?

• hydrate : 서버 단에서 렌더링 된 정적 페이지와 번들링 된 js 파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 html 코드와 react인 js 코드를 서로 매칭 시키는 과정.

리덕스를 사용하는 이유

• 상태 관리
  • 리액트만 사용했을 때, 컴포넌트 내부에서 상태관리를 함. props를 전달하기 위해서는 부모에서 자식 컴포넌트로 직접 하나하나 props를 전달해줘야 하는데, 이 때, 해당 props를 필요로 하지 않는 컴포넌트에도 props가 전달이 되야 해서, 불필요한 소모가 생긴다.
  • 소규모의 프로젝트의 경우, 제어할 수 있는 정도의 state를 사용하면 굳이 리덕스를 쓰지 않아도 되지만, 프로젝트의 규모가 크거나, 또 state?props?의 반복적인 호출이 필요한 경우에는 리덕스 라이브러리를 설치하여 하나의 state로 상태 관리를 하고 필요한 경우 만들어놓은 액션함수를 디스패치하여 리듀서를 거쳐 state를 작업해주면 된다.

---

---

• 참고 사이트

https://velog.io/@khy226/Next.js-%EB%9E%80-oxp9y4fg