Section 0

SSR(서버사이드 렌더링) :

 

브라우저 -> 프론트서버 -> 백엔드 서버 -> 데이터베이스

백엔드 서버에서 받아온 데이터를 프론트서버의 HTML과 함께 브라우저에 보냄.

 

장점 : SEO최적화(검색노출), 사용자에게 빠르게 데이터를 보여줄수 있다. 

단점 : 페이지 변환속도가 느리다.  

 

 

CSR(클라이언트 렌더링) :

 

첫방문 : 브라우저 -> 프론트서버 -> 브라우저 -> 백서버 -> 데이터베이스

그 이후 : 브라우저 -> 백서버 -> 데이터베이스

첫방문시에는 브라우저에서 프론트 서버로 HTML CSS JS를 가져간후 로딩되는 와중에 다시 브라우저로 가서 백서버에다가 데이터를 요청함

그후에는 모든 프론트서버의 HTML CSS JS는 가져갓으니 데이터가 바뀌면 브라우저 백서버 데이터베이스순

 

장점 : 페이지 변환속도가 빠르다.  

단점 : SSR보다 첫화면 로딩속도가 느리다 (유저 이탈이 잘된다.)

          => code spliting 기술을 적용하여 프론트서버에서 필요한 페이지의 코드만 받아오게 한다

          특정엔진은 데이터가 없다라고 인식을 해서 검색순위가 밀릴수 있다.

          => 첫 방문만 SSR을 적용하여 SEO를 향상시킨다.

 

 

NEXT.js

 

따로 router-dom을 라이브러리를 설치 안해도 page의 폴더로 자동라우팅

NEXT의 Link를 이용해서 페이지이동처음들어갈때는 SSR처럼 그뒤로는 CSR처럼 구동되는 좋은 프레임워