Next.js는 정적 렌더링과 서버 사이드 렌더링을 제공하는 React Framework다.
Next.js에서 UI 요소는 React를 통해 만들 수 있고, 그걸 바탕으로 CSR, SSR, SSG의 다양한 렌더링 방식을 이용할 수 있도록 도와준다.
CSR(Client-side Rendering)
클라이언트측(브라우저)에서 자바스크립트 파일을 통해서 콘텐츠들을 렌더링 하는 방식.
처음에는 자바스크립트 링크가 걸려있는 빈 문서를 사용자에게 보여주고 사용자와 상호작용이 이뤄지는 그 순간 그 곳에 필요한 콘텐츠들을 렌더링한다.
장점
- 필요하거나 수정된 부분의 데이터만 서버에서 받으므로, 서버 트래픽이 감소한다.
- 새로고침이 없기 때문에 부드러운 페이지 전환 등 좋은 사용자 경험을 제공할 수 있다.
단점
- 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다.
- 검색 엔진 크롤러가 정보수집을 제대로 못 한다.
SSR(Server-side Rendering)
서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링을 하는 방식을 의미한다.
즉, 서버가 화면(View)을 그리는 주체가 됨.
장점
- 초기에 html만 렌더링해서 보여주기 때문에, 초기 로딩 속도는 빠르다.
- 검색 엔진의 최적화가 가능하다. 크롤러가 잘 돌아간다.
단점
- 서버 트래픽을 사용한다. 과부화를 대비한 성능 최적화가 필요하다.
- 코드 스플리팅이나, 라우터 등의 문제로 코드가 복잡해진다.
💡 요약
CSR 사용 권장 예시
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때(ex. 대규모의 복잡한 웹 애플리케이션)
- 메인 스크립트가 가벼울 때
- SEO(Search engine Optimization) 검색 엔진 최적화가 필요 없을 때
- 웹 어플리케이션에 사용자와 상호 작용 할 것들이 많을 때
(아예 렌더링이 되지 않아 사용자의 행동을 막는것이 경험에 오히려 유리하다)
SSR 사용 권장 예시
- 네트워크가 느릴 때 (CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나누어 불러오기 때문)
- SEO(Search engine Optimization) 검색 엔진 최적화가 필요할 때
- 최초 로딩이 빨라야 하는 사이트를 개발할 때
- 메인 스크립트가 크고 로딩이 엄청 느릴 때
(CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보내지만, SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다) - 웹 사이트가 상호작용이 별로 없을 때
| CSR | SSR | |
|---|---|---|
| 초기 로딩속도 | 👎🏻 모든 JS파일을 다운 받아와야 하기 때문에 초기 로딩은 오래 걸린다. | 👍🏻 CSR에 비해 다운 받는 파일의 양이 적어 속도가 빠르다. |
| 서버 부담 | 👍🏻 data 요청이 있을 때만 서버에 요청하기 때문에 서버에 부담이 적다. | 👎🏻 서버와 잦은 응답(View 변경 시 마다) 을 하기 때문에 서버에 부담이 된다. |
| SEO | 👎🏻 맨 처음 HTML파일이 비어있어 크롤러가 데이터를 수집할 수 없거나 속도가 느리다. | 👍🏻 HTML에 대한 정보가 처음부터 포함되어 있어 크롤러가 데이터를 수집하기 용이하다. |
👨🏻💻 Front-End Developer