[JS] Next.js 이해하기(정의, 사용목적)

해당 글에서는 React를 사용한다면 요즘 필수적으로 사용이 되는
React 웹 프레임워크인 next.js에 대해서 이해하고 왜 사용해야 하는지에 대해 공유합니다.

 

 

1) 웹 프레임워크의 동향

---

💡 웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 ‘React’는 CSR(Client Side Rendering) 방식으로 동작을 합니다.

이에 동작 방법에 대해서 여러 가지 단점을 많이 가지고 있습니다. 그렇기에 CRS 방식과 SSR 방식의 각각의 장점을 유지하는 Next.js에 대해서 이해를 돕기 위한 글입니다. (* SSR , CSR 방식에 대한 설명은 하단에 준비되었습니다)

 

💡 2021년 / 2022년 Stack Overflow에서 조사한 웹 프레임워크 선호도 조사입니다.

- 2021년에 React.js는 압도적인 1위를 차지하였습니다.
- 2022년에는 React.js는 1위에서 2위로 넘어가고 주목할 점은 Next.js가 2022년에는 포함이 되었습니다.

 

💡 2021년 웹 프레임워크 선호도 순위

 

[출처] https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-frameworks

 

 

💡 2022년 웹 프레임워크 선호도 순위

 

[출처] https://survey.stackoverflow.co/2022/#section-most-popular-technologies-web-frameworks-and-technologies

 

 

2) Next.js란?

---

💡  Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크를 의미합니다.

💡  리액트 문서는 Next.js를 ‘권고하는 툴 체인들’ 중 하나로 언급하며 개발자들이 Node.js로 서버 렌더링되는 웹사이트를 빌드할 때의 해결책의 하나로 충고하고 있다.
[출처] 위키 백과 (https://ko.wikipedia.org/wiki/Next.js )

 

 

[출처] https://ko.reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains

 

 

 

 

 

3) Next.js의 동작원리

---

💡  Next.js의 정의에 대해서 이해를 하였다면 동작원리를 알아야 합니다.

💡 우선적으로 Next.js의 동작원리를 이해하려면 CSR, SSR에 대해서 이해를 하고 Next.js의 동작원리를 이해합니다.

 

 

1. SSR 정의 및 동작과정

---

💡 SSR(Server Side Rendering)이란?

- 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링을 하는 방식을 의미합니다.
(💡 렌더링: HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.)

[출처] https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

 

💡 SSR의 동작과정 - 초기 화면 수행

1. 사용자가 브라우져에서 요청을 한다(최초 홈페이지 접속)

2. 클라이언트에서는 이를 확인하고 서버로 요청을 합니다.

3. 서버에서 데이터를 포함한 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달합니다.

4. 전달받은 클라이언트에서 스크립트가 수행하여 최종적인 화면을 브라우저에 그려 사용자에게 보여줍니다.
(해당 부분에서 미리 구성된 JS까지 수행이 되어 사용자에게 보여지는 화면 속도가 빠릅니다.)


💡 SSR의 동작과정 - 페이지 이동 / 동작이 발생하는 경우

1. 브라우져에서 클라이언트로 요청합니다

2. 요청한 정보를 다시 서버로 재 요청합니다.( 페이지를 이동하는 경우 서버로 요청을 해야 함.)

3. 처리가 완료 된 후 클라이언트에 응답합니다.

4. 클라이언트에서 브라우저로 처리된 사항을 그려줍니다.

 

 

2. CSR 정의 및 동작과정

---

💡 CSR(Client Side Rendering) 이란?

 - 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청 할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미한다.
(💡 렌더링: HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다.)

 

 

[출처] https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

💡 CSR의 동작과정- 초기 화면 수행

1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다.

2. 서버는 빈 페이지(css, js 링크만 있음)를 클라이언트에게 전달합니다

3. 전달받은 클라이언트에서 해당 화면을 그려주고 스크립트를 수행하여 최종적인 화면을 사용자에게 보여줍니다.
(해당 부분에서 사용자에게 보여준 뒤 JS를 로드해서 사용자에게 보이는 화면 속도가 느리다)

4. 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행합니다.

💡 CSR의 동작과정- 페이지 이동 / 동작이 발생하는 경우

1. 브라우저에서 클라이언트로 요청합니다

2. 클라이언트에서는 해당 정보를 처리하고 브라우저로 전달합니다 (* 페이지를 이동하는 경우 클라이언트 내에서 이를 처리함)

3. 브라우저에서 이를 처리하고 처리된 사항을 그려줍니다.

 

 

 

3. Next.js 동작과정

---

[출처] https://medium.com/@msj9121/next-js-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-8727f76614c9

 

💡 Next.js 동작과정- 초기화면 수행 (SSR 방식 이용)

1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다.(Server-Side)

2. 서버에서는 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달합니다.(Pre-Rendering - init Load)
(* Initial Load : JS 동작이 없는 HTML을 먼저 화면에 보여주는 것을 의미)

3. 이 과정에서 동시에 클라이언트에서는 스크립트 파일을 수행하여서 클라이언트에게 전달합니다.(Hydration)
(* Hydration : Initial Load 이후 JS 파일을 HTML에 연결하는 과정을 의미)


💡  Next.js 동작과정- 페이지 이동 / 동작이 발생하는 경우(CSR 방식 이용)

1. 페이지 이동 및 동작이 발생하는 경우에는 CSR 방식을 통해서 서버를 거치지 않고 브라우저에서 페이지를 이동한다.

 

 

 

4) Next.js를 왜 써야 하는가?

---

