51일차 (CS 27, 28)

Lazy loading과 Code splitting

 Lazy Loading은 필요한 시점에 리소스나 데이터를 로드하는 기법을 의미한다. 웹 페이지나 애플리케이션에서 모든 리소스를 한 번에 로드하면 초기 로딩 시간이 길어질 수 있는데, Lazy Loading을 사용하면 사용자가 실제로 필요로 하는 시점에만 특정 리소스를 로드할 수 있다. 예를 들어, 웹 페이지에 많은 이미지가 있을 때, 사용자가 스크롤을 내리지 않아서 보지 않는 이미지는 로드하지 않고, 사용자가 해당 이미지 위치까지 스크롤할 때 이미지를 로드하는 것이 Lazy Loading의 한 예다.

 Code Splitting은 큰 규모의 애플리케이션을 여러 개의 작은 번들로 분리하는 기법을 의미한다. 이를 통해 사용자가 애플리케이션의 특정 부분만 필요로 할 때 해당 부분에 필요한 코드만 로드할 수 있다. 예를 들어, React에서는 `React.lazy()`와 `Suspense`를 사용하여 컴포넌트 레벨에서 Code Splitting을 적용할 수 있다. 이를 통해 사용자가 특정 라우트에 접근할 때만 해당 라우트에 필요한 컴포넌트 코드를 로드할 수 있다.

 Lazy Loading과 Code Splitting의 장점은 첫 번째로 사용자에게 필요한 리소스만 로드하기 때문에 초기 로딩 시간이 단축되기 때문에 성능이 향상된다는 점이다. 두 번째는 필요한 리소스만 로드하기 때문에 사용자의 데이터 사용량을 줄일 수 있다. 세 번째는 한 번에 많은 양의 리소스를 요청하지 않기 때문에 서버에 부하를 줄일 수 있습니다.

 이러한 기법들은 특히 대규모 웹 애플리케이션에서 중요하며, 사용자 경험을 크게 향상시킬 수 있다.

 

 

Server Side Rendering, Client Side Rendering, Static Site Generation의 장단점

 SSR은 서버에서 페이지 전체 내용을 렌더링하여 클라이언트에게 HTML을 전송하는 렌더링 방법이다. 이 방법의 첫 번째 장점은 자바스크립트 파일을 해석하지 않아도 되기 때문에 초기 페이지 로딩 속도가 빠르다는 점이다. 두 번째는 크롤러가 완전히 렌더링 된 페이지의 내용을 쉽게 파악할 수 있기 때문에 SEO에 유리한 점이다. 단점으로는 첫 번째로 각 요청마다 서버에서 렌더링을 수행해야 하므로 부하가 증가할 수 있다는 점이다.

 

 CSR은 브라우저에서 자바스크립트를 사용하여 페이지를 렌더링하는 방법이다. 이 방법의 장점은 첫 번째로 서버에서 정적 파일만 제공하기 때문에 서버 부하가 비교적 적다는 점이다. 두 번째는 한 번 초기 로딩이 완료되면 페이지 전환 시 추가적인 렌더링만 수행하기 때문에 페이지 전환이 빠르다는 점이다. 단점으로는 자바스크립트 파일을 다운로드하고 실행하여 페이지를 렌더링해야 하므로 초기 로딩이 느리다는 점이다. 또한 자바스크립트를 완전히 실행하지 않을 경우, 검색 엔진 크롤러가 페이지 내용을 제대로 인식하지 못하기 때문에 SEO 문제가 발생할 수 있다는 점이다.

 

 SSG(Static Site Generation)은 빌드 시점에 모든 페이지를 미리 렌더링 하여 정적 파일로 생성하는 방법을 말한다. 이 방법의 장점은 서버에서 동적으로 콘텐츠를 생성하지 않기 때문에 보안상 이점이 있을 수 있다는 점이며, 추가적으로 SSR과 CSR의 장점을 모두 가지고 있다. 단점으로는 사이트의 크기나 복잡도가 증가하면 빌드 시간이 길어질 수 있다는 점이다.