SEO (검색엔진 최적화)

---

SEO란?

웹사이트의 구조를 작업하여 검색 엔진 상위에 노출될 수 있도록 최적화하는 과정

---

HTML과 자바스크립트의 관계

# 자바스크립트 문법

=> useEffect를 예를 들자면

html이 로드가 된 후, 안에 있는 코드가 실행되는 로직을 가지고 있다.

=> 즉 데이터가 없는 html이 먼저 보이고, 데이터가 천천히 채워지는 셈.

 

그래서 페이지로드가 느린 것이고, 사람입장에서도 답답할 수 있지 않은가?

 

자. 그럼, 검색엔진 봇 입장에서 생각을 해보자.

필요한 자료를 수집하러 온 검색 봇이 우리 사이트에 방문을 했다.

하지만, html에는 아무런 정보가 없다.

왜냐하면 useEffect를 실행하기 전이기 때문이다.

 

이는 큰 문제로 연결된다.

왜냐하면 봇은 빠르게 정보가 없음을 판단하고 떠나버린다.

 

=> 쉽게 말하자면 우리가 힘들게 만든 사이트를 검색 상단에 노출하기는 글러먹은 셈이다.

 

* 물론 데이터를 수집은 하지만, 속도면에서는 현저히 SEO과정이 발달된 사이트보다 느릴 것이다.

---

Next.js에서 SEO를 수행하는 방법

=> client component에서 바로 DB를 접근하여 데이터를 가져오지 말고, 

부모인 server component에서 DB를 액세스한 뒤,  props를 통해 받자.

 

- 항상 기억하자,

=> client component = 자식, server component  = 부모

 

---

궁금증이 풀렸다기보다는 되게 구체적으로 SEO방법을 알 수 있어서 좋은 강의였다.

그럼 우리가 여태 사용했던 리액트방식의 페이지들은 검색노출은 반 포기하고 만든 셈인 건가 ㅡ..ㅡ

정말 쓸모 있고 좋은 지식을 알게 되어서 값어치가 있다고 생각했다.