[Next.js] 사용자가 입력한 링크의 썸네일 가져오기

목차

1. 상황

2. og 활용하기

3. 더 좋게 만들기

---

1. 상황

기존 제작해둔 BookmarkCard 컴포넌트

카드 컴포넌트는 사용자가 북마크한 링크의 url로부터 썸네일을 가져와 같이 보여주는 역할을 가진다.

그런데 기존 코드에서는 일단 임의로 이미지 URL을 직빵으로 넣어서 이걸 url로부터 가져오도록 바꿔주어야 하는 상황이다.

지금은 그냥 단순하게 props로 imageUrl을 받아서 public에 있는 기본 이미지 globe.svg를 바로 넣고 있다.

 

 

---

2. cheerio와 og 사용하기

1. API Route의 GET 핸들러 함수 정의

// src/app/api.og-thumbnail/route.ts
import * as cheerio from 'cheerio';
import { NextResponse } from 'next/server';

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const targetUrl = searchParams.get('url');

  if (!targetUrl) {
    return NextResponse.json({ error: 'url is required' }, { status: 400 });
  }

  try {
    const html = await fetch(targetUrl).then(res => res.text());
    const $ = cheerio.load(html);

    const ogImage =
      $('meta[property="og:image"]').attr('content') ||
      $('meta[name="twitter:image"]').attr('content');

    return NextResponse.json({ image: ogImage || null });
  } catch (e) {
    return NextResponse.json({ image: null });
  }
}

외부 이미지를 가져오기 위해서 작성한 파일이다. 하나하나 살펴보자.

 

import * as cheerio from 'cheerio';
import { NextResponse } from 'next/server';

• cheerio: Next 서버(Node.js)에서 HTML을 파싱하기 위해 사용하는 npm 라이브러리로,
  HTML DOM을 jQuery처럼 탐색하고 조작할 수 있다. (OG 태그 추출용)
• NextResponse: Next.js App Router에서 API Router의 응답을 쉽게 반환하기 위해 사용한다.

 

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const targetUrl = searchParams.get('url');

• Next.js의 App Router에서는 app/api/폴더명/route.ts 내부에 위와 같은 형식으로 작성하면 api/폴더로 들어오는 GET 요청을 자동으로 이 함수가 처리하게 된다.
• 클라이언트 요청을 처리하는 서버측 엔드포인트를 정의한다. api/og-thumbnail같은 URL에 GET/POST 요청을 보내면 서버에서 이 함수가 실행되어 데이터를 반환한다.
• Node.js의 내장 객체 URL(생성자)을 사용해서 요청으로 받은 req에서 url을 받아오고, 해당 url에서 쿼리 파라미터(url)의 값을 받아온다.
  ex) /api/og-thumbnail?url='https://naver.com  →  targetUrl = 'https://naver.com'
  과 같이 req로 받은 url에서 url 쿼리 파라미터에 해당하는 값을 뽑아낸다.

 

if (!targetUrl) {
    return NextResponse.json({ error: 'url is required' }, { status: 400 });
  }

 

만약 서버에서 fetch할 URL이 없으면 400 Bad Request를 반환하여 처리를 중단한다.

 

 

try {
    const html = await fetch(targetUrl).then(res => res.text());
    const $ = cheerio.load(html);

    const ogImage =
      $('meta[property="og:image"]').attr('content') ||
      $('meta[name="twitter:image"]').attr('content');

    return NextResponse.json({ image: ogImage || null });
  } catch (e) {
    return NextResponse.json({ image: null });
  }

클라이언트에서는 CORS 문제로 외부 HTML을 fetch할 수 없기 때문에 next 서버에서 프록시 역할을 수행한다.

HTML문서(res) 전체를 문자열로 가져와, cheerio로 파싱한다.

OG 태그, twitter 태그를 먼저 탐색하고, 발견되지 않으면 null을 반환한다.

예외 상황 발생했을 때 역시 null을 안전하게 반환한다.

** 프록시 : 클라이언트와 외부 서버 사이에서 중계 역할을 하는 서버

 

2. useThumbnail 커스텀 훅 정의

string 타입의 link를 props로 받아서 썸네일을 로드하는 훅, useThumbnail을 정의한다.

'use client';

import { useEffect, useState } from 'react';

const thumbnailCache = new Map<string, string | null>();
const defaultImage = '/file.svg';

interface ThumbnailState {
  thumbnail: string | null;
  loading: boolean;
  error: boolean;
}

