next.js github discussion에 질문을 올린 내용입니다..

https://github.com/vercel/next.js/discussions/49433

notFound()를 사용하면서 이슈를 해결하기 위해 테스트하다보니 여러 케이스를 발견하게 되었습니다. 상세한 로직은 해당 github를 참조하시기 바랍니다. https://github.com/osydoo/next13-not-found

질문 요약

1. ‘use client’의 useEffect의 동작이 의존성에 따라서 다르게 동작하는 이유가 뭔가요?
2. axios.interceptors를 동기적으로 실행했을 때는 notFound()가 에러를 뱉고, 비동기로 했을때는 동작이 무시되는 이유가 뭔가요?
3. 클릭이벤트에선 왜 에러를 뱉나요?

궁금한 경우의 수

In 'use client'

1. useEffect - Error case

useEffect(()=> {
    (async () => {
        try{
            await axios.get('<http://127.0.0.1:3001/error>'); // 404 error
            console.log('success');
        }catch(e){
            console.log('error')
            notFound()
        }
    })()
}, [])

1. useEffect - useEffect의 의존성이 [] 일땐 동작안하고 여긴 동작하는 이유가 뭔가요?

const [data, setData] = useState('init');

useEffect(()=> {
    (async () => {
        try{
            await axios.get('<http://127.0.0.1:3001/error>'); // 404 error
            console.log('success');
        }catch(e){
            console.log('error')
            setData('error')
        }
    })()
}, [])

useEffect(()=> {
    if(data === 'error') {
        notFound();
    }    
}, [data])

1. click event - Error case

const handleClick = async () => {
        try{
            await axios.get('<http://127.0.0.1:3001/error>'); // 404 error
            console.log('success');
        }catch(e){
            console.log('error')
            notFound();
        }
}

1. axios.interceptor - 왜 동기적으로한건 무시가 안되고 비동긴 무시가되나요?

const axios = _axios.create();
axios.interceptors.response.use(
    function(res){
        return res
    },
    function(err){
        if(err){
            console.log('interceptors')
            notFound(); // not working
        }
    }
)
...
async () => {
    try{
        await axios.get('<http://127.0.0.1:3001/error>'); // 404 error
        console.log('success');
    }catch(e){
        console.log('error')
        notFound()
    }
}

1. sync fetch

const axios = _axios.create();
axios.interceptors.response.use(
    function(res){
        return res
    },
    function(err){
        if(err){
            console.log('interceptors')
            notFound();
        }
    }
)
...
try{
    axios.get('<http://127.0.0.1:3001/error>'); // 404 error
    console.log('success');
}catch(e){
    console.log('error');
    notFound();
}