카테고리 없음

Next.js | 리액트 프레임워크 |구조 | 왜 사용하는지?

김가마 2023. 3. 9. 22:48

React 프레임워크 이다.

https://nextjs.org/learn/foundations/from-javascript-to-react 공식문서 📌

리액트?

React는 대화형 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리 이다.

 

사용자 인터페이스란 ?

  • 사용자가 화면에서 보고 상호작용하는 요소 를 말한다.

라이브러리란?

React가 UI 를 빌드하는데 유용한 기능을 제공하지만 애플리케이션에서 해당 기능들을 사용할 위치는 개발자들에게 맡기는 의미이다.

서론이였고 그래서 Next.js 뭔데?

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

 

 

리액트 문서는 Next.js를 ‘권고하는 툴 체인들’ 중 하나로 언급하며 개발자들이 Node.js로 서버 렌더링되는 웹사이트를 빌드할 때의 해결책의 하나로 충고하고 있다.

 

웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 프레임워크 입니다.

프레임워크란 ?

    • Next.js가 React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다는 의미입니다.

React를 사용하여 → UI를 구축한 다음→ Next.js 기능을 점진적으로 채택하여

라우팅, 데이터 가져오기, 통합과 같은 일반적인 애플리케이션(프로그램) 요구 사항을 해결하는 동시에 개발자와 최종 사용자 경험을 개선할 수 있습니다.

특히, SEO를 위한 SSR를 가능하게 해주는 프레임워크이다

SEO: SEO란, Search Engine Optimization의 약자로, SEO는 구글, 네이버와 같은 검색 엔진들이 서버에 등록된 웹사이트를 하나하나씩 돌아 다니면서 웹사이트의 HTML 문서를 분석해주는 것

SSR이란? Sever Side Rendering( 서버사이드렌더링 )

👩🏻 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식 의미

서버로부터 완전하게 만들어진 html 파일을 받아와서 페이지 전체를 렌더링을 하는 방식이다.

 

리액트는 대표적으로 CSR(Client Sever Rendering)이다. 클라이언트 서버 사이드 렌더링

이런 리액트 의 CSR 적인 부분에서 SSR적으로 바꿔주기 위해서 Next.js 와 같은 라이브러리를 사용한다 -이유1-

SSR은 페이지 이동시 새로운 페이지를 요청하기 때문에 페이지 이동시 깜빡임이 존재하고 ,

템플릿 중복해 로딩한다면 이는 서버에 부담을 줌으로 성능상 좋지 않는 단점이 있다.

 

 

CSR Client Side Rendering

 👩🏻 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고

사용자가 요청 할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미한다.

 

 

 👩🏻  💡CSR의 동작 과정 → 초기 화면수행

사용자가 홈페이지 접속하면 (최초 접속) - 클라이언트는 이걸 확인하고 서버로 → 요청해준다

서버는 빈페이지 (Html cssjs) 를 클라이언트에게 전달한다

전달 받은 클라이언트에서 해당 화면을 그려주고 스크립트를 수행하여 최종적인 화면을→ 사용자에게 보여준다.

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

 

 👩🏻 💡페이지 이동 / 동작이 발생한 경우

브라우저🖥에서 클라이언트로 요청한다.

클라이언트에서 해당정보를 처리하고 브라우저🖥로 전달한다.

(페이지를 이동한 경우 클라이언트 내에서 처리함)

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

 

Next.js 동작과정 ?

 👩🏻 💡 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 방식을 통해서 서버를 거치지 않고 브라우저에서 페이지를 이동한다.

 

Next.js 왜 써야하는가?

  1. Next.js는 초기 페이지를 서버에서 자바스크립트로 로딩하는 방식으로 → Pre-rendering(사전 렌더링) 이용

Pre-rendering(사전 렌더링): 각 페이지들을 사전에 미리 HTML 문서로 생성해서 가지고 있는 것. Next의 pre-rendering 시스템에서는 빌드 타임 때 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해 가지고 있다가, 서버로 요청이 들어올 때 알맞은 페이지를 반환 해준다.

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

