NextJs로 웹사이트를 만들고 있는데 데이터 관리 관련해서 궁금한 점이 있습니다.

Question

NextJs로 웹페이지를 만들고 있습니다.url이 1/1, 1/2, 1/3, 2/1, 2/2 이런 식으로 있고,첫 번째 숫자가 같은 페이지는 같은 데이터를 사용합니다. 예를 들면 1/1, 1/2, 1/3은 같은 1 데이터를 사용하고, 2/1, 2/2는 같은 2 데이터를 사용합니다.(실제로는 하위 페이지가 더 많습니다.) 데이터는 서버에서 불러옵니다.NextJs13에서 도입된 app 라우터를 사용하고 있습니다.여기에는 layout 파일에 코드를 작성하면 동위랑 하위 페이지에 전부 적용되는 기능이 있어서, layout 페이지에서 useEffect를 이용해 처음 마운트될 때 api 통신으로 서버에서 데이터를 불러오고 전역변수에 저장합니다.그리고 각 페이지에서 저장된 전역변수를 불러와서 사용하고 있습니다.그러니까 1 폴더 > 1 폴더, 2 폴더, 3 폴더가 존재하고 상위 1 폴더의 layout 파일에서 1 데이터를 불러와서 전역변수(React useContext 사용)에 저장한 뒤, 각 하위 폴더에서 자신이 필요한 데이터를 필터링해서 사용하는 방식입니다.여기서 걱정되는 점이 있습니다.NextJs의 장점은 서버 컴포넌트를 사용해서 서버에서 렌더링을 할 수 있다는 점인데, 저는 useContext로 각 페이지에서 데이터를 관리하고 있어서 모든 페이지가 클라이언트 컴포넌트입니다.NextJs를 사용하는 게 무의미하게 코드를 짠 것 같습니다.차라리 중복된 api 통신을 더 많이 하더라도 각 페이지에서 api 통신을 해서 데이터를 각자 불러와서 사용해야 할까요?아니면 지금처럼 layout에서 한 번에 불러와서 전역변수로 뿌려주는 게 더 좋은 방식일까요?다른 좋은 방식이 있다면 얘기해주시면 감사드리겠습니다.

brian55 · Accepted Answer

일단 레이아웃 레이어에 비즈니스로직이 들어간게 좀 문제일것 같구요. 두번째로는 api와 api 에서 받아온 데이터와 관련있는 컴포넌트는 최대한 가까이 유지하게 두는게 좀 더 좋을 것 같습니다.기존에 lazy, suspense, error oundary를 사용해보셨다면 그게 그냥 app라우터의 loading.tsx page.tsx error.tsx로 바뀐거라고 보시면 좀 더 편하게 구조에 대한 감을 익히실 수 있으실 것 같네요

NextJs로 웹사이트를 만들고 있는데 데이터 관리 관련해서 궁금한 점이 있습니다.

1개의 답변

Q&A 목록