Frontend/Next.js

[Next.js] 0. Next.js 개요

ayeongjin 2025. 1. 21. 01:09

Next.js는 라이러리가 아닌 프레임워크

 

Library

  • ex. React.js, JQuery
  • 주도권을 개발자가 가짐
    • 기능 구현을 원하는 방향으로 진행한다.
    • 쓰고싶은 도구, 쓰고싶은 기술을 쓴다.
  • 자유도가 높음 (기본 기능 외 제공 X) Framework
  • ex. Next.js, Remix
  • 주도권을 프레임워크가 가짐
    • 프레임워크가 제공하는 기능을 이용하거나 허용하는 범위 내에서 코드를 작성해야함
  • 자유도가 낮음 (거의 모든 기능을 제공)

사전 렌더링 이해하기

브라우저의 요청에 사전에 렌더링이 완료왼 HTML을 응답하는 렌더링 방식

Client Side Rendering의 단점을 효율적으로 해결하는 기술

 

Client Side Rendering (CSR)

  • React.js 앱의 기본적인 렌더링 방식
  • 클라이언트(브라우저)에서 직접 화면을 렌더링하는 방식
  1. 서버에서 빈 껍데기 HTML 전송
  2. 브라우저에서 빈 화면 렌더링
  3. 서버에서 JS Bundle 전송
  4. 브라우저에서 JS 실행
  5. 컨텐츠 렌더링
  • 장점 : 페이지 이동이 매우 빠르고 쾌적함
  • 단점 : 초기 접속 속도가 느리다

 

FCP (First Contentful Paint)

  • "요청 시작" 시험으로부터 컨텐츠가 화면에 처음 나타나는데 걸리는 시간
  • 요청 시작 <---> 컨텐츠 렌더링
  • 웹페이지의 성능을 대표할정도로 굉장히 중요한 지표

 

Server Side Rendering (SSR)

  • Next.js를 대표하는 기능 중 하나
  • React.js의 렌더링 방식인 CSR의 단점을 해결함
  • React APP의 단점 해소, 장점 승계 (빠른 FCP, 빠른 페이지 이동)
  1. 서버에서 JS 실행 (렌더링)하여 렌더링된 HTML 전송 : 자바스크립트 코드(React 컴포넌트)를 HTML로 변환하는 과정
  2. 브라우저에서 화면에 렌더링 : HTML 코드를 브라우저가 화면에 그려내는 작업
  3. 서버에서 JS Bundle 전송
  4. 브라우저 (클라이언트) 에서 JS 실행 (HTML과 연결) (수화 Hydration)
  5. 상호작용 가능 (이때까지 걸리는 시간 - TTI)
  6. 페이지 이동 요청 : 클라이언트 사이드 렌더링 방식으로 처리
  7. JS 실행 (컴포넌트 교체)
  8. 페이지 교체