custom document component
_document.tsx로 작성된다.
// 필수 컴포넌트들
class CustomDocument extends Document{
render(): JSX.Element {
return (
<Html lang='ko'>
<Head>
<body>
// Main에서 App 컴포넌트를 렌더링 해준다.
<Main />
<NextScript />
</body>
</Head>
</Html>
)
}
}
export default CustomComponent;_app과 _documnent의 차이 _app는 유저가 페이지를 불러올 때마다 브라우저에서 실행된다. _document는 서버에서 한 번만 실행된다.
폰트 최적화 하기
구글 폰트에서 제공하는 폰트를 사용해서 최적화가 가능하다. Next.js가 구글 폰트에서 제공하는 폰트를 기반으로 하기 때문이다.
Next.js가 빌드될 때, 폰트를 다운받는다. 그래서 웹을 사용하는 유저는 별도로 폰트를 다운로드 받지 않기 때문에 로딩시간을 단축 할 수 있다.
script component
구글 에널리틱스, 또는 카카오 SDK 등, 다른 웹과 커뮤니케이션을 해야하는 경우가 있다. 이때 프로젝트 내에서 script를 통해 진행하는데, Next.js에서는 이러한 script도 최적화를 시켜준다.
strategy는 3가지가 있다. beforeInteractive, afterInterative, lazyOnLoad
-
beforeInteractive: 페이지를 다 불러와서 상호작용 하기 전에 스크립트를 불러오는 전략. 유저가 페이지와 상호작용하기 전에 꼭 스크립트를 불러와야 한다면 사용. 하지만 대부분의 스크립트는 페이지를 불러오기 전에 불러올 필요가 없을 것.
예를 들어, 채널톡과 같은 챗봇 서비스가 있다면 그건 페이지를 다 불러오고 나서 불러와도 상관 없을 것 이다. -
afterInterative: 기본 전략이다. 앱 전체를 모두 불러오고 나서 다른 스크립트를 불러오는 전략이다. -
lazyOnLoad: 스크립트를 불러오긴 하는데, 스크립트를 불러오는게 최우선이 아니다. 모든 데이터나 소스를 모두 불러오고 나서야 스크립트를 실행하겠다는 전략이다.
<Script strategy='afterInterative' onLoad={()=>{
// 실행할 코드
}} />