캐시 데이터로 에러 발생 시 데이터 유지

API fetch 중 문제가 발생했을 때, 에러 창을 띄우는 것이 아닌 이전 데이터를 유지 해야 한다는 요구사항이 있어서 다음과 같이 구현했다. 프레임워크는 Next.js 이며, 별도의 API 관련 라이브러리를 사용하지 않고 fetch로 가져온다.

const fetchData = useCallback(async () => {
    const response = await fetch('API URL');
    if (response.ok) {
        const fetchedData = await response.json();
        setData(fetchedData);
        // 데이터를 LocalStorage에 저장, 오류 발생 시 캐시된 데이터 사용하기 위함
        localStorage.setItem('cachedData', JSON.stringify(fetchedData));
    } else {
        if (response.status === 404) {
            router.push('/404'); // 404 페이지로 이동
        } else {
            const cachedData = localStorage.getItem('cachedData');
            if (cachedData) {
                const parsedCachedData = JSON.parse(cachedData);
                setData(parsedCachedData);
            }
        }
    }
    console.log('check time : ', dayjs().format('YYYY-MM-DD HH:mm:ss'));
}, [router, uuid]);

필자는 LocalStorage에 cachedData라는 이름으로 fetch response 데이터를 저장했다. 404일 경우에는 404 페이지로 연결해야 했다.

로컬 스토리지를 사용한 이유는 브라우저를 재시작 했을 때도 이전에 받아왔던 데이터가 사라지지 않게 하기 위해서 사용했다. 또한 저장되는 데이터 역시 노출되어도 문제가 되지 않고, json 객체 형식을 읽고 쓰기에 편리하기 때문이다.