[Next.js] Script 컴포넌트는 서버 환경에서 동작할까? (Feat. 서버 사이드 렌더링)

Jaehyun Ahn·2025년 3월 20일

Intro

최근 회사에서 내가 맡은 업무 중 하나는 Next.js 프로젝트에 Presentation & Container 디자인 패턴을 적용해 UI와 로직을 나누고, Storybook + Chromatic 조합으로 시각적 회귀 테스트를 진행하는 것이었다.

최근 프로젝트에 단위 테스트를 도입하면서 코드 리팩토링까지 겸하여 진행 중인데, 이 과정에서 예기치 못한 UI 변동을 방지 하기 위해 시각적 회귀 테스트를 도입하게 되었다.

시각적 회귀 테스트란?
코드 변경 전/후의 스크린샷을 비교해 차이를 감지하고 예기치 못한 오류를 확인하여 UI의 시각적 일관성을 제공할 수 있도록 하는 테스트이다. 참고

진행 도중, 사수분께서 나에게 한 가지 요청을 하였다.

Next.js의 Script 컴포넌트가 서버 사이드에서 작동이 안되는지 확인 해줄래요?

나도 모르는 내용이었기에, 검증을 위한 테스트 코드를 작성하며 클라이언트 환경과 서버 환경을 확인하는 작업이 필요했다.

테스트 해보자🔥

Script 컴포넌트가 뭔데?

검증하기 전, Script 컴포넌트가 어떤 역할을 하는 컴포넌트인지 알 필요가 있었다.

Script 컴포넌트란 HTML의 script 태그를 최적화 해주는 컴포넌트다. 보통 script 태그는 GA를 연동하거나, 다른 웹사이트 or 기능과 상호작용이 필요할 때 사용하게 된다.
스크립트를 언제 어떻게 불러올 지 정하려면 일반 script 태그를 사용하는 것이 아닌 Next.js에서 제공하는 Script 컴포넌트를 사용하는 것이 좋다.

Script 컴포넌트는 strategy 속성을 사용할 수 있는데 속성 값은 아래 4가지를 사용할 수 있다.

beforeInteractive : 페이지를 다 불러와서 상호작용 하기 전에 스크립트를 불러오는 것
afterInteractive (기본값) : 페이지를 다 불러온 다음 스크립트를 불러오는 것.
lazyOnload : 스크립트를 다른 모든 데이터나 소스들을 불러오고 나서 불러오는 전략
worker : 실험적 속성 값으로, 아직 정식으로 사용되진 않는다.

서버 환경에서 렌더링 준비를 마친 HTML과 JS 파일을 클라이언트에 보낸 뒤, 클라이언트 환경에서 HTML과 JS 코드를 매칭시키는 과정인 Hydrate(하이트레이트) 순서와 연관지어 사용할 수 있는 속성이라고 볼 수 있다.

테스트 진행 결과는..

테스트 코드는 아래와 같이 작성했다.

// app/page.tsx
import Script from 'next/script';

export default function Page() {
  console.log('app/page.tsx 렌더링 중...');

  return (
    <div>
      <h1>Script 컴포넌트 테스트</h1>
      <Script src="/test-script.js" />
    </div>
  );
}

// public/test-script.js
console.log('🔥 script 실행됨');