lazy loading은 검색 엔진 순위에 영향을 미칠 수 있습니다 . 웹사이트를 크롤링하는 검색엔진은 리소스의 내용을 잘못 해석하거나 무시 할 수 있습니다 .
블로그 게시물과 같은 웹페이지의 전체 구성 요소를 느리게 로드하면 검색 엔진이 해당 구성 요소를 우회하여 콘텐츠가 인덱싱 되지 않아 검색 엔진 결과가 줄어들 수 있습니다.
이러한 문제를 극복하는 한 가지 요령은 lazy load하는 콘텐츠에 대한 링크를 제공하는 것입니다.
lazy loading 구현 방법 ?
lazyloading을 구현하는 방법에는 IntersectionObserver 를 이용한 infinity scrole을 구현 할 수 있고 다른 방법들도 있지만 저는 다른 방법으로 구현해 보았습니다 .
lazyloadinig을 구현 하기 위한 방법으로는 어떠한 경우에 사용자에게 필요한 정보의 타입에 따라 필요한 정보를 보여줄 지를 생각해보아야 합니다 . 저는 쌓여있는 글들을 사용자가 스크롤을 내려서 가장 마지막 글을 볼 때 쯔음에 데이터를 추가해주는 방법으로 구현해 보았습니다 .
Code
우선 유저의 스크롤을 감지해서 Footer의 길이를 제거 하고 가장 아래로 왔을 때에 isLoading을 false에서 true로 바꾸어서 로딩을 보여준다 .
로딩중일 때에 데이터를 10개씩 넘겨주고 다시 로딩을 true 에서 false로 바꾸어준다 .
만일 데이터를 전부 불러와서 없는 경우에는 데이터를 더 불러오지 않는다 .
code
useEffect(()=> {
function scrolling() {
let scrollHeight = Math.max(
document.documentElement.scrollHeight,
document.body.scrollHeight
);
let scrollTop = Math.max(
document.documentElement.scrollTop,
document.body.scrollTop
);
let clientTop = document.documentElement.clientHeight;
// 여기까지가 가장 아래의 스크롤을 구하기 위한 변수
// scrollHeight : 화면에 보이지 않는 총 높이까지 포함된 페이지의 높이
// scrollTop : 이미 스크롤되어서 보이지 않는 구간의 높이
// clientHeight : 사용자에게 보여지는 페이지의 높이
if(footerref && footerref.current?.clientHeight){
const footerRealHeight = footerref.current.clientHeight
//footerRealHeight는 footer의 높이
if (scrollTop + clientTop >= scrollHeight - footerRealHeight) {
//footer의 높이를 제외한 전체 스크롤 높이보다 scrollTop과 clientTop의 합의 높이가 같거나 더 크면
setPage(storageData.slice(0, pageNum + 10));
//데이터를 추가해주고
setTimeout(() => {
if (pageNum < storageData.length + 9) {
//만약 데이터 전체의 길이가 storageData에 9를 더한값 (뒷자리가 1인경우 예를 들어 11인경우도 대비해 9를 더해준다.)
setPageNum(pageNum + 10);
//데이터 추가
} else {
return;
//만약 pageNum이 큰경우에는 아무것도 하지 않는다 .
}
}, 10);
} else {
return
}
}
}
window.addEventListener("scroll", scrolling);
return () => {
//스크롤을 감지하고
window.removeEventListener("scroll", scrolling);
//스크롤 이벤트가 계속 반복되는걸 방지하기 위함
};
}, [storageData, pageNum]);
CommentList.tsx 에서는
useEffect((): void => {
if (props.page.length === props.storageData.length) {
props.setIsLoading(false);
// localstorage에 저장된 데이터와 실질적으로 쓰이는 데이터의 길이가 같다면 로딩을 false로 만들어주고
}
if (props.storageData.length <= 10) {
props.setPage(props.storageData);
props.setPageNum(10);
props.setIsLoading(false);
//localstorage의 데이터가 10개 이하인 경우에도 실질적으로 쓰이는 데이터인 page를 setPage를 통해 갱신시키고 pageNum을 10으로 맞춰준 뒤에 로딩또한 false로 해둔다
} else {
props.setPage(props.storageData.slice(0, props.pageNum));
//위의 조건을 통과하지 않을 경우에는 storageData를 pageNum 만큼 slice 한 값으로 채워준다
}
}, [props.storageData, props.page.length]);
{props.page.map((el: storageType, index: number) => {
if (index > props.page.length * 10 - 1) {
return <react.Fragment key={`index-${index}`} />;
// 그 뒤에 page를 map 해서 보여준다 .
}
스크롤바를 집중적으로 봐주세요 !