Next JS에서의 API fetch
backend에서 fetch 후 화면 렌더링 > 코드 드러내지 않음 = 안전
Loading components (로딩화면)
loading.tsx 파일을 통해 Loading시(backend에서 작업이 끝나지 않은) 보여줄 화면 설정
=> 브라우저 렌더링 과정
1. 브라우저에 layout과 loading component 전달 (backend 작업 대기)
2. backend에서 작업 끝나면 결과값 component 브라우저에 전달
3. loading component 교체 = isLoading ? Loading... : page;
병렬적으로 fetch 하는 방법
components 분리
이렇게 되어 있던 것들을
따로 components 폴더에 따로 만들어서 나누고
import 해오는 방식으로 변경
Suspense
: component await 해주고, 준비동안 fallback를 전달해줌
페이지 전체 로딩 -> fetch해야 하는 component 부분만 로딩
useState, useEffect 사용 x
페이지 즉시 표시
components 분리 -> 서로 기다릴 필요 없이 따로 표시
