TIL - defer/async 와 ssr/csr

오늘은 클라이언트 최적화에 대해서 아는 것을 제외하고 모르는 것 위주로 찾아보면서 습득한 내용을 바탕으로 기록할 것입니다.

따라서 최적화에 대한 전반적인 내용을 담고 있지 않음을 알립니다.

 

defer/ async

평소 맨날 헷갈리는 둘의 사용법에 대해서 알아봤습니다.

아래 그림이 매우 잘 나타낸 것 같아서 그림으로 대체합니다.

이미지 출처 : https://webroadcast.tistory.com/15

이미지 출처 : https://webroadcast.tistory.com/15

 

이미지 출처 : https://webroadcast.tistory.com/15

 

이미지 출처 : https://webroadcast.tistory.com/15

공통점

- 스크립트를 다운로드 하는 동안 HTML 파싱이 중단되지 않는다

차이점

- async는 스크립트 다운로드 후 곧바로 실행하고

-defer는 스크립트 다운로드 후 HTML 파싱이 다 끝난 후에 실행한다.

 

 

 

SSR과 CSR에 대해

이것 또한 그림으로 대체하겠습니다.

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

출처:  The Benefits of Server Side Rendering Over Client Side Rendering

 

다음에는 리액트 훅 중에, useCallback, useMemo, useEffect

리액트 lazy import

리액트 쿼리에 대해 공부해보겠습니다