렌더링 방식 분석과 우리 프로젝트에 도입해보기

우아한테크코스

렌더링 방식 분석과 우리 프로젝트에 도입해보기

개발여행가 2023. 10. 16. 17:51

렌더링 시점의 비교

SPA와 SSR, SSG, ISR 간의 렌더링 시점에 어떤 일이 벌어지는지 작성합니다.

SPA(Single Page Application)

초기 요청에서는 빈 HTML을 불러온 뒤, JavaScript를 통해 동적으로 렌더링합니다. 즉, 사용자의 인터렉션에 의해 화면이 동적으로 변화합니다.

렌더링 시점

클라이언트

장점

빠른 페이지 간 전환
필요한 부분만 동적으로 변화
훌륭한 UX

단점

상대적으로 느린 초기 로딩
어려운 SEO
클라이언트 성능 고려 필요

SSR(Server Side Rendering)

서버에서 페이지를 렌더링한 결과를 클라이언트로 전송합니다. 이후 동적인 부분은 클라이언트에서 처리됩니다. SEO나 초기 로딩 속도 개선에 유리합니다.

렌더링 시점

서버

장점

빠른 초기 로딩
SEO
우수한 보안

단점

부족한 UX
서버 성능 고려 필요

SSG(Static Site Generation)

빌드 과정에서 모든 페이지가 정적 파일로 생성됩니다. 이 파일들은 요청이 있을 때마다 그대로 전달됩니다.

렌더링 시점

빌드 타임

장점

빠른 초기 로딩
SEO
우수한 보안

단점

사용자 인터렉션이 불가

ISR(Incremental Static Regeneration)

전체 사이트를 다시 빌드할 필요 없이 페이지 별로 정적 빌드를 사용할 수 있습니다.

렌더링 시점

빌드 타임 + 런타임

장점

빠른 초기 로딩
SEO
CDN 캐싱
주기적으로 데이터 업데이트 가능

단점

실시간 데이터가 아니다.

사용자 경험(UX) 측면 분석

각 렌더링 방식이 사용자 경험에 어떻게 영향을 미치는지 설명하고, 본인의 서비스를 사례로 들어 실제 적용된 예를 보여줍니다.

SPA (Single Page Application)

초기 로딩이 다소 느릴 수 있으나, 이후 페이지 전환은 빠르게 이루어집니다.
사용자와의 인터렉션에 대한 응답이 빠릅니다.

동글에서 …

사용자와의 인터렉션이 많은 페이지들은 SPA로 구성하여, 빠른 동적 인터랙션을 제공합니다.

SSR (Server Side Rendering)

초기 로딩이 빠르며, SEO가 잘 지원됩니다.
사용자와의 인터랙션이 많은 페이지에서는 서버 부하가 커질 수 있습니다.

동글에서 …

소개 페이지에 인터렉션하는 요소가 추가되면 고려합니다.

SSG (Static Site Generation)

초기 로딩이 매우 빠릅니다.
서버 부하가 거의 없어 효율적입니다.

동글에서 …

사용자가 처음 진입하는 소개페이지는 인터랙션이 없으므로 현재 채택한 방법입니다.

ISR (Incremental Static Regeneration)

콘텐츠가 자주 변경되지 않는 페이지에서는 SSG와 유사한 빠른 로딩을 제공합니다.
콘텐츠가 변경되는 경우에도 런타임에서 재생성이 가능하여 유연성이 있습니다.

동글에서 …

소개 페이지에서 사진이 일정한 기간을 갖고 변경된다면 도입을 고려합니다.

성능 측정 및 비교

내가 선택한 렌더링 방식이 어떻게 성능과 사용자 경험에 영향을 미치는지 분석합니다.

동글 (SPA)

동글 (SSG)

결론

성능, 접근성, SEO 모든 부분에서 SSG 방식이 효율적이다.

또한 네트워크 탭의 DOMContentLoaded(HTML이 다운되고 파싱된 시점)부분도 2초 이상 차이난다.

따라서, 사용자와의 인터렉션이 거의 없는 소개페이지는 SSG 방식이 적합하다 생각한다.