Next.js는 백엔드 서버로부터 데이터를 효율적으로 불러오는 데이터 페칭 기능을 지원하며, 이를 통해 빠르게 콘텐츠를 제공하는 방식으로 사용자 경험을 개선할 수 있다. 이번 포스트에서는 Next.js의 데이터 페칭 방식과 사전 렌더링 기법을 살펴보고, 기존 React의 데이터 페칭 방식과의 차이점을 중심으로 그 장점을 알아보도록 하자.
1. 기존 React에서의 데이터 페칭 방식
기존의 React 앱에서 데이터를 가져오는 단계는 일반적으로 다음과 같다.
-
데이터 보관용 상태(state) 생성: 서버에서 받아올 데이터를 보관할 상태 변수를 컴포넌트 내에 생성한다.
-
데이터 페칭 함수 생성: 데이터 요청을 처리할 함수(ex: fetchData)를 정의한다.
-
컴포넌트 마운트 시점에 함수 호출: useEffect를 사용하여 컴포넌트가 마운트된 직후에 데이터 페칭 함수를 호출한다.
-
로딩 상태 처리: 데이터를 기다리는 동안 로딩 스피너 또는 로딩 문구를 표시한다.
이 방식은 간단하게 데이터를 페칭할 수 있지만 로딩 속도가 느린 단점이 있다.
CSR 방식에서, React는 모든 요청을 클라이언트에서 처리한다. 즉, 페이지를 구성하는 HTML과 JavaScript가 먼저 렌더링된 후, 필요한 데이터를 서버에서 받아와 컴포넌트를 렌더링한다.
그렇기 때문에 FCP(First Contentful Paint)가 끝난 후에도 서버로부터 데이터를 받아오는 시간이 더 소요된다. 즉, 사용자가 페이지 화면을 본 뒤에도 추가적인 데이터 로딩 시간을 기다려야 한다는 것이다.
이처럼 데이터를 마운트 후에 요청하는 방식은 느린 FCP로 인한 사용자 경험 저하라는 단점을 가지고 있다.
2. Next.js의 데이터 페칭과 사전 렌더링
Next.js는 사전 렌더링 방식을 통해 React의 느린 FCP 문제를 개선해준다. 사전 렌더링을 사용하면 서버에서 페이지를 미리 렌더링하여 HTML 형태로 전송하는데 이때 서버는 필요한 데이터를 백엔드에서 미리 가져와 페이지에 포함시키므로 브라우저에 도달한 시점에서 이미 완성된 화면을 사용자가 볼 수 있게 된다.
2-1. 사전 렌더링(Pre-rendering)
-
사전 렌더링이란 브라우저가 접속 요청을 보내면 서버에서 필요한 JavaScript를 모두 실행하여, React 컴포넌트를 HTML로 변환한 후 이 HTML 파일을 브라우저로 전달하는 방식.
-
사전 렌더링을 통해 페이지가 더 빠르게 완성되어, 사용자에게 첫 화면을 빠르게 제공하기 때문에 React의 느린 FCP 문제 해결해준다.
2-2. 사전 렌더링과 데이터 페칭
사전 렌더링 시 서버는 백엔드 서버로부터 필요한 데이터를 미리 가져와 HTML과 함께 브라우저로 전송할 수 있다. 이렇게 하면 다음과 같은 이점이 있다.
-
빠른 데이터 로딩: 백엔드 데이터가 이미 포함된 HTML 파일을 제공하므로, 사용자는 페이지 로딩 후 추가적인 데이터 로딩을 기다릴 필요가 없다.
-
향상된 사용자 경험: 서버가 데이터를 미리 페칭하여 렌더링한 페이지를 제공함으로써 추가적인 로딩 시간 없이 완성된 화면을 사용자에게 제공한다.
3. Next.js의 사전 렌더링 시 발생할 수 있는 문제와 해결 방식
Next.js의 사전 렌더링을 활용한 데이터 페칭에는 몇 가지 잠재적인 문제가 있다. 만약 백엔드 서버의 응답이 너무 느리거나, 요청해야 할 데이터의 용량이 매우 클 경우, 사용자는 HTML 파일이 완성되기까지 오랜 시간을 기다려야 할 수 있고, 이로 인해 페이지 로딩 속도가 저하될 가능성이 생긴다.
예를 들어, 프로젝트를 npm run build로 빌드하는 그 시간 build time에 미리 사전 렌더링을 미리 마치도록 설정한다던가 하는 등의 다양한 사전 렌더링 방식을 제공하여 상황에 맞게 효율적으로 사용할 수 있게 한다.
3-1. SSR (서버 사이드 렌더링)
-
기본적인 사전 렌더링 방식으로, 사용자가 요청할 때마다 페이지가 서버에서 실시간으로 렌더링된다.
-
데이터가 실시간으로 반영되어야 하는 페이지에 적합하며, 매 요청마다 백엔드에서 데이터를 받아 새롭게 페이지를 생성한다.
-
매 요청마다 렌더링이 발생하므로 요청이 많을수록 서버 부하가 높아질 수 있다.
3-2. SSG (정적 사이트 생성)
-
빌드 시점에 한 번만 사전 렌더링하여 정적 파일로 생성하는 방식이다. 빌드된 HTML 파일을 요청 시 즉시 제공하므로, 빠른 속도로 응답함.
-
변화가 적은 정적 데이터(ex: 블로그 게시물, 공지사항 등)에 적합하며, 빌드 후 빠르게 배포할 수 있어 초기 로딩 속도가 매우 빠르다.
-
빌드 후 데이터 변경이 반영되지 않으므로 실시간 업데이트가 필요 없는 페이지에 유용하다.
3-3. ISR (증분 정적 재생성)
-
SSG의 단점을 보완한 방식으로, 설정한 주기에 따라 정적 파일을 자동으로 갱신한다.
-
캐시 만료 시 해당 페이지를 다시 렌더링해 최신 데이터를 제공하므로, 실시간 데이터 갱신과 빠른 로딩 속도를 결합한 방식이다.
-
SSR과 SSG의 장점을 조합하여, 빌드 후에도 일정 간격으로 페이지를 동적으로 업데이트할 수 있다.
4. 요약 및 결론
기존의 React 방식에서는 컴포넌트가 마운트된 후에 데이터를 요청하기 때문에 사용자는 빈 화면을 본 뒤 데이터를 기다려야 했다. 반면 Next.js에서는 사전 렌더링 시점에 데이터 페칭을 함께 처리할 수 있어 사용자가 완성된 페이지를 빠르게 확인할 수 있다. 이와 더불어, Next.js는 SSR, SSG, ISR과 같은 다양한 사전 렌더링 방식을 제공하여 상황에 맞는 최적의 렌더링 방식을 선택할 수 있게 한다.
이를 통해 Next.js는 빠른 로딩과 사용자 경험 향상을 동시에 제공하며, 효율적인 데이터 페칭 방식으로 다양한 프로젝트 환경에 최적화된 웹 애플리케이션을 구축할 수 있다.
