[Next.js] client component에서 DB데이터 가져오려면

client component에서 DB데이터 가져오려면

useEffect이용해서 서버에 부탁해서 DB데이터를 가져온다!!

 

"use client";

import Link from "next/link";
import WriteBtn from "./WriteBtn";
import { useEffect } from "react";

export default function BoardItem() {
  useEffect(() => {}, []);

  return (
    <div>
      <h2>Q & A</h2>
      {data.map((a, i) => {
        return (
          <div className="list-item" key={i}>
            <Link href={`/detail/` + data[i]._id}>
              <h4>{data[i].title}</h4>
            </Link>
            <p>{data[i].content}</p>
            {/* <p>{data[i]._id}</p> */}
            <Link href={`/board/edit/` + data[i]._id}>수정</Link>
            <button>삭제</button>
          </div>
        );
      })}
      <WriteBtn />
    </div>
  );
}

 

 

근데 이렇게 하면 단점은 검색노출이 어려울수도 있다.
왜나면 html을 다 렌더링한 후에 useEffect가 실행되기때문이다.

 

 

그래서 검색친화적인 사이트를 만들려면 props내리는 방식으로 짜는게 좋다.!!!