Intro
싸피에 입과해 React 기반으로 두 번의 프로젝트를 진행하며, 다음 프로젝트는 SSR을 위해 Next.js를 사용해보고 싶었다.
그리고 Next.js를 공부하며 내 생각보다 훨씬 기능이 편리해서 놀랐다.
이전에 React를 사용하며 느꼈던 불편한 점들을 개선하기 위해 노력했던 부분들이, 이미 Next.js에는 기능으로 녹여져있었다.
정말 많은 기능들이 설명하기 앞서, 기본 개념을 정리하고 가는 것이 중요한 것 같다.
가장 인상 깊었던 Hydration 정리에 앞서 브라우저의 렌더링에 대해 먼저 정리해보겠다.
1. HTML
20년 정도 됐을까? 내가 초등학생일 때, 방과후 수업을 들으며 메모장으로 웹 사이트를 만들었던 기억이 어렴풋이 있다.
첫 수업 이후로, 그 수업을 더 듣지는 않아서 어떤 커리큘럼이 있었는지는 모르겠지만 그 때가 나의 첫 개발이었다.
저는 옛날에 HTML 개발자였습니다!
다시 15년 정도 시간이 흘러 한창 패션업계에서 일하고 있을 때, 한국에 개발자 붐이 불었다.
'개발이란 무엇일까'라는 마음에, 지금도 너무 유명한 생활코딩 Web1을 보며 Atom 에디터로 초등학교 때 배웠던 수업을 또 한 번 반복했다.
이처럼 웹을 만드는 가장 기본적인 방법은 HTML과 CSS를 브라우저에 전달해 화면을 구성하는 방식이다.
2. 서버 사이드 렌더링과 클라이언트 사이드 렌더링
정적인 웹 페이지를 만드는 것을 넘어, JavaScript의 등장으로 동적 웹사이트가 등장했다.
그리고 이는 두 가지 렌더링 방식을 가져왔다.
2.1 서버 사이드 렌더링(SSR)
SSR은 서버에서 HTML 문서를 생성하고 클라이언트에 전달하는 방식이다.
이를 통해 클라이언트의 페이지(URL) 이동에 따라, 정해진 페이지를 동적으로 렌더링한다.
이렇게 동작하는 웹을 Multiple Page Application (MPA) 라 한다.
동작 방식
- 사용자가 웹사이트에 접속하면 서버는 필요한 데이터를 모두 가져온다
- 서버에서 HTML을 생성하고 완성된 페이지를 클라이언트로 전송한다
- 브라우저는 전달받은 HTML을 렌더링한다
- 이후 JavaScript가 로드되면서 이벤트 핸들러 등이 연결된다
장점
- 초기 로딩 속도가 빠르다 (FCP가 빠름)
- 검색 엔진 최적화(SEO)에 유리하다
단점
- 서버 부하가 높다
- 자바스크립트를 통한 상호작용화(TTI)가 느릴 수 있다
- 페이지 이동 시 전체 페이지를 다시 로드해야 한다
2.2 클라이언트 사이드 렌더링(CSR)
SSR은 서버에서 HTML을 만들어주기 때문에, 서버 리소스를 많이 사용한다.
또한 페이지 이동 시 HTML을 불러와야하기에, 전체 페이지를 로딩해야해서 사용자 경험이 매끄럽지 못하다는 단점이 있다.
CSR은 SSR과는 달리, 최초에 페이지 전체를 로딩한 뒤, 자바스크립트를 통해 사용자가 요청하는 컨텐츠만 동적으로 렌더링한다.
그리고 이렇게 동작하는 웹을 Single Page Application (SPA) 라 한다.
CSR과 SPA는 아주 밀접한 관계지만, 모든 CSR이 SPA에서만 되는건 아니기 때문에 같은 개념으로 보기는 어렵다.
동작 방식
- 브라우저가 최소한의 HTML 페이지와 JavaScript를 다운로드
- JavaScript가 실행되면서 필요한 데이터를 서버에서 가져옴
- JavaScript로 DOM을 조작하여 콘텐츠를 렌더링
장점
- 서버 부하가 적다
- 페이지 전환이 빠르고 부드럽다
- 풍부한 사용자 경험을 제공할 수 있다
- 클라이언트-서버 간 데이터 전송량이 적다
단점
- 초기 로딩 시간이 길다
- SEO에 불리하다
- JavaScript가 비활성화된 환경에서는 작동하지 않는다
2.3 다시 SSR이 필요해진 이유
React, Angular, Vue, Svelte와 같은 프레임워크의 등장과 함께 CSR이 본격적으로 도입됨과 동시에, CSR의 한계점이 보이기 시작했다.
- 초기 로딩 성능 문제: 대규모 애플리케이션의 경우 JavaScript 번들 크기가 커져 초기 로딩이 느려진다
- SEO 문제: 검색 엔진이 JavaScript를 실행하지 않으면 콘텐츠를 제대로 인덱싱할 수 없다
- 성능 최적화의 어려움: 번들 크기 관리, 코드 스플리팅 등 추가적인 최적화 작업이 필요하다
3. 하이브리드 프레임워크
이러한 한계를 극복하기 위해 Next.js(React) 와 Nuxt.js(Vue) 같은 하이브리드 프레임워크가 등장했다.
개발자는 페이지별로 SSR, CSR, 정적 생성(SSG) 을 필요에 따라 선택할 수 있게 되었다.
3.1 하이브리드 렌더링의 장점
- 유연한 렌더링 전략: 페이지별로 SSR, CSR, SSG를 선택적으로 적용 가능하다
- 성능 최적화: 자동 코드 스플리팅, 이미지 최적화, 증분적 정적 재생성(ISR) 등 성능을 위한 다양한 기능을 제공한다
3.2 Next.js의 렌더링 방식
Next.js는 다음과 같은 렌더링 방식을 제공한다.
클라이언트 사이드 렌더링 (CSR): 필요한 경우 클라이언트에서 데이터 페칭을 하며 SPA처럼 동작서버 사이드 렌더링 (SSR): 요청 시점에 서버에서 페이지를 생성, 최신 데이터를 제공정적 사이트 생성 (SSG): 빌드 시 HTML을 생성해 성능이 뛰어나고, CDN 캐싱에 적합증분적 정적 재생성 (ISR): 주기적으로 정적 페이지를 재생성해 SSG와 SSR의 장점을 결합
마무리
웹 개발의 패러다임은 계속해서 변화하고 있다. SSR에서 CSR로, 그리고 다시 SSR의 장점을 살린 하이브리드 방식으로 발전해왔다.
더 나은 사용자 경험과 개발자 경험을 위한 자연스러운 진화 과정 속 Next.js와 같은 프레임워크는 이러한 발전 과정의 결과물이며, 각 렌더링 방식의 장단점을 이해하고 적절히 활용하는 것이 가장 중요하다.