[ project3 / Pagenation ] 공지사항 페이지 이동1(Feat. Supabase)

공지사항 페이지를 만들기 위해서 고민한다. 뭐가 더 좋은 건지 솔직히 아직은 구분을 못한다. 다만 serve와 client가 섞으면 일단 번들의 개수는 준다.

 

Server side =>> fetch data  =>> passing data as props =>> client side component

 

시작은 역시 : Ai...

Chat GPT의 도움을 시작으로 pagination을 만들기 시작한다. 쉽지 않다. Chat이 만들어 준 내용은 내가 이해하기 어렵다.

 

맨 처음 그가 나에게 준 code 아래와 같다.

크게 2가지 궁금증이 생긴다.

1. 왜  supabase에서 range한가? (결국 선택적인 문제이긴 한다. 한번에 받아서 전달해 줄 것인가? 아니면 page를 이동할 때 마다 데이터를 받아올 것인가)

2. page({searchParams})를 넣는건 인가? useSearchParams를 써야 하지 않는가?

>>>차이점<<<

 

 

STAR

Situation 

1) HOOK을 이용하면 데이터가 리셋된다.

2) URL 정보를 가져와야 하기때문에 Server and Client 분리 필요. 지금(2024.07.21)기준으론 supabase에서 데이터를 server side로 가져오고 있음.

 

Task

1) 페이지 위치 가지고 있기 + URL을 활용하기.

2) Serve와 Client 분리 하기 + prop 전달.

 

Action

2) Server + Client 분리

 

1) 페이지 위치 가지고 있기 + URL을 활용하기.

1-1. 여기서 첫번째 궁금증 풀림. Server에선 URL값을  { searchParams }를 통해서 가져올 수 있다. 다만 layout은 안 된다.

공식 문서
Layouts

Unlike Pages, Layouts (Server Components) do not receive the searchParams prop. This is because a shared layout is not re-rendered during navigation which could lead to stale searchParams between navigations. View detailed explanation.

page = ULR을 통해서 page 값 확인 및 없으면  => 1로 처리.

offset는 pagination의 page별로 몇개의 콘텐츠를 나열할 것 인가 처리.

 

1-2) supabase를 통해서 데이터를 받아오기

두 번의 fetching을 한다. 맨 위에 있는 건,  table row 총 개수를 파악하기 위해서 사용한 fetch

맨위 supabase fetching
=> select으로 전체를 선택하고 head true로 하면 data는 안 오고 count에 총 개수만 온다.(처음엔 그거 몰라서 계속 data null 값이 나와서 한참 뻘짓했다.)

사용방법 stackflow >> https://stackoverflow.com/questions/65612167/how-to-get-count-in-supabase

두번째 supabase fetching

=> range 값을 통해서 데이터를 불러 온다. 위에 정의한 offset이 여기서 범위를 설정하는데 활용된다.

 

 

참조 자료

1. searchParams + useSearchParams
https://www.youtube.com/watch?v=HuZxu_i4gO0

 

2. supabase range
https://www.youtube.com/watch?v=1LApZM0jELk

 

3. Next js offical
https://nextjs.org/docs/app/api-reference/functions/use-search-params#updating-searchparams

Functions: useSearchParams | Next.js

 

4. supabase fetching data

https://supabase.com/docs/reference/javascript/select

Fetch data | Supabase