[React] 서버 사이드 렌더링

또띠·2023년 10월 13일
0

React

목록 보기
15/17

서버 사이드 렌더링이란?

UI를 서버에서 렌더링하는 것을 의미한다.

리액트 프로젝트는 기본적으로 클라이언트 사이드 렌더링을 하고 있다. 클라이언트 사이드 렌더링은 UI 렌더링을 브라우저에서 모두 처리하는 것으로 JS를 실행해야 만든 화면이 사용자에게 보여진다.


서버 사이드 렌더링 장점?

검색 엔진이 우리가 만든 웹 페이지를 원활하게 수집해 갈 수 있다.
따라서 웹 서비스의 검색 엔진 최적화를 위해서 서버 사이드 렌더링을 구현해 주는 것이 좋다.

또한 초기 렌더링 성능도 개선할 수 있는데 JS 파일 다운로드가 완료되지 않은 시점에서도 html 상에 사용자가 볼 수 있는 콘텐츠가 있기때문에 대기 시간이 최소화되며 UX도 향상된다.


서버 사이드 렌더링 단점?

브라우저가 해야할 일을 서버에서 대신해 주는 것이기 때문에 서버 리소스가 사용된다는 단점이 있다.
만약 갑자기 많은 사용자가 동시에 웹 사이트에 접속하면 서버에 과부화가 발생할 수 있다.
따라서 사용자가 많은 웹이라면 캐싱과 로드 밸런싱을 통해 성능을 최적화해 주어야 한다.

그리고 서버 사이드 렌더링을 하면 프로젝트 구조가 좀 더 복잡해지고 데이터 미리 불러오기, 코드 스플리팅과의 호환 등 고려해야할 점이 많아지기 때문에 개발이 어려워질 수 있다.

profile
✨ 𝑬𝒗𝒆𝒓𝒚𝒕𝒉𝒊𝒏𝒈 𝒄𝒐𝒎𝒆𝒔 𝒕𝒐 𝒉𝒊𝒎 𝒘𝒉𝒐 𝒉𝒖𝒔𝒕𝒍𝒆𝒔 𝒘𝒉𝒊𝒍𝒆 𝒉𝒆 𝒘𝒂𝒊𝒕𝒔. ✨

0개의 댓글

관련 채용 정보