💡 이러한 방식은 이미 구성된 HTML 파일을 사용자에게 보여주기 때문에 초기 페이지 로딩 속도가 빨라집니다.

(해당 처리는 Hydration을 이용하여 처리합니다.)

💡 또한 이 방식은 파일이 로드되기 전에 페이지가 모두 구성되어 있기에 SEO 점수에서도 높은 점수를 받습니다.

( 해당 SEO는 하단에 추가 설명이 되어 있습니다)*

 

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

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

  • 검색엔진 최적화로 웹 사이트 결과에 더 잘보이도록 최적화하는것을 의미한다.
  • 온라인 쇼핑몰의 경우 상단에 노출되는 것을 의미 하는데 CSR을 이용하면 검색엔진 봇들이 초기 HTML 빈 페이지에 아무것도 없기에 데이터 수집을 못하여서 검색엔진 노출이 어렵다.
  1. 직관적인 페이지 기반 라우팅 시스템 (Auto Routing)
{/* 사용자 관련 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}  />}  />

Next.js는 SPA와 SSR의 단점을 해결하기 위해서 리액트에 SSR기능을 더해 + SPA & SSR의 장점을 갖고 있다.

  1. SPA의 장점을 유지한다.

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

장점

  1. 하나하나 화면 전체를 렌더링할 필요가 없기 때문에 화면이동이 빠르다.
  2. 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적이다.
  3. 유저에 입장해서 사용하기 편리하다.

단점

  1. 처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸린다.
  2. 어플리케이션을 구현하는데 보다 시간이 걸리며 복잡하다.
  1. Code Splitting (코드 분할) 지원
  • 리액트에 SSR 기능을 추가하려면 웹 서버를 만들어 주어야 하고, 웹팩 설정, 데이터 로딩, 코드 스플리팅 등 복잡한 과정을 필요로 한다.
  • Next.js를 통해 이러한 것들을 설정하지 않고 사용할 수 있게 된다.
  • 이러한 개발 환경을 설정하는 번거로움을 줄일 수 있는 것이 Next.js의 특징 중 하나이다.

👩🏻 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것입니다. 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.

 

 

Next.js를 사용해야 하는 이유 (수많은 장점!)

1) 사전 렌더링 및 서버사이드 렌더링

  • 서버 사이드 렌더링 기능을 제공하여 클라이언트 사이드 렌더링 환경보다 빠른 렌더링을 불러올 수 있.

2) Hot Code Reloading을 지원

  • Next 개발 환경에서는 코드 변경 사항이 저장되면 응용 프로그램을 자동으로 다시 로드한다.

3) 자동 코드 분할

  • 자동 코드 분할 기능 덕분에 코드의 모든 가져오기각 번들로 묶여 각 페이지와 함께 제공된다.
  • 결과적으로, 불필요한 코드가 페이지에 로드 되지 않는다.

4) 추가 설정이 필요 없음

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

5) 타입스크립트가 내장됨

  • Next를 타입스크립트와 함께 사용할 때 타입 지원을 통해 편리함과 안정성을 얻을 수 있다.
  • Next는 타입스크립트 설정을 따로 할 필요 없이 사용할 수 있으며 타입스크립트를 지원하고 있다.

6) 파일기반 내비게이션 기능

  • 리액트에서는 라우트를 위해서 react-dom-router 라이브러리를 사용하여 라우팅 설정을 해주어야 한다. 그로 인해 페이지의 경로에 대하여 직접 설정을 해줘야 한다.
  • 하지만 Next.js 파일 시스템 기반 라우팅을 사용한다.
  • 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리하다는 장점이 있다.
  • (참고로, next.js는 next/link의 <Link /> 컴포넌트를 사용해서 클라이언트 사이드 네이게이션을 사용해야함)
저작자표시

'카테고리 없음'의 다른글

  • 현재글Next.js | 리액트 프레임워크 |구조 | 왜 사용하는지?

티스토리툴바