[Next.js] 개념 정리 (1)

SSR

SSR의 경우 브라우저가 서버에서 데이터를 받아온 후 화면을 띄운다.

따라서 초기 로딩 속도가 빠르며, 검색 엔진 최적화에 유리하다.

​

그러나 화면 전환 시, CSR 보다 사용자가 화면을 보기까지의 시간이 오래 걸린다.

---

 

CSR

CSR의 경우 데이터를 받아올 때까지 기다리지 않고,

프론트에서 서버에 요청을 보낸 후 데이터가 없는 화면을 먼저 띄운다.

​

그 후 백엔드에서 요청한 데이터를 받아온 후,

데이터가 적용된 화면을 띄운다. 따라서 페이지 전환이 빠르다.

​

그러나 데이터를 가져오는 동안 첫 페이지를 로딩 페이지로 띄워 놓는다면,

검색 엔진이 데이터에 접근하지 못하기 때문에 그냥 나가버리는 경우가 생길 수도 있다.

(어떤 검색 엔진이냐에 따라 다르다.)

​

따라서 보통 첫 페이지는 SSR을 사용하는 경우가 많다.

(물론 검색엔진이 필요하지 않다면, SSR을 사용하지 않아도 된다.)

 

---

Next.js

Next는 React에서 SSR을 쉽게 구현할 수 있도록 도와주는 프레임워크이다.

​

react의 경우 CSR 방식을 사용하기 때문에

위에서 말한 검색 엔진 문제가 발생할 수 있다.

​

이를 해결하기 위해 첫 페이지는 SSR을 사용하고,

페이지가 이동할 땐, CSR 방식을 사용하는 경우가 많다.

​

위 과정을 쉽게 할 수 있도록 도와주는 것이 Next.js이다.

따라서 Next.js의 경우 SSR이 필요 없다면 사용하지 않는 것이 좋다.

​

예를 들어, 관리자 페이지의 경우

검색엔진에 표시될 필요가 없기 때문에 사용하지 않는 것이 좋다.

---

[Next.js] Next.js란?