SSR인 페이지에서도 lazy loading이 필요할까?

어떤 것이 궁금한지

Server Side Rendering(SSR) 페이지에서도 lazy loading이 필요할까?

왜 궁금한지

SSR은 서버에서 HTML을 생성하여 클라이언트로 보내기 때문에 초기 렌더링 속도가 빠를 것 같은데, lazy loading으로 한 번 더 최적화할 필요가 있는지 의문이 생김.

lazy loading이란?

최초에 모든 모듈을 가져오지 않고, 필요한 경우에만 클라이언트(브라우저)에서 모듈을 로드하여 네트워크 트래픽을 줄이고 초기 렌더링 속도를 향상시키는 기술.

필요한 상황

1. 페이지 크기 최적화: 서버에서 클라이언트로 전송하는 HTML의 크기를 줄이고, 필요한 리소스만 브라우저에서 로드하여 초기 렌더링 속도를 더욱 향상.
2. SSR에 적합하지 않은 라이브러리 사용: 예를 들어, 글쓰기 Editor 라이브러리는 복잡한 상태 관리와 상호작용이 많아 SSR에서 처리하기 어려운 경우가 많음. 또한, 검색 결과 노출이 필요하지 않아 클라이언트에서 동적으로 로드하면 효율적.

고려사항

SEO: 클라이언트에서 필요한 컴포넌트만 로드하는 lazy loading은 SEO에 영향을 미칠 수 있음. 따라서 SEO가 중요한 컴포넌트는 서버에서 렌더링해야 함.

결론

• 불필요한 리소스를 클라이언트에서 미리 로드하지 않아 네트워크 사용량이 줄어들어 성능 향상이 가능.
• lazy loading을 통해 초기 렌더링 성능을 더욱 빠르게 만들 수 있음.

배운 것 / 다음 목표

• 착각: SSR이기 때문에 HTML만 서버에서 생성하여 전달하면 초기 렌더링 속도가 항상 빠를 것이라 생각했으나, lazy loading을 사용하면 서버에서 받는 HTML 크기를 줄여 더 빠르게 렌더링할 수 있다는 점을 간과.
• SEO가 필요한 컴포넌트인지 판단하여 lazy loading을 적절히 적용할 것.
• 페이지 전체는 서버에서 렌더링하고, 일부는 클라이언트 컴포넌트로 동작하도록 설계할 것.