개발이 하고 싶어요

🖥Frontend/Next.js

Next.js - 1. 개념정리

코너(Corner) 2023. 9. 1.
반응형

Next.js가 무엇이고 어떤 철학을 가지고 있는가

Next.js는 무엇인가?

웹 어플리케이션을 만들기 위해 React Framework를 사용한다. React는 Javascript의 Library로 UI를 컴포넌트로 나누어 손쉽게 구현할 수 있다. 웹, 모바일 앱을 손쉽게 만들수 있게 해준다. SPA로 간주된다.

라이브러리와 프레임워크의 차이가 무엇인가?

라이브러리는 작은 단위로 해결을 하기 위한 툴이라고 한다. UI 관련된 툴, 라우팅 관련된 툴 등.

프레임워크는 큰 단위의 솔루션을 제공해준다. React는 UI 관련된 툴으로 라이브러리로 볼 수 있으며, Angular와 모바일 앱 같은 것은 골격이 정해져있기 때문에 Frameworks로 볼 수 있다.

Next.js는 React를 기반으로 웹 어플리케이션을 만들기위한 전체적인 솔루션을 제공해준다고 볼 수 있다.

  • Full-stack
  • File-based routing
  • SEO, Image, Font Optimization
  • Server Side Rendering 하이브리드 렌더링이 가능

탄생과 철학

Next.js는 2016 첫 릴리즈. 깃헙 공개, Vercel 회사에서 제작

Vercel은 PaaS를 운영하는 회사이다. Cloud *Platform **as a Service의 약자

Cloud 배포 서비스는 서비스를 운영하기 위한 하드웨어 성능 요소들을 직접 세팅할 필요 없이 알아서 구동시켜주기 때문에 웹 앱을 배포하고 관리하기에 손쉽다.

  • Open-source web development framework
  • React-based web app Server-Side-Rendering, Static Site Generation

Next.js의 6가지 원칙

  1. out-of-the-box functionality requiring no setup - (즉시 사용가능한)
  2. JavaScript Full-stack
  3. automatic code-splitting and server-rendering - 사용자가 보고 있는 현재 페이지만 조금씩 잘라서 보내어 웹 사이트 로딩 속도 상승
  4. configurable data-fetching - 데이터를 언제 어떻게 fetching 함으로써 효율적인 웹 앱을 만들겠다.
  5. anticipating requests - 예측하여 데이터를 요청
  6. simplifying deployment - 손쉽게 배포 제시

2022년 Next.js 13 버전에서는 아주 많은 것들이 생겨났다.

  • Server Components
  • (nested) layouts
  • new routing
  • streaming
  • new toolchain (Turbopack)

 

CSR, SSG, ISR, SSR

CSR - Client Side Rendering

~~"Side"는 렌더링 하는 주체자가 누구인지를 의미, 클라이언트는 브라우저를 의미한다.

예를들어 홈페이지를 접속하면 클라이언트가 서버에게 요청 시 브라우저에서 로딩 발생 -> Server에서 React, JS가 빌드된 Source Code를 받고 -> Dom 요소로 변환 -> 브라우저에 페인팅 처리 -> 사용자가 페이지 화면 보임

*모든 소스코드를 서버로부터 받아서 클라이언트 측에서 DOM 요소로 변환해서 표기하는 것 *

  • 장점
    • 한번 로딩, 빠른 UX 제공 - 부분적인 업데이트만 필요해짐
    • 서버의 부하가 작음
  • 문제점
    • 페이지 로딩 시간 TTV(time to view), FCP(First Contentful Paint)이 길다.
    • 자바스크립트 활성화 필수
    • SEO 최적화가 힘듬
    • 보안에 취약함
    • CDN에 캐시가 안됨...
      • CDN은 Content Delivery Network이다.
        • 예를들어 해외 서버 A에 요청한 데이터를 나한테 가져오는데 이걸 계속 하다보면 오래 걸리는 소요 시간 때문에 사용자가 있는 그 나라나 그 근접한 국가 네트워크 C에 데이터를 캐싱 해놓는 것이다.
        • 즉 A에 요청이아닌 C에 요청 한 뒤 근처 인접국가 C가 데이터를 가지고 있지 않으면 A에 요청해서 받아온 다음 C 국가 CDN에 캐싱 해두고 C에 데이터를 바로 가져올 수 있기 때문에 빠르게 가져올 수 있다.
      • HTML이 텅텅 비었기때문에 힘들고, React와 JS 소스코드를 CDN 캐싱을 할 수 있지만 상당히 어렵다.

이런 점들을 해결하기 위해 SSG, SSR의 등장

SSG - Static Site Generation

렌더링 하는 주체자가 서버, 언제 렌더링 하냐에 따라 SSG인지 SSR인지 달라진다.

SSG는 빌드할때 렌더링된다. 서버에서 빌드할 때 사전에 HTML을 만들기 때문에 클라이언트에서 바로 받아와져서 표기된다.

