[Next.js] 엣지 런타임(Edge runtime)이란

Edge Computing 이란 무엇인가?

  • Edge Computing 은 데이터를 생성하는 지점(디바이스 또는 센서)과 데이터를 처리하고 분석하는 중앙 서버 또는 클라우드 사이의 거리를 줄이는 컴퓨팅 모델을 의미
  • 기본적으로 데이터 처리를 디바이스 자체 또는 가까운 로컬 데이터 센터와 같은 Edge 에 위치한 컴퓨팅 리소스에서 수행하게 함으로써 네트워크 대역폭을 절약하고 응답 시간을 줄이는 것을 목표로 한다

Edge Computing 의 장단점

장점

  • 낮은 대기 시간과 높은 응답 속도: 데이터 처리가 로컬에서 이루어지므로 네트워크 지연이 최소화되어 빠른 응답 속도를 제공한다
  • 대역폭 절약: 데이터를 중앙 집중식 서버 또는 클라우드로 전송하는 대신, 불필요한 네트워크 트래픽을 줄이고 대역폭을 절약할 수 있다
  • 개인 정보 보호: 민감한 데이터를 로컬에서 처리하므로 개인 정보 보호와 데이터 보안 측면에서 더욱 안전하다

단점

  • 자원 제한: Edge 장치는 종종 제한된 컴퓨팅 리소스를 가지고 있으며, 따라서 대규모 및 복잡한 작업을 처리하는 데 제한이 있을 수 있다
  • 관리와 유지보수의 어려움: 분산된 환경에서 여러 Edge 디바이스를 관리하는 것은 복잡할 수 있다
  • 보안 위협: 로컬 처리는 중앙 집중식 처리보다 보안 위험이 증가할 수 있다

Next.js Edge Runtime

  • Next.js 에서, 런타임은 코드 실행 중에 사용 가능한 라이브러리, API 및 일반적인 기능 집합을 의미
  • 서버에서는 애플리케이션 코드 일부를 렌더링할 수 있는 두 가지 런타임이 존재한다
  • Node.js 런타임(default): 모든 Node.js API 및 호환 가능한 패키지에 액세스할 수 있다.
  • Edge 런타임: Web API를 기반으로 한다.

Edge Runtime

  • Edge 런타임은 Node.js API 하위 집합으로, 사용 가능한 API가 한정 되어있다
  • 대기 시간에서 동적이고 개인화된 콘텐츠를 제공해야 하는 경우 이상적이다
  • 하지만, 리소스를 최소한으로 사용하기 때문에 여러 시나리오에서 제약이 될 수 있다
  • Vercel의 Edge 런타임에서 실행된 코드는 1MB에서 4MB 사이를 초과할 수 없다
  • 모든 Node.js API를 지원하지 않으므로 일부 npm 패키지가 작동하지 않을 수 있다
    • Edge 런타임 에 적합하게 설계된 라이브러리 사용
    • e.g. 레디스 라이브러리 : redis (X) ioredis (O)
  • 만약 리소스를 필요로 하는 API 또는 라이브러리 사용 시 Node.js 런타임을 사용하는 것이 좋다

Middleware

  • Edge 런타임에서 작동
  • 요청이 완료되기 전에 응답을 조작하는 것이 가능
  • 응답을 수정, 리다이렉트하거나 요청 또는 응답 헤더를 수정하거나 직접 응답하는 등의 작업을 수행할 수 있다
  • 프로젝트의 root 디렉터리에 middleware.ts 파일로 생성한다

오류 발생 예시 - /admin 및 그 하위 url의 경우 유저의 권한이 관리자일 경우만 접근 가능하도록 처리하고자 하였다 - next-auth 의 auth 함수를 사용하여 유저의 세션을 가져와 권한을 확인하는 코드로 개발 진행

// middleware.ts

import { NextResponse, NextRequest } from 'next/server'
import { auth } from './auth';

export async function middleware(request: NextRequest) {
  const session = await auth();
  const isAuthorized = session?.user.roleCode === 'ADMIN';

  // If the user is authenticated, continue as normal
  if (!isAuthorized) {
    const loginUrl = new URL('/error', request.url)
    loginUrl.searchParams.set('code', '403')
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/admin/:path*'],
}
  • 해당 미들웨어가 실행되자 에러가 발생하였다
  • next-auth 의 auth 함수 호출 시 graphql로 서버에서 유저 정보를 가져오는 코드가 존재
  • graphql API 호출을 위한 클라이언트 생성시 캐싱을 위해 React.cache 가 사용되고 있는데 이 부분에서 오류가 발생하였다
  • @apollo/client 라이브러리가 Edge 런타임에는 적합하게 설계되지 않았기 때문
Error [TypeError]: React.cache is not a function

node_modules/@apollo/experimental-nextjs-app-support/dist/rsc/registerApolloClient.js
function registerApolloClient(makeClient) {
    const getClient = React.cache(makeClient);
    return {
        getClient,
    };
}

참고

links

social