Next.js

2025. 3. 20. 16:43ㆍ개발 공부

1. WHY Next.js ?

1.1 React + Express 환경 요약

  1. 현재 개발 구조
    1. React는 클라이언트 사이드 렌더링(CSR) 방식으로 SPA(Single Page Application) 형태.
    2. Express는 API 서버 역할을 수행.
  2. 장점
    1. React의 컴포넌트 기반 설계로 생산성 향상.
    2. Express는 유연하고 강력한 백엔드 API 설계 가능.
  3. 한계
    1. 초기 로딩 속도 느림: CSR 방식은 HTML이 비어 있고, JavaScript 로드 후 렌더링.
      1. 상세 
        CSR(Client-Side Rendering)
        - 서버가 브라우저에 빈 HTML(앱의 기본 구조만 포함된 HTML)을 보내고, JavaScript 파일을 함께 전송
         (브라우저가 JavaScript를 다운로드, 실행해야만 화면이 완전히 렌더링됨)
        ex) 사용자가 페이지를 요청했을 때, HTML에는 <div id="root"></div>만 있고, JavaScript가 실행된 후에야 이 안에 콘텐츠가 렌더링
         
         
        단점
        - JavaScript가 로드되기 전까지는 사용자에게 콘텐츠가 보이지 않음 → 초기 로딩이 느림.
        - 검색 엔진은 JavaScript를 실행하지 못할 수도 있어 콘텐츠를 인식하지 못함.
    2. SEO 문제: 검색 엔진이 콘텐츠를 제대로 크롤링하지 못함.
    3. 클라이언트와 서버 코드 분리로 프로젝트 관리가 복잡.
      1. 상세 
        React와 Express를 각각 독립적으로 관리해야 함.
        React: 프론트엔드 개발자는 클라이언트 코드에서 데이터를 API로 호출.
        Express: 백엔드 개발자는 데이터를 처리하고 API를 제공.
        -- 두 코드가 별도 리포지토리나 프로젝트로 관리되면, 협업과 디버깅이 어려움.

1.2 Next.js란?

  1. React 기반 풀스택 프레임워크로, CSR의 한계를 극복한 도구.
  2. Tiktok, Twitch, Hulu, Notion, HBO Max, ChatGPT 등 유명 웹사이트가 Next.js로 구축되어있음.
  3. Next.js의 주요 특징
    1. SSR(Server-Side Rendering): 요청 시 서버에서 HTML 생성.
    2. SSG(Static Site Generation): 빌드 시 정적 페이지 생성.
    3. API Routes: 백엔드 서버 없이 API 구축.
    4. 이미지 최적화: next/image 컴포넌트를 통해 lazy loading과 크기 조정 제공.

 

2. Next.js의 장점

2.1 성능 최적화

  1. SSR(Server-Side Rendering)의 장점
    1. 요청 시 HTML을 서버에서 생성하여 사용자 맞춤 데이터를 빠르게 제공.
    2. 사용자에게 초기 화면을 신속히 렌더링.
    3. 상세 
      콘텐츠가 포함된 HTML을 브라우저가 즉시 렌더링 → 초기 로딩 속도 향상.
      검색 엔진이 완전한 HTML을 읽을 수 있어 SEO가 개선.

  2. SSG(Static Site Generation)의 장점 (빌드 시 정적 페이지 생성)
    1. 정적 페이지는 서버 부하를 줄이고, 초고속으로 콘텐츠 제공.
      1. 상세 
        1. Static Site Generation(SSG)이란?
        SSG는 웹사이트의 HTML 파일을 빌드 시점에 미리 생성하여 정적 파일로 저장하는 방식
        사용자가 페이지를 요청할 때, 이미 생성된 완성된 HTML 파일을 서버가 그대로 전송
         
        2. SSG가 왜 서버 부하를 줄일까?
        일반적인 동적 페이지 생성(예: SSR):
        - 사용자가 페이지를 요청하면
            서버가 데이터베이스(DB)에서 데이터를 가져옴
            데이터를 HTML로 렌더링한 후 브라우저에 전송
        - 단점
            요청마다 서버가 데이터베이스 조회 및 연산을 해야 하므로, 요청이 많아질수록 서버 부하가 증가
         
        SSG(정적 페이지 생성):
        - 빌드 시점에 서버가 데이터를 가져와 HTML 파일을 미리 생성
            예: 블로그 게시물을 정적 HTML로 변환
        - 사용자가 페이지를 요청하면:
            서버는 이미 생성된 HTML 파일을 그대로 전송
            데이터베이스 조회나 연산이 필요하지 않음
        - 장점
            요청이 많아도 서버는 단순히 파일을 전송하기만 하면 되므로 부하가 적음
    2. 주로 블로그, 문서 사이트에 적합.
  3. 코드 스플리팅
    1. 페이지별 필요한 코드만 로드하여 로딩 속도 개선.
    2. 상세 
      CSR(클라이언트 사이드 렌더링)에서 발생하는 문제
      1. 전체 코드 로드
          초기 로딩 시 앱 전체의 코드(모든 페이지, 모든 기능)를 로드.
          앱이 커질수록 초기 로딩 속도가 느려짐.
      2. 리소스 낭비
          사용자가 A 페이지만 본다면, B, C 페이지의 코드 로드는 불필요한 작업.

