NEXT API

data/todos.json을 만들고 전에 사용하던 임시 리스트를 그대로 넣어줌

readFile과 readFileSync

fs 모듈을 활용하여 데이터를 불러올 것

readFile은 비동기 함수기에 promise를 이용하여 파일을 불러옴
또한 둘 모두 try, catch문을 활용

readFileSync은 동기적으로 파일을 불러와줌

react에서 axios 통신을 하면 state를 통해 csr를 통한 즉각적인 뷰의 변화를 볼 수 있는데 next에서의 axios 통신은 즉각적인 뷰의 변화를 볼 수 없어서 불편함 그렇기에 여기서 react의 csr을 활용한 하이브리드 어플리케이션을 만들 수 있음

즉각적인 뷰의 변화를 보기 위해선 여러가지 방법이 있는데
1. router.reload()
router.reload를 활용하는 방법은 페이지를 새로 받아와 많은 비용이 들기 때문에 리로드를 하기보다 클라이언트측 내비게이션을 사용하여 전체를 다시 불러오지 않도록 사용 가능

2. router.push("/")를 이용, 클라이언트 측 내비게이션을 이용해 setServerSideProps를 실행하여 데이터를 다시 받아올 수 있음

위에 두 방법은 api를 통해서 새로 데이터를 받아오지만 데이터를 불러오지 않고도 뷰를 변화시키는 방법이 불필요한 api요청을 줄이기 때문에 state를 통한 뷰의 변화를 사용