요즘 프론트엔드 개발자로 취업하려먼 어떤걸 공부해야 하나요? 라고 물었을때 Next.js 가 나온다.
Next.js는 무엇이며 사용하는 이유는 무엇일까?
Next.js 공식 홈페이지에 있는 문구이다. 웹을 위한 리액트 프레임워크로, 세계적으로 큰 기업들이 사용하는 Next.js 를 사용하면 리액트 컴포넌트 기능을 통해 높은 품질의 웹 애플리케이션을 만들 수 있다고 적혀 있다.
Next.js 의 가장 기본적인 특징은 SSR (Server Side Rendering) 의 지원이다.
React 의 경우, JS 를 기반으로 만들어진 라이브러리이기 때문에 JS 를 다운로드 받은 후에 브라우저에서 JS 가 실행되어야 화면에 UI 가 표시된다. 이러한 방식을 클라이언트 쪽에서 렌더링을 한다고 하여 CSR (Client Server Rendering) 이라고 하는데, React 가 기본적으로 CSR 을 사용하고 있다. 그렇다면, 왜 사람들은 CSR 과 더불어 SSR 를 사용하고자 할까?
아래 간략하게 CSR 과 SSR 에 대해 짚고 넘어가자.
✨ CSR
Client Server Rendering 의 약자.
SSR 과 달리, 클라이언트 쪽에서 렌더링이 이루어진다.
즉, 서버는 요청을 받으면 클라이언트에 HTML 과 JS 를 보낸다. 그것을 받은 뒤 클라이언트에서 렌더링을 시작하는 것이다.
아래의 사진을 통해 CSR 의 단계를 설명하겠다.
-
User 가 Website 요청
-
서버에서 HTML 파일, JS 로 접근할 수 있는 링크를 클라이언트에게 전송
-
브라우저는 HTML 을 파싱하고 DOM 을 구축
-
브라우저는 CSS, JS 리소스를 다운로드, 그 후 웹 페이지와 텍스트, 이미지, 버튼, 스타일과 같은 필수 요소를 렌더링
-
다운로드 한 JS가 실행되고 데이터를 위한 API, 애니메이션, 양식 검증 등이 호출
-
API 로부터 받아온 데이터를 양식창에 넣고 입력하면 상호작용이 가능
✅ 참고 1-4번: 서버에서 별다른 처리없이, 클라이언트로 보내주기 때문에 JS 는 모두 다운로드가 되고 해당 다운로드가 끝나기 전까지 사용자는 볼 수 있는게 없다...!
✨ SSR
Server Side Rendering 의 약자
말 그대로 서버 쪽에서 렌더링을 모두 끝내놓고 클라이언트에게 전달하는 방식이다.
서버에서 이미 준비를 끝마친 상태에서 클라이언트에게 전송하기 때문에 JS 가 다운로드 되는 동안 User 는 웹 페이지에서 다른 것들을 보고 있을 수 있다.
동일하게 아래의 사진을 통해 SSR 의 단계를 설명하겠다.
-
User 가 Website 요청
-
서버가 요청을 수신한 후, 해당 페이지에 필요한 데이터를 검색하고 해당 데이터를 (즉시 렌더링 가능한) HTML 템플릿에 채움
-
브라우저에 전달되는 순간, 렌더링 준비가 모두 끝났기 때문에 HTML 은 즉시 렌더링 진행
(그러나, 사이트 자체는 조작 불가능 - JS 가 읽히기 전) -
브라우저에서 JS 를 다운로드
다운로드 받는 동안, User 는 컨텐츠 열람은 가능하지만 사이트 조작은 아직 불가능 (이때, 사용자 조작을 기억) -
브라우저가 JS 프레임워크 (React, Vue, Next.js etc...) 를 실행
-
JS 까지 컴파일 됐으므로 기억해뒀던 사용자 조작이 실행, 웹 페이지의 모든 기능이 상호작용 가능
✨ CSR vs SSR
1. 웹페이지 로딩 시간
웹페이지의 로딩에는 두 가지의 종류가 있다.
1️⃣ 웹 사이트의 가장 첫번째 페이지를 로딩
2️⃣ 나머지를 로딩
1️⃣ 의 경우
- CSR 은 HTML, CSS 와 모든 스크립트를 한번에 불러온다. 반면 SSR 은 필요 부분의 HTML, 스크립트만 불러오기 때문에, 이 경우에는 SSR 이 더 빠르다.
2️⃣ 의 경우
- 첫 페이지 로딩 후, 해당 사이트의 다른 페이지로 이동한다고 가정했을 때 CSR 은 이미 첫 페이지를 로딩 하면서 다른 곳에 구성된 코드도 가져왔기 때문에 빠를 것이다. 반면, SSR 은 첫 페이지를 로딩한 과정을 다른 곳에서도 마찬가지로 같은 과정을 반복한다. 따라서, 이 경우에는 CSR 이 더 빠르다.
2. 사용 예시
1️⃣ SSR 사용
- 네트워크가 느릴 때 (하나씩...조심조심...)
- SEO (Search Engine Optimization: 검색 엔진 최적화) 가 필요할 때
- 최초 로딩이 빨라야 하는 사이트를 만들 때
- 메인 스크립트가 커서 로딩이 느릴 때
- 웹 사이트가 상호작용이 많이 없을 때
✅ 참고: renderToStrng 은 React 에서 SSR 을 구현할때 사용하는 메소드인데, 이게 실행될 동안 서버가 멈춘다고...
2️⃣ CSR 사용
- 네트워크가 빠를 때
- 서버 성능이 좋지 않을 때
- 유저에게 보여줘야 할 데이터 양이 많을 때 (로딩창을 띄울 수 있다)
- 메인 스크립트가 가벼울 때
- SEO ? 그런거 모를 때
- 상호작용할 것들이 많을 때 (아예 렌더링이 되지 않아 사용자의 행동을 막아버리는 것이 경험에 오히려 유리)
⚡️ 결론
앞서 이야기했듯 Next.js 는 React 를 사용하는 개발자들에게 SSR 을 지원하고, 그와 더불어 SEO, 성능, 개발 편의성을 모두 고려한 프레임워크로써 보다 쉽게 웹사이트와 애플리케이션을 만들 수 있기 때문이 아닐까 한다.
그 외에도 라우팅이 편리하거나 TypeScript 와의 통합이 용이하기도 하니 많은 개발자들이 선호할 수밖에 없지 않을까 싶다.
