[Next.js14 강의] 27강 - Next.js의 Advanced Features (Incremental Static Regeneration, Middleware)

안녕하세요! 그레이 해커 월횽입니다. 이번 강의에서는 Incremental Static Regeneration(ISR)과 Middleware 같은 Next.js의 고급 기능을 살펴봅니다. 이 기능들을 통해 Next.js 애플리케이션의 성능을 높이고, 더욱 세밀한 제어가 가능하게 됩니다.

 

 

1. Incremental Static Regeneration (ISR)

 

1-1. ISR 개념

ISR은 정적 생성(SSG)의 이점을 유지하면서도, 일부 페이지를 동적으로 재생성할 수 있게 해줍니다. 한 번 빌드된 정적 페이지가 특정 주기마다 갱신되며, 이 과정이 사용자에게 동적 페이지처럼 제공됩니다. 이를 통해 사이트 전체를 매번 다시 빌드할 필요 없이 최신 데이터를 제공할 수 있습니다.

 

1-2. ISR 설정

ISR을 구현하려면 getStaticProps에서 revalidate 속성을 설정합니다.

반응형

export async function getStaticProps() {
  const data = await fetchData();

  return {
    props: {
      data,
    },
    // 10초마다 페이지를 다시 생성
    revalidate: 10,  
  };
}

· revalidate: 10: 이 속성은 페이지가 요청된 이후 10초마다 새로 생성된다는 의미입니다.
· 사용자는 최신 데이터와 정적 페이지의 빠른 로딩 속도를 동시에 경험할 수 있습니다.

 

1-3. ISR의 장점

· 성능 최적화: 자주 변경되지 않는 페이지는 정적으로 제공되고, 필요한 경우에만 갱신됩니다.
· 유연성: CMS나 API로부터 데이터를 가져오는 페이지에 유용하며, 데이터가 자주 변경되는 경우에도 유리합니다.

 

 

2. Middleware

 

2-1. Middleware 개념

Middleware는 요청이 서버로 전달되기 전에 실행되는 코드로, 요청을 중간에서 가로채고 처리할 수 있는 기능입니다. 이를 통해 요청을 검사, 권한을 확인, 또는 리디렉션 같은 작업을 할 수 있습니다. Next.js에서 라우팅 로직을 사용자 지정할 수 있어 유연한 페이지 전환이 가능합니다.

 

2-2. Middleware 설정

middleware.js 파일을 프로젝트 루트에 생성하여 Middleware를 설정합니다.

728x90

import { NextResponse } from 'next/server';

export function middleware(req) {
  const { pathname } = req.nextUrl;

  // 인증되지 않은 사용자가 특정 페이지에 접근할 때 리디렉션 처리
  if (pathname.startsWith('/dashboard') && !req.cookies.authToken) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  // 그대로 통과시키는 경우
  return NextResponse.next();
}

· pathname.startsWith('/dashboard'): 경로가 /dashboard로 시작하는 페이지에 대해 동작합니다.
· NextResponse.redirect: 미들웨어를 사용해 로그인되지 않은 사용자를 /login 페이지로 리디렉션합니다.

 

2-3. Middleware의 장점

· 보안 강화: 사용자의 인증 상태를 확인하여 비정상적인 접근을 막을 수 있습니다.
· 성능 최적화: 요청을 미리 처리해 클라이언트 쪽에서 불필요한 작업을 줄일 수 있습니다.
· 유연한 라우팅 제어: 라우팅과 관련된 복잡한 로직을 쉽게 구현할 수 있습니다.

 

 

3. ISR과 Middleware의 실전 활용 사례

 

3-1. ISR 활용

· 블로그 페이지: 블로그 글이 자주 업데이트되지 않지만, 새 글이 추가될 때마다 정적 페이지를 갱신하여 최신 정보를 제공.
· 상품 페이지: 전자상거래 사이트에서 상품 정보가 변경될 때 정적 페이지를 일부만 갱신하여 성능과 신뢰성 유지.

SMALL

3-2. Middleware 활용

· 사용자 권한 관리: 사용자가 특정 페이지에 접근하려 할 때 인증 상태를 확인해 적절히 리디렉션.
· AB 테스트: 사용자를 무작위로 나눠 서로 다른 페이지를 보여줄 수 있습니다.
· 지역 기반 콘텐츠 제공: 사용자의 IP 주소를 기반으로 언어 설정이나 지역 제한 콘텐츠를 제공.

 

 

4. ISR과 Middleware가 프로젝트에 미치는 영향

 

4-1. 성능 향상

ISR을 활용하면 정적 사이트 생성의 장점을 그대로 유지하면서도 실시간 데이터 갱신이 가능하므로, 트래픽이 많은 사이트에서도 성능을 극대화할 수 있습니다.

 

4-2. 보안 및 제어 강화

Middleware는 서버 측에서 요청을 미리 처리할 수 있어, 클라이언트 측에서 처리하는 것보다 보안이 강화됩니다. 이를 통해 권한 관리, 페이지 리디렉션, 쿠키 검증 등을 빠르게 처리할 수 있습니다.

4-3. 사용자 경험 개선

· 동적 데이터와 빠른 로딩을 동시에 제공하여 사용자 경험을 극대화할 수 있습니다.
· 페이지 이동 시 사용자 맞춤형 경험을 제공할 수 있어 개인화된 서비스 구현에 유리합니다.

 

이번 강의에서는 Incremental Static Regeneration(ISR)과 Middleware라는 Next.js의 고급 기능을 다뤘습니다. ISR을 통해 정적 페이지의 성능을 유지하면서도 실시간 데이터 반영이 가능하며, Middleware를 통해 라우팅과 인증 같은 요청 처리를 중간에서 제어할 수 있습니다. 이 두 기능은 Next.js 애플리케이션의 성능과 유연성을 높이는 핵심 도구로 사용될 수 있습니다.

 

 

 

 

 

- 이전 수업 목록