Front-End/Next

Next.js를 사용하는 이유

Voyage_dev 2022. 9. 28. 14:27

Framework vs Library

React는 라이브러리이고, Next는 React의 프레임워크이다.

이 둘의 궁극적인 차이점은 “응용 프로그램의 흐름 주도권을 누가 가지고 있느냐" 이다.

 

여기서 프레임워크란?

  • 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격 즉, 뼈대를 의미한다.
  • 사용자는 코드를 작성하여 애플리케이션을 개발한다. 여기서 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분을 프레임워크가 관리한다.

라이브러리란?

  • 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉, 특정 기능을 모아둔 코드 혹은 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다.

Next.js

SSR을 쉽게 구현하도록 도와주는 프레임워크

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다. 물론 React에서도 SSR이 구현 가능하다. 하지만, React로 구현하는 것은 굉장히 복잡한 일이기 때문에 Next.js가 등장했다.

Next.js를 사용하는 이유와 특징

Next.js를 사용하는 가장 큰 이유가 바로 SSR이다. 이 부분에 대해 이해하려면 SSR과 CSR의 차이를 명확히 알아야 한다. 개념에 대해 정리가 되지 않았으면 링크를 참고하면 좋을 것 같다.

 

[Web] SSR (서버사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)

 

[Web] SSR (서버사이드 렌더링) vs CSR (클라이언트 사이드 렌더링)

우선 렌더링이 뭘까? 서버로부터 받은 내용을 브라우저 화면에 표시 하는 것 렌더링의 과정 Loader 가 서버로 부터 정보들을 불러옴 파싱을 통해 문서를 DOM 트리로 만든다. DOM 트리가 구축되는 동

voyage-dev.tistory.com

초기 로딩 속도가 빠른 SSR, 페이지 전환이 빠른 CSR

SSR은 서버에서 View를 렌더링 하기 때문에 초기 로딩 속도가 굉장히 빠르고 검색 엔진 최적화 SEO에 유리하다. CSR은 서버가 아닌 클라이언트 측에서 서비스에 필요한 자원을 먼저 다운로드 후에 브라우저에 렌더링 하는 방식이다. SSR보다 초기 로딩 속도는 뒤쳐지지만, 첫 페이지를 로딩하면서 모든 파일을 다운로드하기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용한다.

간단하게 이 둘의 차이는 유저가 브라우저에서 보는 화면인 UI를 어디서 만들어 주는지에 따라 구분된다.

React의 동작 방식(CSR)

유저와 서버, 브라우저 각각의 입장을 나눠서 생각하면 이해하기 쉽다.

  1. 유저가 브라우저를 통해 앱에 접속
  2. 앱은 브라우저에게 자바스크립트 정보가 들어있는 빈 HTML 문서를 전달. 즉, 브라우저에게 자바스크립트 파일을 전달
  3. 브라우저는 자바스크립트 파일을 다운로드하고 동시에 유저는 빈 화면을 보게 된다 (접속에 대한 응답)
  4. 브라우저에서 js 파일의 다운로드가 끝나면 리액트 코드가 있는 js 파일을 실행
  5. 브라우저에 있는 리액트 코드가 UI를 렌더링한다 (동적으로 렌더링)
  6. 유저는 앱이 보여주고자 했던 화면을 보게 된다

브라우저가 자바스크립트 코드를 가지고 있지 않거나, 요청 중인 상태라면 UI를 구성할 수 없고, 유저는 빈 화면을 보게 된다. 리액트 코드가 실행되기 전까지는 유저 화면에 아무것도 보이지 않는다. 이러한 클라이언트 측에서 UI를 빌드하는게 CSR방식이다.

Next의 동작 방식(SSR)

  1. 유저가 브라우저를 통해 앱에 접속
  2. 서버에서 리액트를 실행
  3. 리액트는 UI를 렌더링
  4. 렌더링된 결과를 통해 브라우저에게 HTML을 제공한다 이때 유저는 앱의 초기화면을 보게 된다 (접속에 대한 응답)
  5. 이후 브라우저는 리액트 코드가 있는 자바스크립트 파일을 다운받고 실행시킨다. 이때부터 일반적인 리액트 앱과 같이 CSR의 동작(동적 렌더링)을 하게 되고 이 과정을 hydration이라고 한다. 즉, 서버에서 UI를 모두 구성한 후 유저에게 응답해 화면을 보여주는 방식으로, 화면이 pre-rendering되어 유저는 인터넷 속도에 상관없이 화면에 뭔가 나오는 것을 볼 수 있다. 이러한 서버 측에서 UI를 렌더링하는 것이 SSR 방식이다.

hydration : 리액트 코드가 브라우저에 이미 존재하는 HTML과 동기화하여 앱이 동적으로 상호작용할 수 있도록 하는 과정

 

일석이조인 Next.js