export function useThumbnail(link: string) {
  const [state, setState] = useState<ThumbnailState>({
    thumbnail: null,
    loading: true,
    error: false,
  });

•  thumbnailCache: 최적화를 위해 썸네일 캐시를 저장할 thumbnailCache를 정의했다.
• defaultImage: 썸네일을 불러오지 못했을 때 띄울 기본 이미지이다. 아직 제작이 안되어서 임의로 next 기본 이미지를 넣었다.
• useState: 클라이언트가 API 호출을 통해 비동기적으로 이미지를 가져오기 때문에 useState로 썸네일 상태를 관리해주고, loading과 error 상태도 같이 관리해준다.
  코드를 작성하다보니 thumbnail, loading, error를 한꺼번에 관리하는 경우가 많아 state로 묶어서 정의했다.

 

useEffect(() => {
    if (!/^https?:\/\//i.test(link)) {
      setState({ thumbnail: defaultImage, loading: false, error: false });
      return;
    }

    // check cache
    if (thumbnailCache.has(link)) {
      setState({
        thumbnail: thumbnailCache.get(link) || defaultImage,
        loading: false,
        error: false,
      });
      return;
    }

    let isMounted = true;

• if문: 링크가 유효하지 않을 경우, defaultImage를 리턴한다.
• check cache: 링크가 유효할 경우, 가장 먼저 캐시 존재 여부를 체크하여 있을 경우, 해당 캐시 데이터를 리턴한다.
• isMounted: 컴포넌트가 언마운트된 후에도 setState 호출을 방지하기 위한 플래그로,
  비동기 fetch가 늦게 끝나더라도 이미 언마운트된 컴포넌트의 상태를 업데이트하지 않도록 한다.

 

async function load() {
      setState(prev => ({ ...prev, loading: true, error: false }));
      try {
        const res = await fetch(`/api/og-thumbnail?url=${encodeURIComponent(link)}`);
        if (!res.ok) throw new Error('Failed to fetch thumbnail');

        const data = await res.json();
        const imageUrl = data.image || defaultImage;

        // save to cache
        thumbnailCache.set(link, imageUrl);

        if (isMounted) {
          setState({ thumbnail: imageUrl, loading: false, error: false });
        }
      } catch {
        if (isMounted) {
          setState({ thumbnail: defaultImage, loading: false, error: true });
        }
      }
    }

다음으로는 이전 단계에서 og-thumbnail에서 정의한 GET함수를 사용하여 썸네일을 로드한다.

• encodeURIComponent: URL 쿼리 파라미터에 안전하게 넣기 위해 특수문자를 인코딩하는 함수이다.

1. res: 서버 API(/api/og-thumbnail) 호출
2. data: 응답 상태 확인 및 JSON 파싱
3. imageURL: OG 이미지 URL 추출
4. 성공 시, 캐시 저장 및 실패시 fallback 이미지 설정

    load();

    return () => {
      isMounted = false;
    };
  }, [link]);

  return state;
}

load() 함수를 호출하고, isMounted를 리턴한다.

훅에서 최종 리턴하는 것은 가장 처음 정의했던 state(thumbnail, loading, error)가 된다.

 

3. next.config.ts 세팅 및 훅 활용

next.js는 이미지 최적화를 위해서 외부에서 이미지를 가져올 경우, 개발자가 미리 말해둔 링크의 이미지만 가져올 수 있도록 한다.

우리 서비스에서 어떤 링크를 사용자가 북마크할 지 모르므로, 하나하나 추가하기에는 너무 많은 것 같아서 우선 http, https로 시작하는 링크를 가능하도록 세팅해준다.

// next.config.ts

images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: '**',
      },
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },

 

 

훅 활용

const thumbnail = useThumbnail(link); // url에서 썸네일 뽑는 훅

이렇게 thumbnail을 훅을 사용해서 정의하고, 이미지 링크를 넣어야 하는 곳에 넣어주면 된다.

 

 

---

3. 더 좋게 만들기

1. 캐시 시점 변경 useThumbnail → route.ts

생각해보니까 이미지를 받아오는 부분은 route.ts인데, 캐시 저장을 할 거면 훅이 아니라 라우트 부분에서 하는 게 맞다고 느꼈다.

그래서 useThumbnail에서 캐시하는 부분을 지우고 route.ts에 캐시를 추가했다.

 

