React - SPA와 CSR
리액트에서 사용하고 있는 SPA(Single page application) 이란 ?
하나의 페이지에서 변경사항이 있을 때, 해당 부분의 데이터만 요청해 페이지를
업데이트 하는 방식을 말합니다.
필요한 부분의 데이터를 서버에 요청해 클라이언트에서 업데이트하기 때문에,
SPA에서는 CSR(Client Side Rendering) 방식을 채택하고 있습니다.
CSR 이란 ?
사용자가 해당 페이지를 최초 접속하게 되면 브라우저에서 서버에 해당 데이터를 요청하게 됩니다.
그 응답으로 받은 빈 HTML 와 React 코드, JS 소스 코드를 받게 되는데,
이후 HTML 파일에 JS 소스 코드를 연결해 JS를 다운받고 DOM을 생성해 화면에 렌더링해주는 방식을 말한다.
장점
이에 따른 CSR의 장점은 한번 로딩이 된 이후 필요한 부분만 서버에 요청해 업데이트를 하기 때문에 상대적으로 서버의 부하가 적습니다.
이어지는 장점으로는 한번 로딩이 되면 빠른 UX(사용자 경험)을 제공합니다.
단점
기존 HTML 에는 UI 요소가 없고, JS 코드를 다운 받고 난 뒤 보여지기 때문에
처음 페이지에 접속 할 시에 페이지의 로딩 시간이 길어집니다.
JS 활성화가 필요합니다.
최초 비어있는 HTML 파일을 제공받기 때문에 크롤링에 어려움이 있어 SEO 최적화에 불리하다는 단점이 있습니다.
위와 같은 단점을 보완하기 위해 SSG , ISR , SSR 과 같은 렌더링 방식을 사용하게 됩니다.
Next JS 란?
Next JS 공식 문서에서는 Next JS 를 웹용 리액트 프레임워크 라고
설명하고 있습니다.
앞 서 말한 리액트의 렌더링 방식인 CSR이 가진 단점을 보완할 수 있는 렌더링 방식인 SSG , SSR , ISR 등의 렌더링 방식을 지원합니다.
SSG (Static Site Generator)
렌더링 주체 : 서버
렌더링 시기 : 빌드 시
SSG는 이름 그대로 정적으로 사이트를 렌더링 하는 방식을 말합니다.
장점
페이지 로딩 시간이 빠르다.
- 미리 만들어두기 때문에 이어지는 장점이라고 할 수 있습니다.
SEO 최적화에 유리하다.
- 서버가 이미 HTML 파일을 만들어뒀기 때문에, SEO가 유리합니다.
단점
동적인 데이터 제공이 어렵다.
- 데이터를 정적으로 생성하기 때문에 만약 가변적인 데이터를 사용하는 페이지라면
적절하지 못하다고 할 수 있습니다.
ISR (Incremental Static Regeneration)
렌더링 주체 : 서버
렌더링 시기 : 최초 빌드 시 , 이후 설정한 주기마다
ISR 렌더링 방식은 SSG와 같은 정적인 페이지이지만, 설정한 주기마다 데이터를 업데이트 한다 라는 특징이 있습니다.
장점
페이지 로딩 시간이 빠르다.
- 마찬가지로 빌드 시 페이지를 만들어두기에 생기는 장점입니다.
SEO 최적화에 유리하다.
- 이도 마찬가지로 HTML 파일을 미리 생성하기에 크롤링에 유리해 SEO 최적화에 유리합니다.
데이터가 주기적으로 업데이트 된다.
단점
설정한 주기마다 업데이트가 되기 때문에
사용자의 어떠한 이벤트로 인한 즉각의 업데이트가 어렵다.
- 해당 렌더링 방식을 사용자의 행동으로 인해 데이터가 변하는 페이지의 경우 적합하지 않다고 할 수 있습니다.
SSR (Server Side Rendering)
렌더링 주체 : 서버
렌더링 시점 : 클라이언트 요청 시
SSR 렌더링 방식은 앞 선 SSG , ISR 의 단점인 실시간 데이터 제공에 어려움을 보완해줍니다.
장점
페이지 로딩 시간이 빠르다.
SEO 최적화에 유리하다.
실시간으로 데이터의 업데이트 , 사용이 가능하다.
- 클라이언트 요청 시 서버에서 HTML 파일을 만들어 응답하기 때문입니다.
단점
서버 부하
처음 요청 시 파일을 만들기 때문에 비교적 대기 시간이 길 수 있다.
이쯤되면 그래서 무엇을 사용해야하나 라는 생각이 들 수 있습니다.
답은 사용자에게 제공하자고자 하는 서비스에 성격에 알맞는 렌더링 방식을 고민하고 채택하자. 입니다.
하나의 페이지에서도 여러 섹션을 나누어 작업하고, 페이지를 관리하듯 해당 영역마다 렌더링 방식을
알맞게 채택하는 것입니다.
Next JS 의 pre-rendering
Next JS는 pre rendering 기능을 제공한다.
pre-rendering
pre renderig 이란 페이지를 미리 렌더링하여 초기에 요청 시 정적인 HTML을 반환하는 것을 의미합니다.
이에 따라 사용자의 입장에서 원하는 컨텐츠를 보다 빠르게 화면을 통해 볼 수 있습니다.
이로 인해 초기 로딩 속도를 빠르게 하고, SEO 측면에도 유리하게 됩니다.
하지만 pre-rendering 만 된 상태에서는 어떠한 이벤트도 동작하지 않기 때문에
사용자가 어떠한 동작을 취해도 반응하지 않게 됩니다.
Hydration
이후 pre-rendering 된 HTML에 JS 이벤트 처리 및 상태 관리를 적용하는 과정이 이루어지게 되고,
이를 Hydration 이라 합니다.
pre-rendering된 페이지는 정적인 상태로 시작하며,클라이언트 측 JS에 의해 인터랙티브한 동작이 추가됩니다.
Pre-rendering 으로 초기 로딩 속도와 SEO를 향상시키고 정적인 페이지에 Hydration 과정을 통해
동적인 기능을 추가함으로 최적의 사용자 경험을 제공하게 됩니다.
