[Next.js] Next.js에서 Router Handler를 사용하는 이유는 무엇일까?

개요

Riot API 이용 프로젝트를 진행하면서 Next.js를 처음 사용하게 됐다.

과제 내용 중 하나에 `Router Handler`를 이용하는 부분이 있었다.

코드를 구현하긴 했지만, 왜 `Router Handler`가 필요한지에 대한 부분에서 의문이 생겼다.

아직 `Router Handler`가 무엇인지, 왜 사용하는지 명확하게 이해하지 못했다는 것을 깨달았다.

 

해당 글은 Next.js의 기본적인 개념을 안다는 전제하에 작성된 글이다.

 

 

내가 가진 의문

💻 api > rotation > route.ts

import { URL } from '@/constants/url';
import ChampionRotation from '@/types/ChampionRotation';

export async function GET() {
  const apiKey = process.env.NEXT_PUBLIC_RIOT_API_KEY;

  try {
    const response = await fetch(URL.CHAMPIONS_ROTATION_DATA, {
      headers: {
        'User-Agent':
          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36',
        'Accept-Language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
        'Accept-Charset': 'application/x-www-form-urlencoded; charset=UTF-8',
        Origin: 'https://developer.riotgames.com',
        'X-Riot-Token': apiKey,
      } as HeadersInit,
    });
    const { freeChampionIds }: ChampionRotation = await response.json();

    return Response.json({ freeChampionIds });
  } catch (error) {
    console.error(error);
  }
}

간단하게 페이지와 이용한 API에 대한 설명을 하자면,

rotation 페이지는 리그오브레전드에서 오늘 무료로 사용할 수 있는 챔피언을 보여주는 페이지이다.

해당 챔피언들을 보여주기 위해서는 Riot API에서 제공하는 무료 로테이션 챔피언의 아이디를 제공하는 API를 이용했다.

 

나는 무료 로테이션 챔피언 아이디를 가져오는 GET 요청을 `Router Handler`에서 작성하였다.

 

💻 fetchChampionsRotation 함수 코드

/**
 * 무료 플레이가 가능한 챔피언 아이디를 가져오는 함수
 * @returns freeChampionIds - 무료 챔피언 아이디 리스트
 */
// NEXT_SERVER_ROTATION = 'http://localhost:3000/api/rotation'

export const fetchChampionsRotation = async (): Promise<number[]> => {
  try {
    const response = await fetch(URL.NEXT_SERVER_ROTATION);
    const { freeChampionIds }: ChampionRotation = await response.json();

    return freeChampionIds;
  } catch (error) {
    console.error(error);
    return [];
  }
};

그리고 클라이언트에서 무료 로테이션 챔피언 아이디를 가져오는 fetch 함수 로직을 작성하였다.

 

2개의 코드에서 다른 점은 fetch 할 때 사용하는 url 밖에 없었다.

`Router Handler`가 정확히 무엇인지 이해하지 못한 나의 입장으로서는

'그낭 동일한 코드를 2번 쓰고 있는거 아닌가?'라는 생각이 들었다.

'동일한 코드를 2번 쓰고 있는데 왜 Router Handler를 사용해야되는 것일까?'라는 의문이 들게 됐다.

 

의문을 해결하기 위해 열심히 구글 검색을 해봤지만,

한글로 작성된 글 중에서는 나의 의문을 해결해줄 글을 찾지 못하였다.

 

그래서 영어로 검색해보았다.

왜 Route Hanlder를 만드나요?

영어로 검색해보니 나와 비슷한 초보 개발자가 왜 `Route Handler`를 만들어야 되는지 글을 작성하였다.

답변을 읽어본 결과,

클라이언트 컴포넌트에서 데이터를 불러올 때 사용하면 좋다는 의견도 있고, 데이터를 불러올 때는 굳이 사용할 필요없다는 의견도 있었다.

이걸로는 나의 의문을 해결할 수는 없었다. (영어를 잘 하지 못해서 제대로 해석한지도 잘 모르겠다.)

 

마지막 희망, Chat GPT에게 물어보았다.

답을 확인해 본 결과, 어느정도 납득이 가는 답변이었다.

 

 

Router Handler을 사용했을 때 이점은 무엇인가?

