[Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(섹션 0: 기초)

섹션 0: 기초

📌 VSCode에서 컴포넌트 코드 스니펫 사용

• 익스텐션 설치 : ES7+ React/Redux/React-Native/JS snippets
• rafce + tab : 화살표 함수 형태 리액트 컴포넌트 코드 생성

 

📌 내비게이션

• a태그 : 서버 측 내비게이션을 수행, 링크 클릭 시 전체 페이지 로딩
• Link 컴포넌트 : 클라이언트 측 라우팅을 활용한 페이지 간 전환. 페이지가 새로 렌더링 되지 않고 필요한 부분만 업데이트

 

📌 CSR/SSR

CSR	SSR
큰 사이즈 번들 크기	작은 번들 사이즈
리소스 집약적	리소스 최소화
검색 엔진 최적화 어려움(SEO)	검색엔진 최적화(SEO)
낮은 보안성	높은 보안성

 

📌 Hybrid Rendering

서버 측에서 페이지를 미리 생성하는 정적 생성(SSG: Static Site Generation)과 요청 시점에 페이지를 생성하는 SSR(Server Side Rendering)을 결합한 방식

📌 Data Fetching

1. Fetching on the Client

1) 방식

• useState + useEffect
• React Query

2) 문제점

• 번들 사이즈 증가
• 리소스 집약적
• 검색 엔진 최적화 어려움(SEO)
• 낮은 보안성
• 서버와의 추가 통신 발생(백엔드에 라운드트립 발생)

🤔 라운트 트립(Round-trip)은 클라이언트와 서버 간의 데이터 왕복 과정을 의미한다. 라운드 트립이 빈번하다는 것은 클라이언트와 서버 간에 요청과 응답이 빈번하다는 것이고, 서버 측 성능에 좋지 않은 결과를 줄 수 있다.

 

2. Fetching on the Server

• 클라이언트 측 Data Fetching의 문제를 해결할 수 있다.
• 서버 측에서 데이터를 받아오기 때문에 useState, useEffect 등을 사용하는 번거로움 해결한다.
• 의존성 없으므로 제로 의존성(Zero Dependency) 실현한다(코드 번들 사이즈 획기적으로 줄일 수 있음).

 

📌 JSONPlaceholder

더미 데이터를 얻기 위한 가짜 API 제공 서비스

사용자 API : https://jsonplaceholder.typicode.com/users

 

📌 Data Fetching 적용 코드

// src/app/users/page.tsx

import React from "react";

interface User {
  id: number;
  name: string;
}

const UsersPage = async () => {
  //fetch, json 메서드는 Promise를 반환하므로 await 키워드 사용
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  // json 메소드를 호출하면 내부적으로 파싱하고, JS가 이해할 수 있는 객체형태의 데이터를 리턴함
  // 반환값이 사용자 객체를 요소로 가진 배열이기 때문에 User 인터페이스 타입의 배열 타입으로 지정
  const users: User[] = await res.json();

  return (
    <div>
      <h1>This is UESRPAGE</h1>
      <ul>
        {users.map((user: User) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UsersPage;

 

📌 캐싱(Caching)

• 데이터 결과 저장, 재사용
• 성능 향상, 리소스 절약, 빠른 액세스

 

1. Data Sources의 속도

Memory > File System > Network

😛 Next.js는 Network 데이터를 File System에 캐싱함

 

2. 캐싱 적용

// Next.js는 기본적으로 데이터 요청을 캐싱함. fetch() 함수의 두번째 인수로 옵션 추가 가능. 
const res = await fetch("https://jsonplaceholder.typicode.com/users", {
    // cache: "no-store", // 캐싱 비활성화: 데이터가 자주 변경되는 경우 유용
    next: { revalidate: 10 }, // 10초 동안만 캐싱 유지, 이후 다시 요청: 10초 간격으로 최신 버전 갱신
  });

 

 

📌 정적 렌더링과 동적 렌더링(Static and Dynamic Rendering)

• Rendering
  • Client-Side
  • Server-Side
    • Static(Build Time)
    • Dynamic(Request Time)

// src/app/users/page.tsx

// (코드 생략)
const UsersPage = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users", {
    cache: "no-store", // 캐싱 막는 옵션 추가
  });
  const users: User[] = await res.json();

  return (
    <div>
      {/* (코드 생략) */}
      {/* 기본값은 정적 렌더링(○), 따라서-프로덕션 모드일때(npm run build 후 npm run start)-한번 렌더링된 데이터가 새로 고침해도 변경되지 않는다(개발 모드에서는 변경됨).
       단, 캐싱을 비활성화하는 경우, 동적 렌더링 방식(λ)으로 동작한다.
       페칭 옵션을 { cache: "no-store" }로 주면 동적 렌더링 방식으로 변경되고 새로고침시 시간이 변경되는 것 확인 가능하다. */}
      <p>{new Date().toLocaleTimeString()}</p>
      {/* (코드 생략) */}
    </div>
  );
};

export default UsersPage;