[Next.js] SSR + CSR

SSR + CSR

→ 사용자가 동일 사이트 내에서 url 을 이동하여도 서버에서 새로운 html 을 내려 받지 않고 클라이언트에서 렌더링을 하기 때문에 화면 깜빡임 없이 앱과 같은 사용자 경험을 제공해주는 장점

→ 번들링된 js 의 파일의 크기가 크기 때문에 사용자가 웹사이트를 처음 접속할 때에 interaction할 수 있는 데 까지 시간이 오래걸리는 단점

→ 해당 문제는 code splitting 이라는 URL 마다 각각의 번들링된 js 파일을 나누어 만드는 방법으로 단점을 보완할 수 있다.

→ SEO 대응이 어렵다는 단점, 검색봇들이 html 기반으로 요소를 찾는데, CSR은 html이 거의 비어있으므로 검색에 잘 노출되지 않는다는 단점

→ 이를 대응하기 위해 첫 페이지는 서버 사이드 렌더링을 하고 이후 라우팅은 클라이언트 사이드 렌더링 방식 고려

→ 첫 페이지만 html 이 채워져있는 방식

→ code splitting 또는 위 방식을 리액트만으로 구현이 가능하지만 러닝커브가 높다

→ next.js 를 이용하면 편리하게 구현 가능 (SSR + CSR)

→ 첫 페이지 url 접속 시 기본적으로 SSR 방식으로 제공

→ CSR 은 next/link 또는 next/router 로 구현 가능

SPA

사용자가 하나의 페이지에 머무르면서 필요한 데이터를 서버에서 받아와서 부분적으로만 업데이트

웹 사이트의 사용성 증가, 앱과 같은 사용자 경험 제공

React, Angular, Vue

Library & Framework

흐름 제어의 권한을 가지고 있는지의 여부차이