[Next.js] _app.js와 _document.js의 차이

김현재·2022년 3월 11일

nextjs

공통점

페이지에 공통적으로 적용될 내용을 작성하는 공간

차이점

_app.js

서버 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트.
페이지에 적용할 공통 레이아웃의 역할을 한다

전역적으로 사용하는 공통 데이터 등을 다루는 곳이다

주요 사용 목적

page 이동 중 state를 유지하기 위해 (recoil state등을 여기서 셋팅한다)
global CSS 추가

_docment.js

_app.js 다음에 실행되며, 공통적으로 활용할 <head>(예 : 메타 태그) 나 <body>태그 안에 들어갈 내용들을 커스텀할 때 사용한다.
즉, 모든 문서에 공통적으로 적용될 내용을 넣는다.
만약 <title>이나 open graph등 페이지별로 다르게 적용되어야 하는 내용들은 각 페이지별로 처리해야 한다.

쉽게 정리하면, 공통적으로 적용할 HTML 마크업을 커스텀 하는 공간으로 볼 수 있다.

주요 사용 목적

폰트 import
charset, 웹 접근성 관련 태그 설정
bootstrap, material UI 등 글로벌 커스텀 스타일 ㅅ트 로드
글로벌 hea 관리

주의

Document는 서버에서만 렌더링되므로 onClick과 같은 이벤트 처리가 작동하지 않는다. 같은 이유로, 스타일링이나 application logic은 이곳에 기재하지 않는다. (Layout을 사용하는 것도 방법)
title같이 각 페이지별로 변경될 가능성이 높은 요소들은 가급적 document에서 관리하지 않는다
data를 전달하는 역할을 하지 않기 때문에, 뭔가를 저장하거나, 전달해야하는 로직은 이곳에 작성하지 않는다

정리

_app.js는 동적인 것중에 공통 적용할 사항들을 기재,
_document.js는 정적인 것중에 공통 적용할 사항들을 기재한다.

예시

facebook pixel 스크립트를 예시로 _app.js와 _document.js의 사용을 비교해보잣

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', <YOUR_PIXEL_ID>);
fbq('track', 'PageView');
</script>

스크립트의 경우 pixel에서 트래킹 용으로, 동적으로 사용되는 함수이기에 => _app.js에다가 저장한다

<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=<YOUR_PIXXEL_ID>&ev=PageView&noscript=1"
/></noscript>

위의 noscript의 경우, facebook이랑 연결용으로만 한번 사용되는 용도로 사용되기에, _document.js에다가 기재한다.
(가이드에서 head에 넣으라고 하는것 중 function이 아닌것들은 다 _document에다가 기재한다.
역으로, function인 것들은 가이드에서 head에 넣으라하던, body에 넣으라하던 다 _app.js에다가 기재한다)