검색노출이 중요한페이지에서(SEO)

Next.js에서 검색노출이 중요한 페이지를 만들때, 클라이언트 컴포넌트에서 서버데이터를 가져오는거는 피하는게 좋다.

• 클라이언트 컴포넌트에서 서버데이터 가져올때 다음과 같은데,

'use client'

export default function ListItem(){
  useEffect(()=>{
    let result = (서버에 요청해서 DB데이터 가져오는 코드)
  },[])

  return (
    <div>{result}</div>
  )
}

이렇게 작성할 시, 페이지가 로드되면 유저는 텅 빈 html을 먼저 보게 된다.

후에, html내용이 채워지는데,(useEffect는 html이 다 로드된 후에 실행이되서) 이렇게 되면

검색엔진 봇들이 페이지의 텅 빈 html을 먼저 발견하게되서 검색엔진 노출 측면에서 단점이 될 수 있다.

(검색 수집은 하는데, 다른 사이트에비해서 수집 시간이 느려짐)

SEO가 중요하다면..

클라이언트 컴포넌트에서 DB데이터를 가져오지말고,
부모 서버 컴포넌트에서 DB데이터를 가져와서, 클라이언트 컴포넌트에게 props로 전달하는 방법을 쓰자.

Nextjs에선 server/client component들을 보여줘야할 때, 서버에서 미리 html을 만들어서 보내려고 하기 때문에, props를 넘기는 방법을 쓴다면 클라이언트컴포넌트도 DB데이터를 미리 채워서 유저에게 보내주게된다.