_app.tsx와 _document.tsx의 차이

_document.js

(※ 공식문서)

1. 이 파일은 모든 문서에 공통적으로 적용될 내용을 작성한다.
   쉽게말하면, 전체적인 문서구조를 나타내는 것이다.
   반드시 작성해야하는건 아니고 head,body의 내용을 보강하기 위해 커스텀할 때 사용된다.

2. ssr만되서 클라이언트측의 처리 코드를 쓰면 안된다.
   따라서 이 파일에서 onClick같은 이벤트 핸들러 작동을 할 수 없다.

• 글로벌 head : 파비콘, meta태그, lang 설정은 _document에서 작성한다.
  ( → 왜냐면 검색엔진 최적화를 위해 meta정보들은 ssr으로 처리되는게 좋기 때문이다.)
• 글로벌 폰트

_app.js

(※ 공식문서)

1. 페이지 시작시 app파일이 먼저 읽히게 된다.
   쉽게말하면, 페이지의 공통 레이아웃 역할이다.
   페이지 레벨에서 공통으로 쓰는 것들은 여기서 설정한다.

2. ssr을 한 후, 서버에서 내려준 html파일을 클라이언트에서 렌더한 후 이벤트 핸들러를 바인딩 하게된다. (ssr한 후 -> csr을 한다는 말)

• head의 title은 _app에서 작성한다.
  ( → 왜냐면 title은 페이지마다 변동될 수 있으므로 페이지 레벨에서 사용되야 하기 때문이다. )
• global css
• 공통 레이아웃

https://talkwithcode.tistory.com/96
_document강의
_app강의