Next.js 14 – ‘isBot’ 기능을 활용한 검색 크롤러(봇) 감지 및 트래픽 최적화

next.jsnextjsnextjs14

Next.js 14 – ‘isBot’ 기능을 활용한 검색 크롤러(봇) 감지 및 트래픽 최적화

Next.js 14 버전에서는 기본적으로 제공되는 isBot 기능을 통해 요청이 크롤러(봇)로부터 왔는지 쉽게 감지할 수 있습니다. 이 글에서는 isBot을 활용한 SSR 및 CSR 페이지로의 분기 처리, 트러블슈팅 과정, 그리고 서버 액션을 사용한 페이지별 봇 감지 로직 구현까지 함께 알아보겠습니다.

1. isBot과 미들웨어를 활용한 SSR/CSR 분기 처리

Next.js의 미들웨어에서는 userAgent 함수를 이용하여 요청의 User-Agent 헤더 정보를 쉽게 확인할 수 있습니다. 이를 기반으로 isBot 값을 확인하고, 봇과 일반 사용자의 요청을 구분하여 처리할 수 있습니다.

기본 구현

import { NextResponse, userAgent } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const { isBot } = userAgent(request);

  if (isBot) {
    // 봇의 경우 SSR 페이지로 리다이렉트
    return NextResponse.rewrite(new URL('/ssr-page', request.url));
  }

  // 일반 사용자는 CSR 페이지로 리다이렉트
  return NextResponse.rewrite(new URL('/csr-page', request.url));
}

이 코드는 isBot 값을 활용해 봇은 SSR 페이지로, 일반 사용자는 CSR 페이지로 보냅니다.

2. 트러블슈팅: 네이버 크롤러 감지 문제

isBot은 많은 크롤러를 감지할 수 있지만, 일부 크롤러(예: 네이버 봇)는 기본적으로 감지하지 못할 수 있습니다. 이 문제를 해결하기 위해 사용자 정의 로직을 추가하여 봇 패턴을 직접 정의했습니다.

사용자 정의 로직 추가

export function middleware(request: NextRequest) {
  const { isBot, ua } = userAgent(request);

  // 사용자 정의 봇 패턴
  const botPatterns = ['yeti', 'naverbot'];
  const botRegex = new RegExp(botPatterns.join('|'), 'i');

  const customIsBot = isBot || botRegex.test(ua);

  if (customIsBot) {
    return NextResponse.rewrite(new URL('/ssr-page', request.url));
  }

  return NextResponse.rewrite(new URL('/csr-page', request.url));
}

이 코드는 isBot 기본 로직에 추가로 yeti와 naverbot 패턴을 포함하여 네이버 크롤러를 정확히 감지합니다.

3. Next.js 기본 isBot 구현 확인

Next.js 문서에는 isBot에 포함된 크롤러 목록이 명시되어 있지 않지만, GitHub 소스 코드에서 확인할 수 있습니다. 기본적으로 감지되는 크롤러는 아래와 같습니다:

const BOT_UA_RE =
  /Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i;

export function isBot(userAgent: string): boolean {
  return BOT_UA_RE.test(userAgent);
}

위 목록에 없는 크롤러(예: 네이버 크롤러)는 직접 추가해야 합니다.

4. isBot 라이브러리를 활용한 대안

isBot 라이브러리를 사용하면 크롤러 감지 로직을 더 간편하게 구현할 수 있습니다. 이 라이브러리는 많은 봇 패턴을 기본적으로 지원하며, 추가적인 사용자 정의 패턴도 쉽게 추가할 수 있습니다.

isBot 라이브러리 설치 및 사용

npm install isbot
import isBot from 'isbot';

export function middleware(request: NextRequest) {
  const ua = request.headers.get('user-agent') || '';

  if (isBot(ua)) {
    return NextResponse.rewrite(new URL('/ssr-page', request.url));
  }

  return NextResponse.rewrite(new URL('/csr-page', request.url));
}

이 방법은 기본 제공되는 isBot보다 더 넓은 범위의 봇을 감지할 수 있는 장점이 있습니다.

5. 페이지 단위에서의 봇 감지

미들웨어가 아닌 페이지 내에서 봇 감지를 수행해야 하는 경우도 있습니다. 이를 위해 Next.js의 headers와 userAgent를 활용하여 페이지에서 직접 로직을 처리할 수 있습니다.

서버 액션 함수로 구현

'use server';
import { headers } from 'next/headers';
import { userAgent } from 'next/server';

export function detectBotWithNext() {
  const requestHeaders = headers();
  const { isBot, ua } = userAgent({ headers: requestHeaders });

  const botPatterns = ['yeti', 'naverbot'];
  const botRegex = new RegExp(botPatterns.join('|'), 'i');

  return isBot || botRegex.test(ua);
}

