Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[사전 미션 - CSR을 SSR로 재구성하기] - 헤인(방세린) 미션 제출합니다. #21

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

Hain-tain
Copy link

@Hain-tain Hain-tain commented Oct 3, 2024

🤔 생각해 보기

1. CSR과 SSR에서 초기 페이지 로딩 시간에 어떤 차이가 있었을까? 그 이유는?

  • CSR
csr.mov
  • SSR
ssr.mov
  • 사용자 관점에서 SSR이 초기 로딩 속도가 더 빠르다고 느낄 수 있을 것 같습니다. 왜냐하면 SSR에서는 서버에서 이미 렌더링된 HTML 파일을 클라이언트에 보내주어, 브라우저는 즉시 완성된 콘텐츠를 표시할 수 있기 때문입니다.

2. 서버 측에서 데이터를 가져오는 방식과 클라이언트 측에서 데이터를 가져오는 방식을 비교해서 설명한다면?

SSR

  • 사용자가 웹페이지를 요청하면 서버가 필요한 데이터를 모두 가져와 HTML을 완성합니다. 이 완성된 HTML을 클라이언트에게 보내줍니다. 브라우저는 받은 HTML을 그대로 표시하므로 사용자가 빠르게 콘텐츠를 볼 수 있습니다. 서버가 데이터 수집과 페이지 준비를 모두 담당하여 클라이언트에게 전달하는 방식입니다.
  • 콘텐츠가 이미 서버에서 완성되어 전달되기 때문에, 초기 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리하다는 장점이 있습니다.

CSR

  • 서버는 처음에 최소한의 HTML 구조만 보냅니다. 브라우저가 이 기본 구조를 받은 후, JavaScript를 실행하여 필요한 데이터를 서버 API로부터 직접 요청합니다. 받아온 데이터로 브라우저가 페이지 내용을 동적으로 만들어 표시합니다. 데이터 수집과 화면 구성을 클라이언트 측에서 처리하는 방식입니다.
  • 더욱 즉각적인 상호작용이 가능하다는 장점이 있습니다.

@woowahan-cron woowahan-cron self-assigned this Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants