[사전 미션 - CSR을 SSR로 재구성하기] - 지니(손진영) 미션 제출합니다.

[jinyoung234]

🤔 생각해 보기

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

• 💡 답변 요령

  • 사용자 관점에서 CSR과 SSR에서 각각 어떻게 페이지를 로딩하는지와 느끼는 초기 로딩 속도에 어떤 차이가 있었는지 생각해 보자.

  CSR

2024-10-03.10.59.02.mov

CSR의 경우 서버로 부터 빈 index.html을 받고 자바스크립트 번들 파일을 채우는 형식입니다. 따라서, 흰 화면 -> 마크업은 되었지만 데이터가 없는 상태 -> 서버 데이터를 통한 완전한 ui의 형태의 순서대로 보여지게 됩니다.

SSR

2024-10-03.10.59.46.mov

SSR의 경우 서버에서 모든 처리를 다하기 때문에 서버 데이터와 스타일링까지 다 된 index.html을 반환하게 됩니다.
따라서, 완전한 ui의 형태가 바로 사용자에게 보여지게 됩니다.

SSR (Server-Side Rendering)	CSR (Client-Side Rendering)

초기 로딩 속도도 csr의 경우 js 번들 파일을 별도로 다운로드 받는 시간이 있기 때문에 초기 로딩 속도의 경우 2배 가까이 차이나게 됩니다.

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

router.get('/', async (_, res) => {
  currentMovieType = 'nowPlaying';

  await sleep(10000);

  const movies = await fetchMovieList();

  res.send(renderHTML(movies));
});

지금은 모든 동작이 무리 없이 동작 했을 때를 가정한 것이지만 서버 데이터를 패칭하는 과정이 오래걸릴 경우 다음 사진 처럼 현저하게 로딩 속도가 감소한다는 위험성이 있습니다.

• SSR이 왜 더 빠르게 느껴지는지 이유를 설명해 보자.

위 설명 처럼 SSR의 경우 브라우저가 localhost:3000로 요청을 보내면 서버에서 데이터 패칭, 스타일링, 렌더링 과정이 한번에 이루어진 index.html를 pre-rendering 하여 클라이언트에게 반환해주는 반면, CSR의 경우 동일한 요청에도 빈 html만 받아 js로 페이지를 채우는 과정이 별도로 이뤄지기 때문입니다.

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

CSR
useEffect를 통해 DOM에 ui들이 다 렌더링 된 이후 시점부터 데이터 패칭을 진행하게 됩니다.

SSR
라우팅이 진행된 시점 부터 데이터 패칭을 진행하게 됩니다.

두 차이점으로 인해, SSR이 데이터를 가져오는 시점이 더 빠릅니다. 또한, SSR의 경우 데이터 패칭을 서버 측에서 진행하기 때문에 네트워크 탭을 살펴보면 데이터 패칭에 대한 기록을 찾아볼 수 없어 보안적으로 더 유리합니다.

Q & A

SSR의 경우 제가 생각했을 때 CSR에 비해 index.html를 반환하는 속도가 느릴거라 생각했습니다.(index.html을 반환하는 과정에서 서버 데이터를 패칭할 때 시간이 걸려 상대적으로 html을 반환하는 것이 csr에서 index.html을 반환하는 것보다 느릴 것이라 가정했기 때문)

하지만, 네트워크 탭에서 속도를 비교해보면 SSR이나 CSR이나 서로 index.html을 반환하는 속도가 비슷한 것을 확인할 수 있었습니다.

이 원인이 무엇일지 조금 궁금합니다,,,