간단하게 정리하면 다음과 같다.

1️⃣ API key를 안전하게 보호할 수 있다.
2️⃣ API 응답을 가공할 수 있다.
3️⃣ 서버 측 캐싱과 성능 최적화가 가능하다.
4️⃣ API 호출 실패 시 에러 핸들링이 가능하다.

`Router Handler`를 통해 보완을 강화하고 효율적으로 데이터를 불러올 수 있다는 사실을 알게 되니, 왜 `Router Handler`을 이용하는지 납득이 됐다. 역시 아직 `Router Handler`가 무엇인지 정확히 이해하지 못해서 생긴 의문이 맞았다.

이점에 대해 하나씩 설명해보겠다.

 

1️⃣ API key를 안전하게 보호할 수 있다.

✅ `Router Handler`를 이용하면 API key를 서버에서만 사용하기 때문에 외부에 노출이 되지 않는다.

클라이언트에서 직접 Riot API를 호출하면 API key가 노출될 수 있다고 한다.

개발자 도구 -> 네트워크 탭에 API key가 적힌 url이 그대로 노출되기 때문에 누구든지 확인할 수 있다.

`Router Hander`를 이용하면 외부로 노출되지 않을 수 있게 막을 수 있다.

 

2️⃣ API 응답을 가공할 수 있다.

✅ `Router Handler`를 이용하면 API로 받은 데이터를 가공할 수 있디.

Riot API로 받은 데이터를 클라이언트에게 그대로 보내주는게 아니라 원하는 대로 가공해서 보내줄 수 있다.

 

위의 코드로 예를 들자면,

Riot API를 통해 받은 데이터 중에서 `freeChampionIds`밖에 사용하지 않는다.

서버에서 클라이언트로 보낼 때는 `freeChampionIds`만 받을 수 있도록 설정할 수 있다.

export async function GET() {
  const response = await fetch(URL.CHAMPIONS_ROTATION_DATA);
  const data = await response.json();

  return Response.json({ freeChampionIds: data.freeChampionIds });
}

 

3️⃣ 서버 측 캐싱과 성능 최적화가 가능하다.

✅ 서버에서 API를 한 번만 호출하고 해당 데이터를 캐싱한다.

클라이언트 컴포넌트에서는 데이터가 필요할 때마다 API를 여러 번 호출하게 된다.

그런데 `Router Handler`를 이용하면 데이터 캐싱이 가능해져, API를 한 번만 호출하고 해당 데이터가 필요할 때마다 캐싱된 데이터를 사용한다.

 

아래의 코드를 넣으면 `Router Handler`에서 캐싱을 이용할 수 있다.

// 캐싱 적용
export const dynamic = 'force-static';

 

4️⃣ API 호출 실패 시 에러 핸들링이 가능하다.

✅ 서버에서 API 호출에 대한 에러를 관리할 수 있다.

클라이언트에서 API 호출을 실패했을 때 에러가 발생할 것이다.

해당 에러를 클라이언트 측에서 관리하려고 하면 처리하는 과정이 복잡해진다.

Router handler를 이용하면 서버 측에서 API 호출 에러 관리를 손쉽게 할 수 있다.

export async function GET() {
  try {
    const response = await fetch(URL.CHAMPIONS_ROTATION_DATA);
    const data = await response.json();
    
    return Response.json(data);
  } catch (error) {
    console.error(error);
    return Response.json({ error: 'Failed to fetch champions' }, { status: 500 }); // 에러 관리
  }
}

 

결론 

`Router Handler`에 대해서 아직 잘 몰라서 생긴 의문이었던 것 같다.

API 호출을 할 때 클라이언트가 아니라 서버 측에서 하게 되면 얻을 수 있는 이점이 무엇인지 알게 되니

`Router Handler`를 사용하는 이유를 납득하게 됐다.

 

아직은 `Router Handler`의 기본적인 기능 밖에 사용하지 않았기 때문에 생겼던 의문어었던 것 같다.

앞으로 `Router Handler`를 자주 사용해보면서 이점을 직접 느껴봐야겠다.

 

---

[참고자료]

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

https://velog.io/@jay/Next.js-13-master-course-router-handler