2.2 SEO 최적화

  1. 검색 엔진 친화적 HTML 제공
    1. React의 CSR은 빈 HTML로 시작하지만, SSR/SSG는 완전한 HTML을 제공.
    2. 검색 엔진 크롤러가 콘텐츠를 쉽게 인식 가능.
  2. 실제 사례
    1. Next.js는 TikTok, Hulu, ChatGPT 등 대형 서비스에서 사용되어 검색 최적화 효과를 증명.

2.3 개발 생산성 향상

  1. Pages 디렉토리 라우팅
    1. 파일 기반 라우팅으로 라우터 설정 필요 없음.
      1. 상세
        React에서는 react-router 같은 라이브러리를 사용해 라우팅 설정 필요.
        각 URL에 대해 Route 컴포넌트를 정의해야 하며, 복잡한 설정이 요구됨.
        Next.js는 파일 이름만으로 라우팅을 자동 생성 → 개발 속도 향상.
    2. 디렉토리 구조로 URL 정의 가능.
  2. next/image
    1. 최적화된 이미지 로딩, lazy loading 지원.
      1. 자동 크기 조정: 기기 해상도에 맞춰 적절한 크기의 이미지를 제공.
      2. Lazy Loading: 사용자가 볼 때만 이미지를 로드.
      3. 상세 
        Lazy Loading
        - 필요한 이미지만 로드하여 초기 로딩 속도를 높이는 기법.
        - 사용자가 페이지를 스크롤할 때 필요한 이미지가 그때 로드됨.
        ex) 화면에 보이지 않는 이미지는 로드하지 않음.
        ex) 사용자 경험 개선과 네트워크 사용량 감소.
  3. API Routes
    1. Express 없이 간단한 API 엔드포인트 구현 가능.
      1. Express는 라우팅 설정 및 미들웨어 설정이 필요하지만, Next.js는 자동 API 라우팅 제공.
      2. 상세 
        Next.js는 pages/api 디렉토리에 파일을 생성하면 자동으로 API 엔드포인트를 만듦.
         
         
        예제 (pages/api/hello.js)
        export default function handler(req, res) {
          res.status(200).json({ message: "Hello from API Routes!" });
        }
         
        /api/hello로 요청하면 이 함수가 실행됨.
        Express 설정 없이 간단히 API 구현 가능.

 

