리액트 API 응답 시간 너무 느린데 어떡함..

[익명(223.39)]

리액트로 포폴 만드는 중인데

유료 api 이용 중이거든

근데 웹사이트를 새로고침 할 때마다 페이지 로드 속도가 너~~무 오래 걸려서 한 번만 fetching 하고 그 값을 브라우저에 저장한 다음에 그걸 꺼내 쓰고 싶음..

서버가 없으니까 세션은 못쓰고

쿠키로 브라우저에 저장하고 뺄까?

Local storage도 있는데 요거랑 쿠키 중에 어떤걸 쓰는게 좋을까..

아니먄 리액트에서 제공되는 비슷한 기능이 있음?

[키키핑(dcinsidex)]

redux

[익명(223.39)]

리덕스 쓰는 중인데 리덕스에 그런 기능도 있었음?? 지금 페이지 로드 할 때 액션 호출하는데 그 액션이 api 호출해서 응답받은걸 reducer에 전달하거든.. 그 사이에 뭘 해야될까?

[키키핑(dcinsidex)]

SPA가 아니야?

[익명(223.39)]

SPA 맞긴한데.. 페이지를 맨 처음 로드할 때 데이터 채울려고 API 호출 많이할 때가 문제임..

[ryu(ashrad)]

왜 그렇게짬?

[익명(223.39)]

포폴 제출용으로 만드는 중인데 유료 api가 너무 느려터져서 제일 처음에 페이지 로드할 때 data fetching 받는다고 시간 다 가버림.. 이걸 사용자한테 편하게 어떻게든 해볼려고 똥꼬쇼 중임 ㅠ

[ryu(ashrad)]

단순히 api 응답 기다리는거면 api 응답을 쪼개고 먼저 ui를 렌더링 한후에 로딩 관련해서 프로그레스 같은걸 보여줘라 아니 일단 그냥 잘못짠거임

[익명(223.39)]

조언 고맙당 꼭 참고할게!

[키키핑(dcinsidex)]

아 미안... 글을 처음에 잘 못 이해했어. 내 말은 무시해

[떼껄룩(1700p)]

service worker를 이용해서 fetch 요청 자체를 핸들링 하는 방법두 잇구(
https://developers.google.com/web/fundamentals/primers/service-workers)
이와는 조금 다른 방법을 이용한(fake-xml-http-request 기반) mirage js 라는 것두 잇어(
https://miragejs.com/)
이런 방법을 함 응용해보면 조을 것 같아 어차피 실 서비스 아니구 포폴이니가.. 전자 방법을 이용한다 하면 한 번 fetch(request) 된 것은 캐싱하도록 구성해서(CacheStorage API,
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage)
하면 될 것 같다리

[떼껄룩(1700p)]

cached 되게끔 구성하는 것도 첫 번째 링크에 모두 잇으니가 함 잘 응용해봐(
https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests)
두 번 째는 조금 다른 성격이어서..

[익명(223.39)]

오 뭔가 해결책이 될 거 같기도? 일단 해볼게 진짜 고맙당 ㅠㅠㅠ

[떼껄룩(1700p)]

화이팅 물론 실사용도 가능해 나두 이걸 기반으로 하나 서비스 만들엇엇어

[익명(223.38)]

멍청

[익명(175.223)]

유로 api 뭐 쓰는데

[익명(223.39)]

그냥 일반 웹사이트에서 제공해주는 api? 뭐라 말해야 될지 모르겠네.. 유료 api 전세계적으로 유명한 데가 있을까?

[익명(175.223)]

postman으로 api에서 데이터 받아와봐 만약에 postman에서는 빠르게 작동하는데 프론트에서 느리면 프론트가 잘못된거임 - dc App

[익명(223.39)]

그치.. 좀 더 확인해봐야겠다