const cache = new Map<string, { image: string | null; expires: number }>();
const CACHE_TTL = 1000 * 60 * 60 * 24 * 14; // 14일

코드 가장 윗부분에 이렇게 캐시를 정의해줬다.

북마크한 블로그 글은 이미지가 거의 바뀌지 않을 것이므로 14일로 설정했는데 더 길게 해도 괜찮을 것 같긴하다.

이건 더 알아보고 작성해봐야겠다.

 

const cached = cache.get(targetUrl);
  const now = Date.now();
  if (cached && cached.expires > now) {
    return NextResponse.json(
      { image: cached.image },
      {
        headers: {
          'Cache-Control': 'public, max-age=1209600', // 14일
        },
      }
    );
  }

url이 유효한지 확인한 직후에 캐시를 확인하는 코드를 작성했다.

 

// 캐시 저장
    cache.set(targetUrl, { image: ogImage, expires: now + CACHE_TTL });

    return NextResponse.json(
      { image: ogImage },
      {
        headers: {
          'Cache-Control': 'public, max-age=1209600', // 브라우저/프록시 캐시
        },
      }
    );

try문 내에서도 역시 image를 새로 가져왔을 경우, 캐시에 저장하는 코드를 작성했다.

 

 

2. 메타태그가 설정이 잘 안되어있는 경우

현재 작성한 GET을 보면 og와 twitter에서 이미지를 얻어오도록하고 있는데,메타태그에 이미지가 세팅이 안되어있는 경우도 있을 수 있을 것이다.그럴 땐 간단하게 해당 페이지의 첫 번째 <img> 태그를 가져오도록 할 수도 있을 것이다.

하지만 이렇게 할 경우 단점이 잇다.

• 이미지 크기 예측 불가
  OG 이미지는 최적화된 크기이나, img는 최적화가 된 이미지임을 확신할 수 없어 네트워크 부담이 갈 수 있다.
• 잘못된 이미지 선택 가능
  첫 번째 img가 로고, 광고 배너 등이 될 수도 있는데, 이는 UX 측면에서 부적절 할 수 있다. (이상한 광고 이미지 가져오면 어떡해!)
• 서버 측 처리 시간 증가
  OG 이미지는 meta 태그만 읽으면 되지만, 첫 번째 img를 불러오려면 HTML 전체를 파싱해야하며, 필요시 URL 보정까지 해야한다.

단점이 치명적인 것 같아서 메타태그에 이미지가 없다면 기본 이미지를 띄우기로 했다.

아마 AI가 더 크게 발전하면 AI 생성형 이미지를 띄워도 좋을 것 같다.

 

3. image 허용 url의 보안과 성능

다양한 북마크를 지원하기 위해서 next.config.ts에서 hostname: '**'로 인터넷 상의 모든 images를 가져올 수 있도록 허용하였다.

하지만 보안과 성능 측면에서 걱정되는 부분이 있었다.

• 보안
  외부 URL을 그대로 로드 → 악성 이미지, XSS, SSRF 공격 가능
  공격자가 임의로 서버 요청을 유도할 수 있음
• 성능
  Next.js Image 최적화 과정에서 모든 이미지에 대해 resizing, WebP 변환 등의 서버 처리를 시도하여, 도메인이 많으면 CDN 캐싱이 어려워지고 첫 로드 속도가 느려질 수 있음

프론트에서 이 문제를 해결하기 위해서는 단순하게 생각하면 세 가지의 해결책이 있다.

• 커스텀 로더(Custom loader)를 사용하여 <img>처럼 출력 (Next.js의 최적화 포기)
• 신뢰된 도메인만 화이트리스트 처리 (모든 링크를 리스트에 추가하는 것이 현실적으로 불가능함 + 50개 제한 있음)
• 프록시 서버를 사용하여 이미지 캐싱 후 클라이언트에 제공 (서버 부담이 커짐)

 

이 부분 해결하려고 이것저것 해봤는데 동기들이랑 얘기하니까 결국 서버에서 처리하는 게 맞는 것 같다는 결론이 나왔다..^_^..

원래 다들 몰랐어서 현재 서버에서 이미지 저장을 생각을 안하고 있었는데 그래도 다행히 이른 시점에 이미지 저장을 구현해야한다는 얘기가 나와서 다행이다.

 

프론트에서 이미지를 서버로 보내주면 서버에서 크롤링을 통해 최적화된 이미지를 저장하고, 프론트로 보내주는 방식이다.

 

 

 

 

 

참고

참고자료링크