3. Next.js의 단점

  1. 학습 곡선
    1. 기존 React 개발자가 SSR, SSG 개념을 학습해야 함.
  2. 복잡성 증가
    1. SSR과 클라이언트 렌더링 혼합 시 프로젝트 구조가 복잡해질 수 있음.
    2. 상세 
      1. SSR과 CSR의 동작 방식 차이
      - SSR
          서버에서 요청마다 HTML을 생성하여 브라우저로 전송.
          초기 로딩 속도가 빠르고, SEO에 유리.
      - CSR
          브라우저가 서버에서 HTML의 껍데기와 JavaScript를 받고, 클라이언트에서 화면을 렌더링.
          초기 로딩이 느리지만, 이후 사용자 상호작용이 부드러움.
       
      이 두 방식은 동작 방식이 완전히 다르므로, 프로젝트에서 혼합해서 사용할 경우 관리가 까다로워질 수 있음
       
      2. 혼합 사용 시 복잡성 증가의 이유
      2.1 데이터 처리 방식의 차이
      - SSR:서버에서 데이터를 가져와 HTML에 포함.
      예: getServerSideProps() 함수 사용.
      - CSR:클라이언트에서 API 요청으로 데이터를 가져와 렌더링.
      예: useEffect()로 API 호출.
       
       
      둘을 혼합하면 동일한 데이터를 두 방식으로 처리해야 하거나, 데이터를 가져오는 로직을 두 번 작성해야 할 수 있음
       
       
      2.2 상태 관리의 복잡성
      - SSR에서 초기 데이터를 서버에서 제공하면, 클라이언트에서 상태를 초기화하거나 동기화하는 과정이 추가적으로 필요
      - 예를 들어, SSR에서 받아온 데이터를 클라이언트의 상태 관리 라이브러리(Redux, Zustand 등)와 동기화하는 코드가 추가될 수 있음
       
      2.3 서버와 클라이언트 코드 분리
      - SSR은 서버에서 동작하는 코드이고, CSR은 브라우저에서 실행됨
      - 프로젝트에서 서버 전용 코드와 클라이언트 전용 코드를 구분해야 하며, 이를 잘못 관리하면 오류가 발생할 수 있음
      예: SSR에서는 window 객체를 사용할 수 없음.
       
      2.4 빌드 및 배포의 복잡성
      - SSR을 사용하면 서버가 필요하므로, CSR만 사용하는 애플리케이션보다 배포 과정이 더 복잡.
      - 서버의 상태와 클라이언트의 상태를 모두 관리해야 하므로 유지보수 비용이 증가.
  3. 제한된 유연성
    1. Express보다 API 설계 자유도가 낮음.

 

 

 CSR VS SSR

 

 

실습

1) pages/index.tsx

상세 
export default function Home() {
  return "hi";
}

http://localhost:3000로 접속해보면, 어떤 설정이나 router 설정 없이도 자동적으로 hi를 확인할 수 있음.

2) pages/about.tsx

about.ts 만들고 안에 코드 작성하면, /about 으로 이동하면 작성한 내용 확인할 수 있음.

상세 
export default function Home() {
  return "about";
}

http://localhost:3000/about로 접속하면, about을 확인할 수 있음.

1.1 Pages

react 컴포넌트를 export하는 파일들을 pages 폴더 안에 넣어주면, 파일 이름으로 url을 만들어 자동으로 라우팅 해줌

특징

  • 파일 이름이 url이 됨.
  • export default function ~ 형태로 컴포넌트 작성해야함.
  • 404 페이지도 자동으로 만들어져 있음.(커스터마이징 가능)
  • index.ts는 예외적으로 홈페이지로 연결됨.(앱의 Home, url은  /)
  • import react from "react"; 할 필요 없음

 

1.2 Static Pre Rendering

  • Next.js는 서버에서 페이지를 미리 렌더링한 HTML을 클라이언트에게 전달

      > 사용자가 페이지 로드 시 빈 HTML을 보는 대신, 기본적인 UI는 즉시 볼 수 있음

왜 장점이 될까?

  1. SEO에 유리함
    1. 브라우저가 자바스크립트를 비활성화해도 페이지의 **기본 콘텐츠(HTML)**는 표시되므로, 검색 엔진 크롤러가 페이지를 쉽게 인덱싱할 수 있음
  2. 초기 로드 속도 개선
    1. 사용자에게 먼저 미리 렌더링된 HTML이 전달되므로, 페이지가 빈 화면 대신 초기 콘텐츠를 바로 보여줄 수 있음
    2. 이후에 필요한 JavaScript를 로드해서 기능적으로 완전한 페이지를 제공합니다.
  3. 코드 분할과 최적화
    1. 동적인 로직이 필요한 컴포넌트에만 JavaScript를 로드하므로, 필요하지 않은 부분에서는 JavaScript를 줄이고 페이지를 더 가볍게 만듬
      예: 상단 헤더나 정적인 텍스트와 같은 부분은 서버에서만 렌더링하고, 버튼 클릭이나 상태 관리가 필요한 부분만 클라이언트에서 활성화
  4. 사용자가 HTML을 볼 수 있음
    1. 자바스크립트를 비활성화한 사용자는 더 이상 빈 페이지를 보지 않고, 최소한 정적인 콘텐츠를 볼 수 있음. 이는 접근성과 사용자 경험(UX)에 긍정적인 영향

 

