이번에 기존 php regacy 홈페이지를 새로이 리뉴얼하면서 기존에 주로 사용하던 react.js를 이용하기 보다는 SEO(검색엔진최적화)에 초점을 두어 Next.js를 이용해 프로젝트를 진행하기로 했다.
물론 react.js 로도 seo가 가능하긴하지만 디테일하게 접근하기에는 무리가 있어보이고, 실질적으로 다양한 환경에서 SEO최적화를 해야하기에 react.js 로 하기에는 위험부담이 있다고 판단하여 보다 SEO관점에서 안정적이다 생각된 Next.js로 진행을 하기로 했다.
간단하게 말하자면 Next.js의 경우 SSR(Server side rendering)을 통해 react와 다르게 검색엔진에게 미리 server 에서 rendering된 정보를 제공해준다.
(자세하게 들어가면 쓸 글들이 많이지니... 이 글보다는 다른 글들을 참고해서 보는게 더욱 도움이 될것이다.)
Next.js에서 SEO 정보를 삽입하는 방법으로는 Head component에 관련 정보를 넣으면 된다.
여기서 고민해야할 점은 Head 정보를 넣을 수 있는 곳은 크게 _document.js, _app.js 그리고 각 page의 index 파일로 생각해볼 수 있다.
처음에는 각 파일에 생각없이 head 정보를 삽입했지만 여기서 의문이 생겼다
- 중복되는 정보들을 기입하면 어떻게 될까?
- 렌더링 우선순위는 어떻게 될까?
관련하여 말하자면 _document.js 에서 선언된 head 정보가 가장 먼저 서버에서 렌더링된다.
그 다음은 _app.js 그 뒤로 각각 page에서 선언된 head 정보가 렌더링 된다.
*Head 정보 렌더링 순위
_document.js > _app.js > index.js
따라서 만약 _document.js와 다른 component 의 head 에 title 정보가 둘다 있다면 렌더링 될때는 해당 페이지의 component head 의 title이 렌더링되어 보일것이다.
위의 특성을 이용하여 우리는 모든 페이지에 공통적으로 입력될 정보는 _document.js에 입력하고, 각각 독립된 정보는 해당 컴포넌트의 haed에다가 입력하면 코드중복을 피할 수 있을것이고,
또한, 의도적으로 중복된 정보를 입력하여 default 정보는 _document의 head 를 전달하지만, 특정 페이지만 다른 head 정보를 검색엔진에 전달 할 수 있다.
document.js
<Head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
<meta property="og:type" content="website" />
<title>첫번째로 렌더링되는 타이틀이야</title>
</Head>1. 별도의 Head title 정보가 없는 component
<div>
...
</div>
2. 별도의 head title 정보가 있는 component
<Head>
<title>내 타이틀이 보일걸?</title>
</Head>
위의 경우 1번 component의 title 은 document.js 에 기입된 title인 "첫번째로 렌더링되는 타이틀이야" 보일것이고, 2번의 경우는 "내 타이틀이 보일걸?" 타이틀을 보여준다
