[웹] SSR vs CSR 그리고 Next.js

SSR(Server Side Rendering)

특징

Server Side Rendering 과정

1. User가 웹사이트에 요청을 보냄
2. 서버에서 즉시 렌더링 가능한 html 파일을 만듦
3. html은 렌더링되지만 사이트 자체 조작은 불가 (Viewable but non-interactable)
4. 자바스크립트 다운
5. 다운 받는 동안 컨텐츠는 viewable 하기때문에 사용자 조작을 기억해놓는다
6. 브라우저가 js framework를 실행
7. js까지 성공적으로 컴파일 되면 기억하고 있던 사용자 조작이 실행되고 viewable and interactable 해짐

브라우저 화면의 차이에 집중해보자

장단점

장점

• 첫 페이지 로딩시간이 평균적으로 SSR이 더 빠름, SSR은 필요한 부분의 html과 스크립트만 불러오기 때문
• SEO 대응에 용이 : 검색 엔진이 자동화된 로봇인 '크롤러'로 웹사이트를 읽을 때 데이터가 모두 불러와져있으므로 크롤러에 대응하기 용이하다

단점

• 첫 페이지 외 나머지 로딩시간은 SSR이 더 느림, CSR은 이미 첫 페이지 로딩 시 나머지 부분을 구성하는 코드도 받아왔지만, SSR은 첫 페이지 로딩 과정을 정확히 다시 실행하기 때문
• 서버 자원을 더 많이 사용

CSR(Client Side Rendering)

특징

Client Side Rendering 과정

1. User가 웹사이트에 요청을 보냄
2. *CDN이 html 파일과 JS에 접근할 수 있는 링크를 클라이언트로 보냄(엔드유저와 물리적으로 가까운 위치에서 사용자에게 콘텐츠를 제공할 수 있음) 
3. 클라이언트가 html과 JS를 다운 받는데 SSR과 달리 invisible 함.
4. 브라우저가 js 다운
5. js가 실행되고, 데이터를 위한 API호출 (user들은 placeholder를 볼 수 있음)
6. 서버가 api로부터 요청에 응답
7. api로부터 받아온 data로 placeholder를 채움 (interactable)

*CDN : CDN은 사용자 위치 등을 기준으로 콘텐츠를 엔드 유저에게 전송할 수 있는 분산 노드로 구성된 네트워크

브라우저가 react를 실행해서 js가 모두 다운로드 되고 실행되기 전까지 사용자는 invisible함

• csr은 react,vue 등의 SPA(Single Page Application)에서 쓰이는 기법임

장단점

장점

• 첫 페이지 로딩만 하면, 사이트의 다른 곳으로 이동하는 식의 동작을 할 때 필요한 데이터만 갱신하면 되기 때문에 ssr에 비해 서버부하가 덜하다는 장저이 있음

단점

• 번들된 js파일 다운로드로 첫 페이지 초기 로딩 시간, 즉 진입 속도는 느릴 수 있음(초기 진입 속도 문제는 실무에서 code splitting 이라는 기능으로 해결하기도 한다)
• 초기에 html 데이터가 없다보니 검색 봇이 해당 페이지를 빈페이지로 착각하여 SEO에 취약(구글 제외, 구글 검색 봇은 똑똑해!)

그리고 Next.js (두 렌더링 동작방식의 단물만 빼오자)

• Next.js는 첫 페이지는 ssr 방식을 차용해 seo 문제를 해결하고 다음 페이지는 csr 방식을 적용해 필요한 데이터 부분만 갱신해 서버의 부하를 줄인 것이다.
• Next.js 는 리액트의 SSR을 쉽게 구현해주는 프레임워크