Next.js : React 라이브러리의 프레임워크
- SSR 제공
- 검색 엔진 최적화
- 직관적인 페이지 기반 라우팅
- 빠른 페이지 전환
- 코드 분할
SSR(Server Side Rendering): 클라이언트(브라우저)에 응답하는 방식
장점
검색 엔진 최적화 가능 : 페이지가 로딩될 때 데이터도 함께 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문에한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다.
단점
페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에 서버 부하가 CSR보다 많다.
React에서 SSR을 구현할 경우 코드와 구조가 복잡해질 수 있다.
CSR(Client Side Rendering): 사용자의 요청마다 페이지를 구성
장점
데이터 요청이 있을 때만 서버에 요청 하기 대문에 서버에 부담이 적다.
단점
모든 JS파일을 다운 받아와야 하기 때문에, 서비스 규모가 커질경우 초기에 로드가 오래 걸린다.
초기 로딩에 빈 HTML을 보내기 때문에 검색 엔진 최적화에 불리하다.
출처
https://whitemackerel.tistory.com/m/59
NextJS 란?
더보기 💡 React에서 SSR(Server Side Rendering)을 쉽게 하기 위해 만들어진 프레임워크입니다. 😄 0. SSR 과 CSR 에 관하여 우선, SSR에 대한 간단한 설명과 그리고, CSR 과의 차이점을 알아보겠습니다 SSR(S
whitemackerel.tistory.com
https://carpet-part1.tistory.com/296
SSR과 CSR 비교
SSR(server side rendering) SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 JSP/Servlet의 아키텍처에서 이 방식을 사용함 SSR을 사용하면 모든 데이터가 매
carpet-part1.tistory.com
'Development > React.js' 카테고리의 다른 글
| React-Query (0) | 2022.03.30 |
|---|---|
| Next.js - pages와 layout (0) | 2022.03.28 |
| Redux (0) | 2022.03.24 |
| 상태관리 라이브러리 (0) | 2022.03.24 |
| Styled Components (0) | 2022.03.24 |