Nextjs getServerSideProps 예시

[문제발생]

프로젝트중 리액트 useEffect훅을 사용하다가 랜더링 문제에 직면하였다.

 

문제의 코드

function Post() {
  const [list, setList] = useState([])
  const [commentList, setCommentList] = useState()
  const [isLoading, setIsLoading] = useState(true)

  const router = useRouter()
  const { pid } = router.query
  const url = `${HOST}/article/${pid}`

  const getData = async () => {
    const res = await axios.get(url)
    setList({ article: res.data.article, comment: res.data.comment })
    setIsLoading(false)
  }

  useEffect(() => {
    if (pid !== undefined) {
      getData()
    }
  }, [pid])
  console.log(list)

  return (
    <div>
      {isLoading && (
        <div>
          <Loader inline="centered" active>
            Loading
          </Loader>
        </div>
      )}
      {!isLoading && (
        <>
          <p>Post: {pid}</p>
          <p>{list.article.board.title}</p>
          <p>{list.article.author.nickname}</p>
          <p>{list.article.content}</p>
          <div>댓글 {list.article.commentCount}</div>
        </>
      )}
    </div>
  )
}

export default Post

console.log(list)출력시 랜더링결과

console.log(List)를 출력시에

List에 데이터를 받아오는 도중에 최초에 빈배열을 받아오는것이 문제였다.

 

해결방법을 알아냈다.

1. {List && ( ... )} - List에 내용이 있을때만 나오게된다.

2. getServerSideProps - Nextjs에서 제공하는 pre render기능으로 브라우저가아니라 서버사이드에서 이방법이 코드를 훨씬 줄여주고 보기에 깔끔해서 선택하였다.

function Post({ pid, article, comment }) {
  return (
    <>
      {article && (
        <div>
          <p>Post: {pid}</p>
          <p>{article.board.title}</p>
          <p>{article.author.nickname}</p>
          <p>{article.content}</p>
          <div>댓글 {article.commentCount}</div>
        </div>
      )}
    </>
  )
}

export default Post

export async function getServerSideProps(context) {
  const pid = context.params.pid
  const url = `${HOST}/article/${pid}`
  const res = await axios.get(url)
  return {
    props: {
      pid,
      article: res.data.article
    },
  }
}

이전에 사용했단 useRouter는 서버사이드인 getServerSideProps에서는 사용할 수 없어서 공식사이트에서 알려주는 context를 사용하였다.

여기서 파라미터로 들어가는 context를 콘솔로 찍어보면 아래와 같다.

따라서 context.params.pid = '624..'와 같다.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js