1. React를 위한 렌더링 캐시
SSR(Server Side Rendering)은 웹 앱을 더 빠르게 표시하는 매우 유용한 기술이다. 초기 HTML은 자바 스크립트가 파싱되기 전에 표시되며 사용자가 무엇을 탭할지 결정할 때 핸들러가 준비된다.
React의 서버 측 렌더링은 추가 작업이 필요하며 서버 비용이 필요하다. 또한 서버 팀이 서버에서 JavaScript를 실행할 수 없는 경우 문제가 발생한다. 특히 로그인이 필요한 페이지와 사용자의 정보가 관리되는 페이지가 있는 경우 CDN 설정이 상당히 복잡해진다.
2. 렌더링 캐싱이란 무엇인가?
정적 HTML 페이지에서 SPA(Single Page Apps)로의 마이그레이션은 웹이 전통적으로 의존해 왔던 전체 캐싱 개념에 커다란 구멍을 남겼다. 브라우저가 초기 HTML의 게재 및 렌더링을 최적화하는 동안 SPA는 비워 두어 나중에 채운다.
렌더링 캐싱은 SPA 렌더링을 최적화하고 웹 페이지의 인식 가능한로드 시간을 크게 향상시킬 수 있다. 브라우저에서 렌더링 된 HTML을 캐싱하여 다음로드를 수행하고 표시 시간을 많이 차지하는 JavaScript 구문 분석없이 해당 디스플레이를 제공할 수 있다.
3. 렌더링 캐싱 사용
1단계: 올바른 캐싱 상태확인
- 사용자가 다음 방분시 열 때 동일한 페이지를 렌더링하는 현재 페이지의 조건을 파악한다.
예를 들어 현재 빌드 번호 또는 사용자 ID로 JSON 객체를 만들 수 있다. 핵심은 상태가 URL, 로컬 저장소 또는 쿠기에 캡슐화되고 서버 호출이 필요하지 않음을 보장하는 것이다.
2단계: API 호출 설정
- 렌더링 호출이 반응하기 전에 모든 API 호출이 발생하는지 확인하라. 이는 일반적인 사용 사례에서도 깜빡임을 유발하는 사용자에 따라 페이지가 변경되는 것을 방지하려는 경우에 유용하다.
3단계: 언로드 처리기에서 로컬 캐시
- 이제 언로드 이벤트 핸들러를 문서에 추가하라. 현재 DOM을 localStorage / indexDB에 저장한다. 빌드 번호와 사용자ID를 사용하여 1단계에서 설명한 캐싱 상태를 확인하는 방법은 다음과 같다.
4단계: 로드시 마지막으로 알려진 상태 복원
- 다음 번에는 브라우저의 로컬 저장소에서 마지막으로 알려진 상태를 가져와 나중에 방문 할 때 사용할 수 있다. HTML 파일에 다음을 추가하여 이 작업을 수행한다.
5단계: React에서 마지막으로 알려진 상태 렌더링
- 이것은 고무가 도로를 만나는 곳이다. DOM에서 사용자가 마지막으로 알고있는 상태를 볼 수 있게 되었으므로, 최상위 레벨의 React's render with hydrate를 조건부로 업데이트하여 전체 콘텐츠를 가져와서 해당 상태로 앱을 렌더링할 수 있다. 이 코드가 실행되면 이벤트 처리기가 작동하지만 DOM이 변경되지 않아야한다.
6단계: 비동기로 계속 이동한다.
- 자바스크립트 파일을 로드하기 위해 스크립트 태그를 async / defer으로 전환하세요. 프론트엔드에서 원활한 로드 및 렌더링 환경을 보장하는 또 다른 주요 단계이다. 성능을 향상 시키려면 페이지를 로드해야한다.
.png)