📱 왜 두개나 있는 걸까
Next.js로 개발을 하다보면, 초기 설정을 할 때 각 페이지에 위치시킬 수 있는 특별한 컴포넌트 "next/head"와 _document 파일에 위치하고 있는
"next/document" 의 Document 컴포넌트가 따로 존재한다는 사실을 알 수 있다.
나는 매번 이 두 태그가 혼란스러웠고, 이런 것은 나만이 아니었는지 다른 사람들도 역시 동일한 질문을 stack overflow에 입력하는 경우가 많았다.
공식문서상의 결론을 따르면 아래와 같다
- "next/document" 의 Head = 앱 전체에 공용으로 사용될 내용을 헤드 태그들을 사용한다.
- "next/head" 의 Head = 페이지별로 독자적으로 사용할 헤드 태그들을 사용한다.
이렇게만 설명하자면 무슨 소리인지 더 이해하기 어려울 수 있으므로 미래의 바보같은 나(또 까먹을) 을 위해서 정리한다
📱 next/document의
위에서도 말했듯이, 앱전체에 사용할 공용 헤드태그를 해당 장소에 사용하면 된다고 하였다.
메타 태그는 페이지의 검색엔진에 노출도를 늘려주는 중요한 역할을 하므로, 다음 주제는 메타태그를 깊게 파볼 생각이다.
예시로 추가한 메타태그를 살펴보자면, meta 태그를 이용하여 기본적으로 device의 width를 따르며, initial scale을 1로 한다는 옵션을 주고 있다.
해당 옵션은 사실 next.js에서 기본설정으로 해주고 있기 때문에 굳이 추가할 필요는 없지만, 해당 태그를 _document의 Head 내부에서 사용한다면 모든 next.js 페이지의 헤더에는 해당 태그가 무조건 삽입된다.
meta 태그 이외에도, 예를들어 페이지 내에서 바로 적용되야 하는 웹폰트와 같은 역시 마찬가지로 모든 앱 페이지에 해당 폰트가 적용되야 한다면 추가하면 된다.
여기서 핵심 포인트는, "공용으로 사용될" 요청들만 document의 로 삽입하면 된다는 것이다.
반대로 말하자면 공용으로 사용할 필요가 없는 요청은 굳이 document에서 다 할 필요가 없이 페이지별로 구분해서 해도 된다는 의미이며,
이것이 바로 next.js가 가지는 강점중 하나이다. next.js는 코드 스플리팅을 통해 심지어 html의 세부 요소라 하더라도 굳이 필요하지 않은, 접근하지 않은 페이지에 대해서는 요청 자체를 하지 않도록 하여 서버의 부담을 더는 구조로 되어있다.
📱 next/head의
next/head에서export default로 제공하는 컴포넌트 는 동적으로 헤드태그들을 설정할 수 있도록 도와준다.
대표적으로 title 태그가 있을 것이다. 예를들어, 어떤 페이지에 접근했을 때 다른 타이틀을 보여줘야 할 경우 이것을 React로 하기에는... 일단 내가 알고 있는 지식으로는 모르겠다. (방법이 없을리는 없을텐데...)
하지만 nextjs에서는 그냥 아주 단순하게 next/head의 컴포넌트 내부에 작성하면 알아서 동적으로 헤드 태그들을 교체해서 보여준다.
예를들어
위와 같이 index 페이지의 title을 해당내용처럼 설정할 경우,
아래와 같이 title 태그가 헤드 태그에 포함된 것을 볼 수 있다. 이것은 오로지 index 페이지에 귀속된 것으로서, 어떤 다른 페이지에서도 해당 타이틀을 사용하지 않는다.
testpage를 만들어서 확인해보자면
해당 테스트 페이지에 접속시 테스트페이지에 설정해뒀던 title 태그는 적용되었지만, index에 설정해뒀던 title 태그는 적용되지 않은 것을 볼 수 있다.
이처럼, 만약 페이지별로 다른 메타태그들이나, stylesheet요청과 같은 분기점을 나눠야 할 경우에는 next/head를 사용하면 되는 것이다.
결론을 말하자면, next.js는 불필요한 요청을 최소화하고 효율적으로 자원을 전달하도록 만들어진 좋은 개발도구이다.
