요즘 무한 스크롤 ajax에 대한 작업을 하는되요 궁금한점이 있어 문의 드립니다.
본문
구현한 방식은
현재 스크롤위치를 스토리지 세션에 저장하고
그위치로 이동합니다.
물론 데이터도 가져옵니다.
그런데
300~ 1000개를 고객이 보고 있다가
뒤로가기 했을때
데이터 1000개를 들고 와야 되는듯합니다.
그럼 로드도 걸리고 서버에 부하가 될듯합니다.
그래서 개선점을 고민중인되요
위 내용 말고
클릭시 아이디를 스토리지 세션에 저장하고
뒤로가기시 아이디를 포함한
목록1
목록2
목록3
저장한아이디
목록5
목록6
목록7
한 화면에 보일 정도로 가져오고
위 또는 아래로 스크롤 이동시
데이터를 가져오면 어떨까요?
요즘 이것때문에 고민하는되요 고수님들 조언 부탁드립니다.
답변 3
스크롤을 통한 동적 페이징시 보통 그런방식으로 동작하도록 작업하는게 좋습니다.
거기에 추가로
직전 까지는 한 화면에 보일정도의 데이터 였지만
현재는 해당 범위에 포함되지 않는 경우 동적 삭제까지 고려해서
항상 일정 양의 데이터만 유지되도록 하는 방법이 좋습니다.
데이터를 스토리지 세션에 저장하고 뒤로 가기 시에 모든 데이터를 가져오는 방법은 서버 자원을 많이 사용하고, 사용자 경험도 좋지 않을 수 있습니다.
대신에, 무한 스크롤(infinite scroll)이나 더 보기(load more)와 같은 방법을 고려해볼 수 있습니다. 이 방법을 사용하면, 처음에는 적은 양의 데이터를 가져오고, 사용자가 스크롤을 하면 추가적인 데이터를 동적으로 로드하는 방식입니다.
무한 스크롤 방식은 사용자가 스크롤을 할 때마다 데이터를 가져오기 때문에, 서버에 부담이 적습니다. 또한, 사용자가 페이지를 처음 방문했을 때 모든 데이터를 가져오는 것보다 더 빠르게 페이지를 로드할 수 있으므로 사용자 경험도 개선됩니다.
또한, 클릭시 아이디를 스토리지 세션에 저장하는 것은 좋은 방법입니다. 이 방법을 사용하면 사용자가 다시 페이지를 방문했을 때 마지막으로 본 항목을 보여줄 수 있습니다.
그러나 이 방법도 여전히 모든 데이터를 한 번에 가져오는 문제가 있습니다. 따라서, 무한 스크롤과 같은 방식을 적용하여 데이터를 동적으로 로드하는 것이 좋습니다. 이 방법을 사용하면 사용자가 필요한 데이터만 가져올 수 있기 때문에 서버에 부담이 적습니다.
마지막으로, 데이터를 가져오는 방식은 클라이언트 측에서도 처리 가능합니다. 예를 들어, AJAX 요청을 사용하여 데이터를 동적으로 로드하거나, Websocket을 사용하여 실시간으로 데이터를 업데이트할 수도 있습니다.
챗gpt는 이런방법을 알려주네요..
안녕하세요.
작성자님이 말씀하신 방향이 최선으로 보입니다.
위에 언급해주셨듯이 추가로 로드되는 게시글더미는 각 페이지 단위로 볼 수 있어서 게시글(상세)에 들어갔다 뒤로 되돌아 갔을때, 상단의 페이지(게시글더미)들의 height를 미리 선언해주시고(내용은 비어있는 엘리먼트) scrollTop으로 화면에 뿌려진 해당 pageNumber를 호출
+ 해당 페이지와 (anchor의 우려) 해당 앞 페이지를 로드하시고
위로 스크롤하실때 비동기로 앞의 데이터를 받아오시는 방법입니다.
https://shopping.naver.com/fresh/directfarm/home
댓글 달며 찾아보니, 위 케이스도 비슷한듯한데, 네트워크 탭 띄워보시면 비슷하게 구현되어있는 듯합니다. ^^