#5. server-only

Server-only Code

첫 번째 서버 컴포넌트 패턴에서는 서버 전용 코드를 분리하는 방법에 대해 이야기해보겠습니다.

Next.js 애플리케이션을 구축할 때, 일부 코드는 서버에서만 실행되어야 합니다.

예를 들어, 여러 라이브러리를 사용하거나 환경 변수를 활용하고, 데이터베이스에 직접 접근하거나 기밀 정보를 처리하는 모듈이나 함수들이 이에 해당됩니다.

자바스크립트 모듈은 서버와 클라이언트 컴포넌트 모두에서 공유될 수 있기 때문에, 서버 전용 코드가 의도치 않게 클라이언트에 포함될 수 있습니다.

서버 코드가 클라이언트 측 자바스크립트에 포함되면 번들 크기가 커질 뿐만 아니라, 비밀 키, 데이터베이스 쿼리, 민감한 비즈니스 로직 등이 노출될 수 있습니다.

따라서 애플리케이션의 보안과 무결성을 지키기 위해 서버 전용 코드를 클라이언트 측 코드와 분리하는 것이 매우 중요합니다.

이를 위해 server-only라는 패키지를 사용하여 개발자가 서버 전용 모듈을 클라이언트 컴포넌트에 잘못 가져오는 경우 빌드 타임 오류를 발생시킬 수 있습니다.

그럼 이제 VS Code에서 예시를 통해 알아보겠습니다.

 

서버 및 클라이언트 컴포넌트 생성하기

먼저 app 폴더에 서버 및 클라이언트 컴포넌트를 만들어보겠습니다.

1. 서버 컴포넌트

server-route/page.tsx 파일을 만들고 간단한 React 컴포넌트를 정의합니다.

// app/server-route/page.tsx
import React from 'react';
import { serverSideFunction } from '../../src/utils/server-utils';

export default function ServerRoutePage() {
  const result = serverSideFunction();
  console.log('Server route rendered');
  return <p>{result}</p>;
}

1. 클라이언트 컴포넌트

동일한 app 폴더에 client-route/page.tsx 파일을 만들고 또 다른 React 컴포넌트를 삽입합니다.

// app/client-route/page.tsx
'use client';

import React from 'react';
import { serverSideFunction } from '../../src/utils/server-utils';

export default function ClientRoutePage() {
  const result = serverSideFunction();
  console.log('Client route rendered');
  return <p>{result}</p>;
}

클라이언트 컴포넌트의 최상단에는 use client 지시문을 추가합니다.

---

서버 유틸리티 함수 생성하기

다음으로 src 폴더에 utils라는 새 폴더를 만들고 server-utils.ts 파일을 추가합니다.

여기서 서버에서만 사용하기 위한 함수 하나를 정의해보겠습니다.

이 함수의 구현 세부사항보다는 서버 전용 코드의 개념에 집중할 것이므로 간단한 로그 문구와 문자열 반환만 추가하겠습니다.

// src/utils/server-utils.ts

export function serverSideFunction() {
  console.log('Server-only function executed');
  return 'Server-only result';
}

---

서버 및 클라이언트 컴포넌트에서 함수 활용하기

이제 서버 및 클라이언트 컴포넌트에서 이 함수를 가져와 호출해봅시다.

1. 서버 컴포넌트

server-route/page.tsx에서 const result = serverSideFunction()으로 결과를 받아오고, utils/server-utils에서 서버 측 함수를 가져옵니다.

// app/server-route/page.tsx
import React from 'react';
import { serverSideFunction } from '../../src/utils/server-utils';

export default function ServerRoutePage() {
  const result = serverSideFunction();
  console.log('Server route rendered');
  return <p>{result}</p>;
}

1. 클라이언트 컴포넌트

client-route/page.tsx에서 const result = serverSideFunction()으로 결과를 받아와 단락 태그에 바인딩합니다.

그리고 최상단에서 함수를 가져옵니다.

// app/client-route/page.tsx
'use client';

import React from 'react';
import { serverSideFunction } from '../../src/utils/server-utils';

export default function ClientRoutePage() {
  const result = serverSideFunction();
  console.log('Client route rendered');
  return <p>{result}</p>;
}

브라우저에서 localhost:3000/server-route로 이동하면 터미널에서만 로그 메시지가 보입니다.

왜냐하면 이 페이지 컴포넌트는 서버 컴포넌트이기 때문이죠.

클라이언트 컴포넌트인 localhost:3000/client-route에서는 콘솔에서 로그 메시지가 나타납니다.

---

server-only 패키지로 보안 강화하기

서버 전용 함수가 클라이언트 측 번들에 포함되면 번들 크기가 커지고, 보안 문제가 생길 수 있습니다.

이를 방지하기 위해 server-only 패키지를 사용해보겠습니다.

npm install server-only

이제 개발자가 이 모듈을 클라이언트 측 컴포넌트에 잘못 가져오면 빌드 프로세스가 실패하며 오류를 알립니다.

// src/utils/server-utils.ts
import 'server-only';

export function serverSideFunction() {
  console.log('Server-only function executed');
  return 'Server-only result';
}

---

결론

서버 전용 코드와 클라이언트 측 코드를 명확히 구분하는 것은 특히 민감한 데이터나 작업을 다룰 때 매우 중요합니다.

server-only 패키지를 사용하면 이러한 분리를 강제하여 애플리케이션의 보안, 성능 및 안정성을 유지할 수 있습니다.