next js를 이용하여 개인 블로그를 만드는 과제를 진행하던 중에 Contentful이라는 CMS를 이용해서 블로그 글이나 작업물에 대한 데이터를 만들고 또 여기에서 데이터를 가져와서 웹 애플리케이션에 보여주려고 한다.
nextjs 공식문서에서는 data fetching할 때 4가지의 경우에 대해서 설명하고 있고 그 중에서 server에서 써드파티 라이브러리를 이용하는 방법을 이용하면 되겠다라는 생각을 했다.
컴포넌트 구조
먼저 posts/page.tsx로 서버 컴포넌트의 페이지 파일을 만들어주고 여기에서 fetching을 진행할 것이고, 또 하위에는 총 3개의 컴포넌트로 나눌 수 있다.
- 포스트들의 카테고리에 대한 정보를 가져오고 사용자가 카테고리를 눌르면 query string에 category에 대한 내용이 추가가 된다.
- 포스트 검색 창, 사용자가 포스트 검색을 할 수 있고 submit 이벤트가 발생된다면 마찬가지로 query string에 search에 대한 내용이 추가가 된다.
- 현재 query string에 따라서 포스트가 필터링이 되면서 포스트 정보들을 보여줘야 한다.
확실하게 client component 구분하기
사용자가 입력이 들어간다면 client component로 구분하는 것이 마땅하다고 생각한다. 그렇기에 1번과 2번은 client component로 사용하려고 한다. 그리고 client component로 작성한 덕에 useSearchParams 훅을 이용해서 query string을 이용할 수 있었고 순조롭게 작성할 수 있었다.
마지막 세번째는?
애초에 posts/page.tsx 파일은 서버 컴포넌트로 데이터를 fetching을 한 후에 가져오는 것은 좋았으나 이 query string에 따라 필터링된 데이터를 가져와야 하는데 이 데이터를 어떻게 가져와야 하는 것인지 잘 이해가 가지 않았다. 그래서 그냥 3개의 컴포넌트 모두 client component로 만드는 것이 최선인가라는 생각을 하였고 이를 이용한다면 context api까지 이용할 수 있을 것 같아서 오히려 좋을 것 같다라는 생각이 들었다
그렇게 한다면 더 편리하고 했던 내용이라서 더 확실하게 다룰 수 있을 것 같았지만 그렇게는 진행하지는 않았고 서버 컴포넌트로할 수 있지 않을까라는 생각을 하였다.
이 생각을 놓칠 수 없었던 이유가 보통 서버에 데이터를 요청할 떄 query string에 포함된 데이터를 가지고 그 정보를 기반으로 응답을 할 수 있을텐데 nextjs에서 그러한 기능을 제공하지 못할까? 라는 생각이 지배적이었기 때문이다.
getStaticProps
그러던 와중에 getStaticProps라는 함수가 생각이 났고 이 함수를 본다면 충분히 가능성이 있어보였다. 더 찾아본 결과 애초에 app 라우터 버전에서는 props에 queryString에 대한 내용을 가져올 수 있었고 이 데이터를 통해서 server copmonent로 데이터를 잘 가져올 수 있었다.
결론
server component로 만들 수 있는 것은 만드는 것이 좋은 것 같다. 그럴려고 nextjs가 나온 것이니까 사용자의 입력으로 인해 랜더링 되는 것을 위주로 client component로 만들려고 해봐야겠다. 오늘처럼 사실 client, server가 잘 구분되지 않은 상황에서 헷갈릴 수 있으니 앞으로는 server부터 먼저 생각하고 다음에 client로 넘어가는 방식으로 생각을 해야겠다.
