[사전 미션 - CSR을 SSR로 재구성하기] - 수야(최영수) 미션 제출합니다. #27
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 생각해 보기
1. CSR과 SSR에서 초기 페이지 로딩 시간에 어떤 차이가 있었을까? 그 이유는?
사용자 관점에서
CSR은 브라우저에서 빈 문서를 토대로 파싱을 한 후에 리액트 소스(js 파일)를 모두 실행하고 나서야 정확한 DOM이 구성된다. 즉, 브라우저에서 js 리소스를 요청하고 로드하고 실행해야 DOM 파싱이 되기 때문에 오래걸린다.
SSR은 브라우저에서 요청을 보내면 비교적 짧은 js 코드가 실행되고, 미리 만들어둔 html 파일을 반환한다. 즉, 브라우저에서 js를 로드하고 실행하지 않고 html 파일만 DOM으로 바로 파싱하면 되기 때문에 때문에 빠르다.
2. 서버 측에서 데이터를 가져오는 방식과 클라이언트 측에서 데이터를 가져오는 방식을 비교해서 설명한다면?
클라이언트 측에서 데이터를 가져오는 방식: html 요청 및 응답 -> 렌더링 -> js 요청 및 응답 -> js 실행 -> 리렌더링 -> (클라이언트가) 데이터 페칭 -> 리렌더링
서버 측에서 데이터를 가져오는 방식: html 요청 -> (서버가) 데이터 페칭 -> html에 데이터 삽입 -> 응답-> 렌더링