5 글 보임 - 1 에서 5 까지 (총 5 중에서)
-
안녕하세요 선생님 새해 복 많이 받으세요 ㅎㅎ
nextjs13에서 비동기처리로 궁금한 점이 있습니다.
질문1. 기존코드에서는 문제없었지만 수정한 코드에서는 아래 이미지와 같이 페이지에 처음 접속하거나 새로고침 시 0.5초정도 후에 좋아요(하트모양)가 눌려서 빨간색으로 칠해진 상태가 적용되는 문제가 발생했습니다. 상태관리와 비동기처리를 위해 redux-tookit과 thunk, RTKquery를 사용하였는데 어떻게 해결할 수 있을까요? (애초에 사용하지 않는게 좋았을까요?..)
질문2. 이렇게 화면이 밀리는?? 뒤늦게 렌더링 되는걸 뭐라고 검색해야 관련 자료를 찾을 수 있을까요?
기존코드 로직 강의에서 알려주신 대로 서버컴포넌트(부모)에서 api요청 후 응답 받은 데이터를 props로 클라이언트 컴포넌트(자식)로 전달 후 사용하면 페이지를 처음 접속 하거나 새로고침 시에 화면에 적용된 데이터가 뒤 늦게 렌더링 되는 문제가 없었습니다. 수정한코드 로직 클라이언트 컴포넌트에서 바로 useEffect와 dispatch()로 리덕스 thunk나 RTKquery를 사용하여 ( thunk일 경우 store에 저장하는 로직 작성후 useSelector()로 데이터를 가져와서 사용 RTKquery일 경우 바로 use~Query()로 데이터를 가져와서 사용 ) 비동기 요청 후 받아온 데이터를 화면에 렌더링 해주었습니다. 이때 위 gif처럼 비동기처리로 받아온 데이터가 화면에 0.5초정도 후에 적용되는 문제가 발생했습니다. 질문3. 수정한코드 로직으로 전체적인 코드 작성 시 nextjs에서 서버컴포넌트에는 작성할 코드가 별로 없는 것 같은데 어떤 코드위주로 작성하면 될까요?
좋아요 버튼은 즉각적으로 변경됩니다! 제가 좀더 추가적으로 검색해 본 결과 layout shift 인것 같습니다 아래와 gif처럼 메인페이지에서 새로고침 시 화면 상단의 이미지 슬라이드는 서버컴포넌트에서 api 통신으로 데이터를 받아와서 새로고침해도 바로 렌더링 되지만
아래 상품리스트는 클라이언트 컴포넌트에서 비동기처리로 데이터를 받아와서 뒤늦게 렌더링 되는 문제를 해결하려면 어떻게 해야 될까요? 이미지 스켈레톤을 사용해서 해결하는게 맞는 방법인지 궁금합니다!
5 글 보임 - 1 에서 5 까지 (총 5 중에서)
- 답변은 로그인 후 가능합니다.