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로 재구성하기] - 초코(강다빈) 미션 제출합니다. #26

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

Conversation

00kang
Copy link
Member

@00kang 00kang commented Oct 3, 2024

🤔 생각해 보기

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

  • SSR (Server-Side Rendering):
    서버에서 모든 데이터와 콘텐츠가 준비되어 있어 클라이언트 측에서 추가적인 데이터 요청이 필요 없기 때문에 페이지가 더 빨리 렌더링됨

  • CSR (Client-Side Rendering):
    CSR 방식은 클라이언트에서 모든 UI 구성 요소를 동적으로 생성하므로, JavaScript와 데이터 요청이 완료되어야 페이지가 완전히 렌더링됨. 따라서 더 오래 걸림.

csr.mp4
ssr.mp4

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

  • SSR (Server-Side Rendering)

    • 요청: 사용자가 URL을 입력하면 요청이 서버로 전송.
    • 서버 처리: 서버가 필요한 데이터를 가져와서 HTML 페이지를 생성.
    • 응답: 완성된 HTML이 클라이언트로 전송.
    • 렌더링: 클라이언트는 받은 HTML을 즉시 렌더링하여 사용자에게 보여줌.
  • CSR (Client-Side Rendering)

    • 요청: 사용자가 페이지에 접근하면 빈 HTML 템플릿과 JavaScript 파일을 요청.
    • 서버 응답: 서버가 기본 HTML과 JavaScript를 클라이언트로 보냄.
    • 클라이언트 처리: 클라이언트는 JavaScript를 실행하고 API 호출로 데이터를 가져옴.
    • 렌더링: 데이터를 기반으로 클라이언트가 HTML을 동적으로 생성하고 렌더링.

@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