예제 - pages/index.tsx

import { useState } from "react";

export default function Home() {
  const [counter, setCounter] = useState(0);
  return (
    <div> <h1>Hello {counter}</h1> <button onClick={() => setCounter((prev) => prev + 1)}>+</button> </div>
  );
}

CSR 작동 방식:

  1. 초기 요청
    사용자가 브라우저에서 페이지를 요청하면 서버는 단순히 빈 <div id="root"></div>과 같은 기본 HTML과 함께 JavaScript 번들 파일을 전달html

    <html> <body> <div id="root"></div> <script src="/main.js"></script> </body> </html>
  2.  
  3. 예:
  4. JavaScript 다운로드
    브라우저는 서버에서 받은 JavaScript 파일을 다운로드하고 실행하여 React 같은 라이브러리를 통해 실제 화면을 그리기 시작
  5.  
  6. DOM 생성 및 렌더링
    React가 클라이언트에서 실행되어 DOM을 구성하고, 이후 화면에 출력

CSR의 단점: 느린 초기 렌더링

CSR 방식에서는 화면을 그리는 모든 작업이 브라우저에서 이루어지기 때문에 다음과 같은 문제가 발생할 수 있음

  1. 빈 화면 문제
    사용자는 JavaScript가 실행되기 전까지 빈 화면을 보게 됩니다. (특히 네트워크 속도가 느리거나 JavaScript 실행이 지연되는 경우 더 심각)
  2. 느린 로드 시간
    JavaScript 파일이 클수록 다운로드 및 실행에 시간이 더 걸리며, 초기 화면 출력이 늦음
  3. SEO에 불리함
    검색 엔진 크롤러는 JavaScript를 실행하지 못하거나 실행 시간이 오래 걸릴 수 있음. CSR에서는 페이지의 중요한 콘텐츠가 초기 HTML에 포함되지 않기 때문에 검색 엔진이 페이지를 제대로 인덱싱하지 못할 수 있음.

 

 

1.3 Routing

보통 페이지간 이동은 a 태그를 사용하지만, next.js에서는 사용하지 않음

a 태그를 사용하면 처음 페이지 진입시 번들파일을 받고, a태그에 의해 라우팅 되면서 다시 번들파일을 받기 때문.

redux를 사용하는 경우에는 store의 state 값이 증발되는 현상도 발생

그렇기 때문에 next에서 페이지간 이동에는 모두 Link 태그를 사용

<Link href="/read/1">html</Link>

웹 사이트 새로고침 할 필요 없이 페이지 이동 (CSR)

 

결론

  • React와 Express를 활용한 기존 환경은 클라이언트 사이드 렌더링(CSR) 기반으로 빠른 개발이 가능하고 유연한 API 설계를 지원
  • HOWEVER 초기 로딩 속도, SEO 문제, 복잡한 프로젝트 관리와 같은 한계가 존재

  • Next.js
    • 장점
      • SSR(Server-Side Rendering)
      • SSG(Static Site Generation)
      • 초기 로딩 속도 개선
      • SEO 최적화 가능
      • 파일 기반 라우팅
      • API Routes
        >> 개발 생산성 높임
    • 단점
      • SSR, CSR 혼합 시 복잡성이 증가 가능
      • 기존 React 개발자에게는 새로운 개념(SRR, SSG 등)을 학습해야 하는 부담
        >> Next.js가 제공하는 성능 최적화, SEO 개선, 그리고 개발자 경험 향상이라는 장점으로 충분히 상쇄

 

Next.js는 기존 CSR 환경의 한계를 극복하면서 더욱 발전된 웹 개발 경험과 성능을 제공할 수 있는 선택 중 하나



'개발 공부' 카테고리의 다른 글

Generative AI (생성형 AI)  (0) 2025.03.20

관련글

티스토리툴바