서버 액션 호출 예제

import { detectBotWithNext } from '@/util/bot';

export async function generateMetadata() {
  const isBot = detectBotWithNext();

  if (isBot) {
    return {
      title: 'Bot Detected Page',
      description: 'This page is optimized for bots.',
    };
  }

  return {
    title: 'User Page',
    description: 'This page is optimized for users.',
  };
}

이 코드는 서버 액션에서 isBot 여부를 확인하여 메타데이터를 조건적으로 반환합니다.

6. 왜 이런 작업을 했는가? 그리고 최적화의 이점

1. 문제 정의

현대의 웹 애플리케이션은 다양한 사용자와 요청 환경을 고려해야 합니다. 그 중에서도 **검색 크롤러(Search Engine Bots)**와 일반 사용자의 요구사항은 크게 다릅니다.

  • 일반 사용자는 빠른 인터랙션과 로드 시간을 요구합니다. 따라서 **CSR(Client-Side Rendering)**을 통해 초기 로딩 속도를 최소화하고, 페이지 전환 시 부드러운 사용자 경험을 제공합니다.
  • 검색 크롤러는 SEO(Search Engine Optimization) 목적으로 페이지의 정적인 콘텐츠를 요구합니다. **SSR(Server-Side Rendering)**을 활용하면 크롤러가 더 쉽게 페이지의 콘텐츠를 분석할 수 있어 검색 노출에 유리합니다.

2. 최적화 작업의 필요성

검색 크롤러와 일반 사용자의 구분

검색 크롤러와 일반 사용자를 구분하지 않으면, 다음과 같은 문제가 발생할 수 있습니다:

  • SEO 저하: 크롤러가 JavaScript로 렌더링된 CSR 페이지를 제대로 처리하지 못하면 검색 엔진에 노출되지 않거나, 부정확하게 노출될 위험이 있습니다.
  • 서버 리소스 낭비: 모든 요청에 SSR을 적용하면 일반 사용자에게 불필요하게 많은 서버 리소스를 소비하게 됩니다. 특히 트래픽이 많은 서비스에서는 서버 과부하가 발생할 수 있습니다.

3. 구현한 최적화의 이점

1) 서버 성능 최적화

  • 일반 사용자 요청은 CSR로 처리하여 서버의 부담을 줄입니다.
    • CSR 방식은 서버가 데이터를 전달한 후 클라이언트 측에서 렌더링을 수행하기 때문에, 서버 리소스 사용량이 감소합니다.
  • 검색 크롤러 요청은 SSR로 처리하여 크롤러에게 정적 HTML을 제공하면서 서버 리소스를 효율적으로 활용합니다.
    • SSR은 크롤러가 페이지를 정확히 인덱싱할 수 있도록 정적 콘텐츠를 반환합니다.

2) 트래픽 대응력 향상

  • 트래픽이 폭증하는 상황에서도 서버 성능을 유지할 수 있습니다.
    • 일반 사용자 요청은 CSR로 처리하여 서버의 부하를 줄이고, 크롤러 요청만 SSR로 처리하여 필요한 리소스를 최적화합니다.

3) SEO 성능 강화

  • 검색 크롤러에게 완전히 렌더링된 콘텐츠를 제공함으로써 크롤러가 페이지 콘텐츠를 정확히 분석하고 인덱싱할 수 있도록 돕습니다.
  • 이는 **검색 엔진 결과 페이지(SERP)**에서 높은 순위를 확보하고, 서비스의 유입 트래픽을 증가시키는 데 기여합니다.

4) 유연한 크롤러 감지

  • Next.js의 isBot 기능과 사용자 정의 로직을 활용해 다양한 봇 요청을 정확히 감지하고 대응할 수 있습니다.
  • 네이버 크롤러와 같은 감지되지 않는 봇을 추가적으로 처리함으로써 **국내 검색 엔진 최적화(SEO)**에도 효과적입니다.

결론

Next.js 14의 기본 isBot 기능은 간단하고 강력한 도구입니다. 그러나 네이버 크롤러와 같은 일부 봇을 감지하지 못할 경우 사용자 정의 패턴을 추가하거나 isBot 라이브러리를 사용하는 방법도 고려할 수 있습니다. 또한, 페이지별로 로직을 처리해야 할 때는 서버 액션을 활용하여 보다 유연한 구현이 가능합니다.

JP
이중표Frontend Engineer

3년차 프론트엔드 개발자. Next.js, React, TypeScript 기반 웹 애플리케이션 개발 전문. 대규모 트래픽 환경에서 SSR·ISR 렌더링 전략 설계 경험.

이력서 보기→