💡 이러한 동작 원리를 이해하였다면, 실제로 사용을 해야 하는 이유에 대해서 확인해 봅니다.

 

 

 

1. Next.js는 초기 페이지를 서버에서 자바스크립트를 로딩한다.

---

💡 초기 페이지를 서버에서 자바스크립트까지 로딩을 하는 방식으로 ‘Pre-rendering’을 이용합니다. 이에 대해 어떻게 처리가 되는지 확인합니다.

 

💡 No Pre-rendering (Plain React.js app)

 

 

💡 No Pre-rendering 방식은 빈 HTML 파일을 최초에 먼저 렌더링 한 이후에 스크립트를 로딩하는 방식으로 처리가 됩니다.
- 이러한 방식은 추후 스크립트를 로딩하기에 사용자에게 보이는 초기 페이지 로딩시간이 늦어집니다.
- 또한 이 방식은 파일이 로드되기 전까지 페이지를 볼 수 없다는 뜻이며, 결국 UX 측면에서 낮은 평가를 받게 되며 SEO 점수에서도 낮은 점수를 받습니다.

  

 

 

💡 Pre-rendering (Using Next.js)

 

 

[출처] https://nextjs.org/learn/foundations/how-nextjs-works/rendering

 

 

💡 Pre-rendering 방식은 서버에서 자바스크립트로 HTML 컨텐츠를 채운 완성된 파일을 클라이언트에게 전달하여 처리가 됩니다.

- 이러한 방식은 이미 구성된 HTML 파일을 사용자에게 보여주기 때문에 초기 페이지 로딩 속도가 빨라집니다.
(해당 처리는 Hydration을 이용하여 처리합니다.)
- 또한 이 방식은 파일이 로드되기 전에 페이지가 모두 구성되어 있기에 SEO 점수에서도 높은 점수를 받습니다.
(* 해당 SEO는 하단에 추가 설명이 되어 있습니다)

 

 

 

 

2. Next.js는 SEO(Search Engine Optimiztion) 문제를 해결한다.

---

💡  1번에서 언급한 ‘pre-rendering’ 덕택에 HTML, CSS, Javascript로 만들어진 HTML을 제공함으로써 SEO 문제를 해결할 수 있습니다.

 

💡 검색엔진 최적화(SEO: Search Engine Optimization)

- 검색엔진 최적화로 웹 사이트 결과에 더 잘 보이도록 최적화하는 것을 의미합니다.

- 온라인 쇼핑몰의 경우 상단에 노출되는 것을 의미하는데 CSR을 이용하면 검색엔진 봇들이 초기 HTML 빈 페이지에 아무것도 없기에 데이터 수집을 못하여서 검색엔진 노출이 어렵다.

 

 

 

 

3. 직관적인 페이지 기반 라우팅 시스템 (Auto Routing)

---

💡  프로젝트의 가장 바깥 폴더인 /pages폴더에서 컴포넌트를 export 하면 폴더명이 페이지 route가 된다.

💡 Plain React App

- 라우터의 구성이 필요함

{/* 사용자 관련 URL */}
<Route path={"/user/userAdd"} render={(props) =><UserAddPage {...props}  />}  />
<Route path={"/user/userAdd:/emailCfmUid:/cfmType"} render={(props) =><UserAddPage {...props}  />}  />
<Route path={"/user/userAddSucess"}   render={(props) =><UserAddSucessPage {...props}  />}  />
<Route path={"/user/userPwReSetting"} render={(props) =><UserPwReSettingPage {...props}  />}  />
<Route path={"/user/userPwNewChange"} render={(props) =><UserPwNewChangePage {...props}  />}  />
<Route path={"/user/userEmailCfm"} render={(props) =><UserEmailCfmPage {...props}  />}  />

 

 

💡  Using Next.js

- 별도의 라우터 구성없음.

 

[참고] Next.js 공식사이트- 파일명의 규칙은 소문자로 시작

Learn | Next.js

 

 

4. Next.js는 SPA의 장점을 유지한다.

---

💡  첫 페이지를 SSR 방식을 이용하여 처리 한 이후 다른 페이지로 이동할 때부터는 CSR 방식으로 브라우저에서 처리하기 때문에 SPA의 장점을 유지 가능합니다.

 

 

5. Code Splitting (코드 분할) 지원

---

💡 디렉터리 내부의 각 파일 pages/은 빌드 프로세스 중에 자체 JavaScript 번들로 코드 분할됩니다.
[참고] https://nextjs.org/docs/migrating/from-react-router#code-splitting

 

💡 dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능합니다.
💡 import dynamic from 'next/dynamic'를 사용하면 코드 스플리팅 사용이 가능합니다.

 

import dynamic from 'next/dynamic'
import { Suspense } from 'react'

const DynamicHeader = dynamic(() => import('../components/header'), {
  suspense: true,
})

export default function Home() {
  return (
    <Suspense fallback={`Loading...`}>
      <DynamicHeader />
    </Suspense>
  )
}

[ 더 알아보기 ] 코드 스플리팅(Code Splitting) 이란?
💡 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것입니다. 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.

 

 

Advanced Features: Dynamic Import | Next.js

 

4) Next.js로 프로젝트 구성하기

---

 

1. 프로젝트 생성하기

---

해당 프로젝트는 create-next-app 방식을 이용하여 구성하고 Typescript 템플릿을 이용하였습니다.

# No Typescript next.js 프로젝트 생성
yarn create next-app

# Typescript 기반 next.js 프로젝트 생성
yarn create next-app --typescript

 

 

 

오늘도 감사합니다. 😀