Next13 notFound()에 대해 알아보자

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

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

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

Summary

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

Case

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()
        }
    })()
}, [])

2. 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])

3. 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();
        }
}

4. 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()
    }
}

 

5. 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();
}

 

6. component rendering working case

const [data, setData] = useState('init');
  if(data === 'error') {
      notFound();
}

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')
        }
    })()
}, [])

SSR

1. docs example case

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

 

2. ignored axios interceptors also SSR -> view Rendering Page not 404

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

    return (
        <div>
            Rendering Page
        </div>
    )
}

3. syncAxiosInterceptors - ‘use client’와 동일하게 에러가 납니다.

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');
}

 

💡 React Query의 onSuccess, onError에서 사용을 해보려다가 정상적으로 동작하지 않는 것을 보고, fetch로까지 테스트해보면서 발견한 케이스들입니다.

---

답이 달리지 않는다면… notFound()를 까봐야할 것 같습니다.