[우아한테크코스] CSR과 SSR 환경에서 API 응답속도 비교

CSR에서는 브라우저에서 자바스크립트 번들을 실행시켜 API 요청을 보낸다.

브라우저에서 API서버로 요청을 보내기 때문에 사용자 네트워크 환경이 느릴수록 API 응답이 느리다.

SSR은 SSR서버에서 API서버로 보내니까 사용자 네트워크 환경에 영향이 없지 않을까? ➡️ YES

진짜 영향이 없는지 실험해보자!

✅ CSR

크롬에서 네트워크 쓰로틀링을 걸고 테스트하였다.

테스트 결과, 2689ms ➡️ 923ms ➡️ 404ms ➡️ 227ms 로 네트워크 환경에 API 응답 속도가 영향받는다는 것을 확인할 수 있다.

---

3G	느린 4G	빠른 4G	제한 없음
2689ms	923ms	404ms	227ms

  useEffect(() => {
    const fetchData = async () => {
      console.time();
      await loadMovies(TMDB_MOVIE_LISTS.popular, setPopularMovies);
      console.timeEnd();
    };

    fetchData();
   ...
  }, []);

✅ SSR

처음 연결은 별도의 통신 작업이 추가되어 네트워크 속도에 상관없이 항상 더 오래걸린다.

두번째 연결만 제한 없음으로 설정하고, 나머지는 3G로 설정하였다.

3G 설정이 제한 없음보다 빠를 때도 있는 것을 보면 사용자 네트워크 환경에 영향을 받지 않는 것을 알 수 있다.

---

router.get("/", async (_, res) => {
  console.time();
  const popularMovies = await fetchMoviesPopular();
  console.timeEnd();
   ...
}

[ 결론 ]

측정 결과, CSR에서 API 응답 속도는 사용자의 네트워크 환경에 영향을 받고, SSR 에서는 영향 받지 않는다.

API 서버가 바쁘지 않은 이상, SSR의 API 응답속도가 더 안정적이며 빠르다.

📘 reference

• CSR 코드
• SSR 코드