[next js] 페이지 이동 시 데이터 전달

React
1

next js를 사용하면서 페이지 이동할 때 데이터 전달을 어떤 방법으로 하시나요??
여기서 데이터는 단순히 id나 no 같은 스트링값이 아닌 json같은 데이터 입니다.
예를 들면 회원가입 → API 요청 → reponse data → 회원가입 완료페이지 ( 이 때 api의 response 데이터를 사용 )

간단하게 생각해봤을 때 세가지 정도 나오는데 셋다 약간의 아쉬운 부분이 있네요ㅠ

  1. 페이지 컴포넌트에서 상태에 따라 가입 폼 컴포넌트, 가입 완료 컴포넌트를 분리하여 보여준다
    → 새로고침 시 데이터나 상태가 초기화 됨.
  2. query parameter를 사용한다 (base64 등으로 변환 후)
    → 사용자가 변경하게 될 경우 버그로 이어짐
  3. 로컬 스토리지를 사용함
    → 단순히 단발성 데이터 저장같은 케이스를 스토리지에 담는것 자체가 알맞은 방법은 아닌것 같고 페이지 빠져나가기 이전에 혹은 데이터를 가져온 후 삭제해주어야 하는 불편함이 생김
2

일반적으로

  1. 말씀해주신 것처럼 같은 페이지로 만들거나
  2. /users/[id]/greeting처럼 path parameter로 pk만 넘긴 후 해당 페이지에서 다시 read합니다.

보통 쿼리파라미터는 해당 페이지를 렌더링하는데 필수적인 정보가 아닌 선택적이고 변조되어도 상관 없는 정보를 담습니다. (ex: 필터)
로컬스토리지를 사용하는 것 자체에는 문제가 없을 것 같으나 회원가입완료 페이지에서 로컬스토리지 값을 사용하는 것 자체가 좀 특이합니다… “굳이 로컬스토리지를? 그냥 다시 읽으면 될텐데…” 같은 느낌이에요… 다시 읽는 방식이 성능적으로 걱정되신다면 SWR 같은 데이터fetching 모듈을 사용해서 회원가입결과를 일시적으로 캐싱해두고 사용하는 방법도 있습니다!

허접한 답변이지만 도움이 되었다면 좋겠네요 ㅎㅎ 오늘도 좋은 하루 되세요~