스마트팜 프로젝트를 Next.js로 진행하게 되면서, 각 전략들의 렌더 과정을 이해하고 있어야 할 필요성을 느끼게 되어 정리하게 되었다. 이번 글에서는 SPA 렌더링 전략들 중 CSR(Clident Side Rendering), SSR(Sever Side Rendering), SSG(Static Side Generation)에 대해 정리해 보았다.
CSR
- Client-Side Rendering
- 초기에 HTML, CSS 및 JavaScript 파일을 로드하고, 웹 애플리케이션의 초기 렌더링을 클라이언트 측에서 처리하는 방식
CSR 기본 동작 흐름
- 클라이언트는 서버로부터 최초의 HTML 파일을 가져온다
- HTML 파일에는 JavaScript 파일을 로드하기 위한 'script' 태그가 포함되어 있다
- 클라이언트가 JavaScript 파일을 다운로드하고 실행하면 웹 애플리케이션이 초기 렌더링을 담당
- JavaScript는 데이터를 서버로부터 비동기적으로 가져오고, 필요한 컴포넌트를 렌더링한다
CSR은 웹 애플리케이션의 초기 로딩 속도를 향상시킬 수 있으며, 클라이언트 측에서 렌더링되므로 더 동적인 사용자 경험을 제공할 수 있다. 그러나 초기 로딩 시간이 길어질 수 있고, 검색 엔진 최적화(SEO)에 문제가 있을 수 있다.
SSR
- Server-Side Rendering
- 서버 측에서 웹 애플리케이션의 초기 렌더링을 처리하는 방식. 서버는 클라이언트에게 최초의 완전한 HTML 페이지를 제공
SSR 기본 동작 흐름
- 클라이언트는 서버에 요청을 보냄
- 서버는 클라이언트 요청에 따라 데이터를 가져오고, 웹 애플리케이션의 초기 렌더링을 수행
- 서버는 완전한 HTML 페이지를 생성하고, 클라이언트에게 반환
- 클라이언트는 서버로부터 받은 HTML을 렌더링하여 초기 화면을 표시
- 클라이언트 측 JavaScript는 초기 렌더링 이후의 동작에 사용
SSR은 초기 로딩 시간을 단축시킬 수 있으며, SEO에 유리하다. 그러나 서버 측에서 렌더링을 처리해야 하므로 서버 리소스가 많이 사용되며, 사용자 경험이 상대적으로 덜 동적일 수 있다.
SSG
- Static Site Generation
- 빌드 시점에 웹 애플리케이션의 정적인 컨텐츠를 생성하는 방식
- 웹 애플리케이션의 모든 페이지는 빌드 단계에서 생성되며, 라우팅 시 클라이언트는 정적인 파일을 가져와 표시한다.
SSG 기본 동작 흐름
- 빌드 단계에서 서버는 웹 애플리케이션의 모든 페이지를 사전에 렌더링하여 정적인 HTML 파일로 생성
- 클라이언트는 서버로부터 정적인 HTML 파일을 가져와 표시
- 클라이언트 측 JavaScript는 초기 로딩 이후의 동작에 사용
SSG는 초기 로딩 속도가 매우 빠르며, 서버 리소스가 거의 필요하지 않다. 그러나 동적인 컨텐츠에 대해서는 제한적이며, 사용자의 상호작용이 적은 경우에 적합하다.
🐧 렌더링 전략을 선택하는 요소
1. 요구 사항
사용자 경험의 동적인 요소가 많이 필요한 경우에는 CSR이나 SSG보다는 CSR을 선택하는 것이 적합할 수도 있다. 또한, SEO가 중요한 경우에는 SSR을 고려해야 한다.
2. 성능
초기 로딩 속도, 페이지 전황 시의 응답 속도 등 성능 측면을 고려해야 한다. CSR은 초기 로딩 시간이 길 수 있지만, 이후에는 빠른 페이지 전환과 동적인 사용자 경험을 제공할 수 있다. SSR은 초기 로딩 속도가 빠르지만 서버 리소스를 많이 사용할 수 있다. SSG는 초기 로딩 속도가 빠르지만 동적인 요소에는 제한이 있다.
3. 사용자 경험
사용자의 상호작용과 동적인 요소가 어느 정도 필요한지 고려해야 한다. CSR은 클라이언트 측에서 렌더링되므로 동적인 사용자 경험을 제공할 수 있다. SSR은 초기 로딩 이후에는 클라이언트 측에서 동작하지만, 초기 로딩 속도가 빠르기 때문에 사용자 경험에 영향을 줄 수 있다. SSG는 정적인 컨텐츠에 대해서는 빠른 로딩 속도와 안정적인 사용자 경험을 제공할 수 있지만, 동적인 요소에는 제한이 있다.
4. 개발 및 유지 보수
각 렌더링 전략은 개발 및 유지 보수 측면에서도 고려되어야 한다. CSR은 클라이언트 측에서 렌더링되므로 클라이언트 측의 JavaScript 코드가 주로 사용되며, 프론트엔드 개발자들이 주로 관여하게 된다. SSR은 서버 측에서 렌더링되므로 서버 사이드 프레임워크와 백엔드 개발자들이 관여할 수 있다. SSG는 빌드 단계에서 사전에 렌더링되므로 초기 설정과 빌드 과정을 고려해야 한다.
