- 수업 내용 정리가 너무 파편화 되어서 Day 05 이후의 자료를 포스팅 하는게 시기적으로 너무 늦어졌다.. 정리 해 놓고 다른 일 때문에 포스팅 하는걸 잊어버린게 문제..
1. 사전 렌더링과 데이터페칭
React.js에서의 데이터페칭
React.js에서는 대략 이런 방식으로 데이터를 받아와서 처리했었다.
그런데 이 방식에는 1가지 단점이 존재한다. 바로 '초기 접속 요청부터 데이터가 로딩되기까지의 시간이 오래 걸린다는 것'
fetchData는 useEffect를 이용해서 컴포넌트가 마운트 되는 시점에 호출된다. 이 말은, 데이터를 불러오는 것이 화면이 렌더링 된 다음이라는 뜻.
CSR 방식에서는 이미 화면을 렌더링 하는 시점이 늦는다는 것이 단점으로 지적되고 있다. 그런데 데이터를 호출해서 반환받는 시점은 이보다도 더 느리다. 화면도 느리게 나타나는데, 데이터는 더 늦게 나타난다는 것!
Next.js에서는 이런 문제를 방지하기 위해 사전 렌더링 방식을 적용하고 있다.
Next.js에서의 사전 렌더링
Next.js는 어떻게 React.js의 단점을 해결하였는가
SSR 방식이 CSR보다 왜 FCP가 (화면이 사용자에게 보여주는 시간)이 왜 빠른가.
서버에서 웹 페이지가 렌더링 된 시점에서 데이터를 호출하고 반환받는 과정이 모두 포함된다. 즉, CSR과 달리 SSR에서는 사용자가 화면이 눈에 보여지는 시점에 이미 데이터까지 받아져 있다는 것.
Next.js는 이런 방식으로 React.js의 단점을 해결하였다.
그런데 사전 렌더링 자체가 지연되면?
서버에서 데이터를 호출하고, 반환받는 과정에서 지연이 발생한다면 사용자에게 화면을 보여주는 시간도 덩달아 늦어진다. 화면을 빠르게 보여준다는 Next.js의 장점이 역으로 단점으로 작용할 수도 있는 것.
이를 방지하기 위해 데이터 페칭 과정을 서버에서 프로젝트 파일을 빌드하는 시점에 미리 실행하는 방식을 제공한다. Next.js에서 제공하는 사전 렌더링 방식은 아래와 같은 것들이 존재한다.
2. 당연하지만..
Next.js의 이런 방식은 무조건 장점으로만 작용하는게 아니다. CSR에 비해서 서버에서 하는 일이 대단히 많아지는 것이고, 서버에서 소모하는 자원이 CSR에 비해 더욱 많이 필요하다는 것.
- 해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.
