1. 프레임워크(Next.js) || 라이브러리(React.js)
👀 프레임워크란?
- 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 애플리케이션을 만들 수 있도록 하는 소프트웨어 환경
- 응용 프로그램은 프레임워크에 의해 사용됨
👀 라이브러리란?
- 애플리케이션을 만들 때 필요한 자원의 모임
- 응용 프로그램이 라이브러리를 사용함
💬 정리
- React에서는 우리가 직접 생성하고 설정하던 것들을 Next에서는 이미 만들어져있기에 Next 규칙에 따라 코드만 작성하면 됨
CSR(React.js) || SSR(Next.js)
😺CSR(Client-Side-Rendering) : 클라이언트 측에서 UI 빌드하는 방식
👍 장점
- 초기 로드만 완료되면 이후 렌더링이 빠르다.
- 서버에 요청할 것이 없어 서버 부담이 적다.
- Web Applications에 좋다.
👎 단점
- SEO에 좋지 않다. (초기에 빈 HTML 파일을 봇이 데이터 수집하기 어려움)
- 초기 로드가 오래 걸린다.
- 외부 라이브러리가 필요한 경우가 많다.
👏 정리
- 즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다.
😺SSR(Server-Side-Rendering) : 서버에서 랜더링하는 방식
👍 장점
- SEO에 좋다. (HTML 파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능)
CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.
- 초기 로딩 속도가 빠르다.
- Static sites에 좋다.
👎 단점
- 서버에서 전체 앱을 미리 렌더링하기 때문에 컴포넌트 로딩이 오래 걸리면 유저는 빈 화면을 볼 수도 있다. -> 먼저 보여줄 화면을 보내줄 수도 있음
- 서버에 매번 요청하기 때문에 서버 부하가 크다. (view 변경 시 요청)
- 페이지를 요청할 때마다 새로고침되어 UX가 다소 떨어진다.
👏 정리
- 즉. 서버에서 이미 '렌더 가능한' 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다. (HTML, CSS는 미리 랜더링됨)
👽 사용 권장 예시
-
SSR을 사용 권장
- 네트워크가 느릴 때 😓
(CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠불러오기 때문)
- SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때.
- 최초 로딩이 빨라야하는 사이트를 개발 할 때
- 메인 스크립트가 크고 로딩이 매우 느릴 때
- CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다. -
CSR을 사용 권장
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때.
(로딩창을 띄울 수 있는 장점이 있다.)
- 메인 스크립트가 가벼울 때
- 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때. (아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리함.)
출처 :
1) https://gyyeom.tistory.com/56
2) https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4
winwin