다음엔 서버로 가지 않아도 CDN에 캐시된 HTML파일을 빠르게 받아온다.

  • 장점
    • 페이지 로딩 시간 (TTV)이 빠름
    • 자바스크립트 필요 없음
    • SEO 최적화가 좋음
    • 보안이 뛰어남
    • CDN에 캐시가 됨
  • 문제점
    • 데이터가 정적임
    • 사용자별 정보 제공의 어려움
    • 모든 사용자에게 동일한 데이터가 정적일땐 좋지만 그 상황이 아니라면 맞지 않음

이런 문제점을 해결하기 위해 나온게 ISR, SSR

ISR - Incremental Static Regeneration

렌더링 하는 주체자가 서버, 주기적으로 렌더링하게 된다.

설정한 주기만큼 웹 사이트를 빌드하여 변경사항이 반영되어 새로운 웹 사이트가 만들어진다.

SSG와 동일한 원리지만 정해진 주기로 페이지를 생성한다는 점의 차이가 있다.

  • 장점
    • SSG와 동일
    • 데이터가 주기적으로 업데이트 됨
  • 문제점
    • 실시간 데이터가 아닌 주기 시간을 기다려야 함
    • 사용자별 정보 제공의 어려움

이런 문제점을 해결하기 위해 나온게 SSR

SSR - Server Side Rendering

렌더링 하는 주체자가 서버, 요청시 렌더링한다.

클라이언트가 서버에 요청 -> 서버에서 모든 일을 처리 후 HTML을 클라이언트에게 전달

클라이언트에서 요청이 올 때 빌드하여 처리한다.

  • 장점
    • 페이지 로딩 시간(TTV)이 빠름
    • 자바스크립트 필요 없음
    • SEO 최적화가 좋음
    • 보안이 뛰어남
    • 실시간 데이터를 사용
    • 사용자별 필요한 데이터를 사용
  • 문제점
    • ISR, SSG와 비교 시 상대적으로 비교적 느릴 수 있음
    • 서버의 overhead가 상승 (과부하가 걸릴 수 있음)
    • CDN에 캐시가 안됨

하나의 완벽한 렌더링 솔루션은 없다.

반응형

Hybrid, Hydration (Next.js의 구현 특징)

Hybrid Web App

성능 좋은 강력한 Web App을 만들기 위해 두 개 이상(CSR, SSG, ISR, SSR)을 혼합해서 만들 수 있다.

Next.js를 사용하면 각 기 다른 방식의 렌더링으로 만들 수 있다.

메인 페이지는 ISR, About 페이지는 SSG, contact는 CSR, 사용자 별 유저 데이터는 SSR/CSR을 적절히 섞어서 하이브리드 형태로 만들 수 있다.

하나의 렌더링으로만 선택해서 개발해야 한다면 문제점이 발생할 수 있지만, 적재적소에 렌더링을 혼합하여 만든다면 웹 어플리케이션의 성능을 향상 시킬 수 있다.

Hydration for interaction

Hydartion 뜻) 수(水)화시키다. 물로 가득 채우다. 물 = 리액트로 가득 채우다. 뜻이 된다.

클라이언트가 서버에 페이지를 요청하면 서버에서 의미있는 데이터를 보여주기 위해 정적 HTML 페이지를 만든다.(pre-rendering)된 페이지를 클라이언트에게 보내준다.

HTML에는 자바스크립트가 포함되어있지 않기 때문에 사용자가 페이지는 볼 순 있지만 사용자가 아무리 액션을 취해도 반응하지 않는다. 그 다음 React와 JS 소스코드를 보내준다. 컴포넌트 렌더링이 발생한다.(하이드레이션 발생)

즉, 사용자에게 빠르게 페이지를 먼저 보여준 뒤 인터렉션 처리를 위한 자바스크립트와 리액트 소스코드를 보내게 되고, 클라이언트가 소스코드를 다운로드를 다 받으면 Hydration을 하며, 컴포넌트 렌더링을 해서 동작할 수 있게 해준다.

Key Points

가장 웹 개발 시 신경써야할 부분

  • TTV(Time To View)
  • TTI (Time To Interact)

Decision Tree

Next.js로 웹 앱을 개발하면서 언제 어떤 렌더링을 사용하면 좋은가?

User를 먼저 생각한다. 사용자의 로그인이 필요없고, 사용자별로 데이터가 동일하다면 정적(Static)인가? = SSG

데이터가 변경은 되지만 자주 변경되지 않는다 = ISR

데이터가 자주 변경되고, 변경될 때 즉각적으로 봐야한다면 = SSR 과부하가 걱정된다면 Hybrid (ISR | SSR + CSR)

로그인이 필요하다면, CSR / SSR / Hybird (SSG + CSR)

 

 

참고문서

https://nextjs.org/docs

 

Docs | Next.js

Using App Router Features available in /app

nextjs.org

 

반응형

'🖥Frontend > Next.js' 카테고리의 다른 글

Next.js TS Eslint 와 Prettier 동시에 셋업하기  (0) 2023.09.05

댓글

티스토리툴바