[React/ Next.js] 클라이언트 사이드 렌더링 (Client Side Rendering)와 Next.js

렌더링(Renderinng) 이란? 

- 서버로부터 받은 내용을 브라우저 화면에 표시하는 것 

 

 

SSR vs CSR

SSR : Server Side Rendering

장점 

- 전통적인 방식

- 검색엔진최적화(Search Engine Optimization, SEO) 가능 -> React에서 SSR사용하기 위해 Next.js 사용 

Q. 검색엔진최적화란? 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업 

 

단점 

- 로딩속도가 많이 걸림 

- React에서 서버사이드 렌더링 구현 할 경우 Router과 Redux 함께 사용 --> 복잡해짐 

 

 

CSR : Client Side Rendering

- Client에서 렌더링 하는 방식 

- React의 경우 index.jsx만 불러오는 Single Page Application -> 사용자가 필요한 부분만 읽어들이기 때문에 빠른 Interaction을 기대할 수 있고 필요한 부분만 화면 갱신 가능 

- 검색 엔진 최적화에서 불리 

 

 

 

Next.js란 ?

- Universal 리액트 어플리케이션의 서버렌더링을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크

- typescript 지원

- Front에서 Custom Server을 만들어서 동적 라우팅을 시켜줌

- API Routes를 사용해서 프론트에서도 백엔드 커버함

- Static Optimizer -> 미리 Build 해놓은걸 사용하기 때문에 응답 속도가 많이 빨라짐

- 코드 스플리팅 서버사이드 랜더링 가능 

 

 

 

 

<출처> 

1. velopert.com/3293

2.