Next.js는 React를 기반으로 한 프레임워크로, SSR를 구현하고 SEO에 유리하기 때문에 사용한다. Next.js는 server에서 받은 사용자의 접속 요청을 초기에 SSR방식으로 렌더링 될 HTML을 보내고 브라우저에서 자바스크립트를 다운로드하고 리액트를 실행하기 때문에 SEO가 가능하다. 또한, 다른 페이지로 이동할 경우 CSR방식으로 server가 아닌 브라우저에서 처리함으로 SPA장점도 유지한다.

Next의 장점

automatic routing

기존에 CRA로 개발했을 때는 index.js만 불러와서 SPA 방식으로 라우팅에 따라 컴포넌트를 교체하는데, Next.js로 개발하게 되면 pages 디렉토리에 있는 파일을 기준으로 라우터별로 다른 페이지로 넘어가게 된다.

또한 Next.js에서 지원해 주는 Head 등을 통해 메타 태그를 입력해 주면 SEO에 문제가 없다.

 

Next.js는 자동으로 코드 스플리팅을 한다.

보통 개발을 할 때, 속도가 느리거나 혹은 메모리가 낮은 기기를 활용할 때 여러 가지 불편함이 발생할 수도 있다. 이런 문제를 사전에 방지하고자 자바스크립트 프로젝트를 생성할 때, 모든 코드를 하나의 Bundle(묶음)으로 만든다. 이러한 과정을 번들링이라 한다. 이러한 번들링 과정은 간단한 프로젝트를 개발하면 괜찮지만 프로젝트 규모가 커지면 이야기가 다르다. 전달해야 하는 파일도 커지고 브라우저가 파싱해야 하는 정보도 많아지기 때문에 앱 초기 구동 속도가 느려진다.

 

리액트에서는 이런 번들이 거대해지는 것을 방지하기 위해 여러 번들을 동적으로 생성하고 불러오는 코드 분할 즉, 코드 스플리팅을 지원한다. 이런 코드 분할은 Lazy Loading (지연 로딩)을 할 수 있게 도와주고, 코드 양을 줄이지 않고도 필요하지 않은 코드를 불러오지 않게 하여 초기 로딩에 필요한 자원을 줄여준다. 정리하면, 번들링된 파일을 분할해서 로드하여 초기 구동 속도를 빠르게 하고 성능 향상을 제공한다.

 

더욱이, Next.js의 프로덕션 빌드 내, 브라우저의 뷰 포트에서 Link 컴포넌트가 등장 할 때는 언제나 Next.js가 백그라운드에서 링크된 페이지를 위해 자동으로 코드를 프리패치한다. 백그라운드에 미리 로드되어 있을 것이며, 페이지 전환이 거의 즉시 이루어질 것이다.

정리

  • Next.js를 사용하는 주된 이유는 SSR을 구현하기 위함이다.
  • 초기에 SSR로 렌더링항 HTML을 보내기에 SEO에 유리해지고, 페이지를 변경할 때마다 CSR방식으로 처리하기 때문에 SPA장점도 유지할 수 있다.
  • 코드 분할을 통해 초기 구동 속도를 빠르게 할 수 있다.
  • Webpack 기반 환경을 통해 HMR을 적용하여 실시간 reload를 적용하는 등, 작업 환경을 커스터마이징하여 개발할 수 있다.

Next.js 시작하기

⑴ yarn 설치(MAC 기준)

brew install yarn// node 없을 때

npm install --global yarn// node 있을 때

⑵ yarn으로 react 시작하기

mkdir react-next
yarn add react react-dom next

Next.js 에서페이지들은 파일 이름에 따라 라우팅 되기 때문에, pages 디렉토리가 꼭 있어야 한다

mkdir pages

package.json 파일 수정

  "scripts": {
    "dev": "next"
  }

위 코드를 추가한 후

yarn run dev

명령어를 입력하고

localhost:3000에 접속해 보면

이렇게 404 페이지가 뜰 것이다

잘한 게 맞다

⑶ pages/index.js 생성

import Link from 'next/link'

const Index = () => (
  <div>
    <p>Hello Next.js!</p>
    <Link href="/first-post">first-post 페이지로 가기</Link>
  </div>
)

export default Index

이렇게 파일을 추가해 주면

localhost:3000에서 이렇게 잘 뜰 것이다

② create-next-app으로 Next.js 시작하기

⑴ create-next-app으로 시작하기

npx create-next-app react-next

 

create-next-app을 이용하면 이렇게 구조를 자동으로 잘 생성해 준다

 

 

 

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다

https://developer0809.tistory.com/129

https://velog.io/@bbbb_0221/Next.js-React.js-와-Next.js의-차이점

https://ivorycode.tistory.com/entry/Nextjs를-사용하는-이유

https://kyounghwan01.github.io/blog/React/next/basic/#next-js가-제공하는-주요-기능