성능 개선을 하다가 SSR과 CSR의 코드 스플리팅이 어떻게 다를까?
큰 효과가 있을까? 라는 의문에 글을 찾아봤고, SSR 관련 code spliting 영어 블로그글을 발견하게 되어서 작성하게 되었습니다.
성능 개선을 하기 위해 코드 스플리팅, lazy loading을 많이 하는데요!
SSR에서 집중 탐구해보겠습니다.
해당 주소에 글을 번역한 내용입니다!
https://medium.com/1mgofficial/code-splitting-ssr-lazy-loading-react-components-a-deeper-understanding-part-1-7d714196706
code spliting으로 바로 들어가기 전에 몇가지 질문에 답변해 보자
1) Npm에는 라이브러리가 넘쳐납니다. 어떤 것을 선택해야 할까요?
2) 가장 좋은 구현 방법은 무엇일까요?
3) 모두 작동한다면 왜 하나를 선택해야 할까요?
4) 아키텍처 설정에 대해 명확히 알고 있나요? 그리고 우리 라이브러리가 이를 지원하나요?
스스로 답해보자면
- 프로젝트 요구사항 : 프로젝트에 필요한 기능인가? 기술적 요구사항을 고려해야합니다.
- 유지 보수 및 지원 : 라이브러리의 활발한 개발 및 유지 보수가 이루어지고 있는지, 커뮤니티의 지원이 활발한지 확인해야 합니다.
- 문서화와 예제 : 라이브러리의 문서화와 예제의 품질 코드와 완성도를 고려해야합니다.
- 성능 : 라이브러리의 성능 특성과 최적화 수준을 고려하여 선택할 수 있습니다.
- 프로젝트 일관성 유지 : 프로젝트에서 일관성을 유지하고 코스베이스를 단순하기 위해 가능한 적은 라이브러리를 사용
혼란스럽나요?
네 혼란스러워요..
그럼 시간을 가지고 한스텝 나아봅시다
좋아효
1mg에서 우리는 많은 코드 스플리팅 문제를 겪었습니다. pwa를 위해서요
pwa - 웹앱입니다. 웹앱을 사용하면 사용자가 앱 다운로드 없이 웹 브라우저를 이용해 사용할 수 있습니다
이 문제에 어떻게 접근하여 요구사항에 맞는 완벽한 맞춤형 솔루션을 구현했는지 살펴보겠습니다.
아키텍쳐에 대해서 이해해 봅시다.
우선, 우리는 왜 두개의 렌더링 사이에 다른점이 있는지 이해해야만 합니다. 그리고 왜 우리를 그들을 신경써야하나요?
만약에 우리가 CSR을 셋팅한다면, 자바스크립트 실행에 의해 브라우저에서 html이 생성하고 있는 것입니다. 서버는 우리에게 골격 이상의 것을 보내지 않습니다. 따라서 렌더링 서버가 분할된 컴포넌트를 렌더링하지 않으므로 렌더링 서버가 분할 된 컴포넌트를 이해하도록 하는 방법에 대해 걱정할 필요가 없습니다.
반면에, 서버 측 설정 또는 동형 구조를 사용하려면 서버에서 컴포넌트가 미리 렌더링된 html을 가져와야합니다. 그런 다음에 클라이언트측에서 JS로 hydrate?하도록 작동하는 매커니즘이 필요합니다.
하지만, 모든 컴포넌트가 서버에서 렌더링되기를 원할까요? 그렇지 않다면 어떤 컴포넌트를 렌더링할지 어떻게 결정할까요?
그렇다면 두 가지 중 어떤 것이 더 좋을까요?
요구사항과 선호도에 따라 최종 사용자가 문서 렌더링 성능을 보다 일관성 있게 제어하고 예측하기를 바라기 때문에 후자의 방법(SSR)을 선택했습니다.
모든 비트를 직접 설정하고 유지관리하는 데 따르는 복잡성을 감수하고 싶지 않다면 전자를 선택해도 됩니다. 이전보다는 확실히 성능이 향상되고 설정이 더 쉽고 빠릅니다.
맞는 라이브러리를 선택하자
우리는 결정해야한다 셋업 그리고 컨트롤하기 위해 가장 적합한 라이브러리를 골라야 한다.
react.lazy와 suspense
React.lazy는 번들러의 코드 분할 및 번들링 기능을 사용하고 그 위에 구문을 제공하는 것일 뿐입니다. 기본적으로 컴포넌트 내에서 렌더링 될 때 임포트를 호출합니다. 이는 번들 파일의 크기를 줄이고 초기 로딩 시간을 최적화하는 데 도움이 됩니다.
그럼 서버사이드에서도 번들의 사이즈를 줄이고 컴포넌트를 지연로딩 시카나?Suspense는 로딩 상태를 제어할 수 있는 React 기능 중 하나입니다. 다른 컴포넌트가 로드되는 동안 어떤 컴포넌트를 (대체 컴포넌트) 표시해야 하는지 Suspense에 지시할 수 있습니다.
Suspense는 SSR을 지원하지 않습니다. 이는 SSR에서 지원하지 않습니다.
이는 SSR에서 Suspense를 사용하여 코드 분할된 컴포넌트를 로딩하는 것이 제약되는 의미입니다.비동기적? 자바스크립트 메모리를 어떻게 차지하나?우리가 찾고 있는 것이 맞나요? 어디보자!
React.lazy는 SSR을 지원하지만 Suspense는 지원하지 않습니다.
따라서 코드 분할은 라이브러리로 제한됩니다.
이 문제를 해결할 방법이 있을까요?
네! React.Fragment와 같은 React.lazy가 포함된 라이브러리를 사용하고 Suspense가 Fragement처럼 작동하도록 모의해야합니다. 그런 다음 React.lazy와 동기식으로 컴포넌트를 로드합니다.
