[Next.js] - CSR과 SSR 비교 및 CSR의 단점 보완 방법

CSR과 SSR 비교 및 CSR의 단점 보완 방법

우선 SPA와 MPA에 대해서 알아보자

1. SPA와 MPA의 기본 개념

1️⃣ SPA (Single Page Application)

하나의 페이지로 구성된 웹 애플리케이션입니다. 페이지 전환 시 화면이 깜빡이지 않고, 새로운 페이지를 요청할 때 서버로부터 필요한 데이터만 전달받아 렌더링합니다.
즉, CSR(Client-Side Rendering) 방식을 사용합니다.

2️⃣ MPA (Multi Page Application)

전통적인 웹 애플리케이션 방식입니다. 페이지 전환 시마다 서버에서 새로운 HTML을 받아와 전체 페이지를 새로 렌더링합니다. 이때 페이지가 깜빡일 수 있으며, SSR(Server-Side Rendering) 방식을 사용합니다.

---

2. CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)의 차이

CSR과 SSR은 어디서 페이지를 렌더링하느냐 ?에 따라 구분됩니다.

1️⃣ CSR (Client-Side Rendering)

클라이언트 측에서 JavaScript로 페이지를 동적으로 생성하여 렌더링하는 방식입니다. React, Vue, Angular 등의 프레임워크가 대표적으로 CSR을 사용합니다.
서버는 기본적인 HTML 파일만 전달하고, 그 이후 클라이언트가 나머지 작업을 처리합니다.

2️⃣ SSR (Server-Side Rendering)

서버에서 HTML을 렌더링한 후 클라이언트에게 전달하는 방식입니다. PHP, JSP 등이 SSR 방식을 대표합니다.
즉, 요청할 때마다 서버에서 완전히 렌더링된 HTML을 전달하여 페이지를 보여줍니다.

---

3. SPA === CSR, MPA === SSR 인가요?

아닙니다. SPA는 주로 CSR을 사용하지만, SPA도 SSR을 적용할 수 있습니다. 예를 들어, React나 Vue 같은 SPA 프레임워크에서도 서버 측에서 미리 렌더링된 HTML을 제공할 수 있습니다. 반대로, MPA는 주로 SSR을 사용하지만 CSR을 적용한 페이지도 존재할 수 있습니다.

즉, SPA와 CSR, MPA와 SSR의 개념은 완전히 일치하지 않습니다. 이는 페이지의 구성 방식과 렌더링 방식의 차이입니다.

---

4. CSR과 SSR의 장단점

CSR의 장점과 단점

장점

1. 빠른 페이지 전환
   초기 로딩 이후에는 페이지 일부만 변경되므로, 서버에 데이터만 요청하여 빠르게 화면을 갱신할 수 있습니다.
2. 서버 부하 감소
   클라이언트 측에서 연산을 수행하기 때문에 서버의 부담이 줄어듭니다.
3. 좋은 UX
   빠른 페이지 전환과 사용자 인터랙션 덕분에 사용자가 느끼는 경험(UX)이 우수합니다.

단점

1. 초기 로딩 속도 느림
   클라이언트에서 동적으로 페이지를 만들기 때문에, 초기 로딩 시 JavaScript 파일을 다운로드하고 실행하는 데 시간이 걸립니다.
2. SEO 최적화 불리
   웹 크롤러가 실행하는 JavaScript를 처리하지 못하기 때문에 검색 엔진에 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.
3. 초기 화면 지연
   사용자는 페이지를 클릭하더라도, JavaScript가 로드되기 전까지 화면이 비어 있을 수 있습니다.

SSR의 동작 과정과 특징

SSR의 장점과 단점

장점

1. 빠른 초기 렌더링
   HTML 파일에 모든 데이터가 담겨져 있어, 사용자는 바로 콘텐츠를 볼 수 있습니다. JS 파일 로딩 전에 화면이 표시됩니다.
2. SEO 최적화 유리
   완전한 HTML을 제공하기 때문에 검색 엔진이 페이지를 쉽게 크롤링하고 인덱싱할 수 있습니다.

단점

1. 반응 속도 지연
   JavaScript 파일이 로드되기 전까지 사용자의 인터랙션에 대한 응답이 지연될 수 있습니다.
2. 서버 부하
   매번 서버에서 새로운 페이지를 생성해야 하기 때문에 서버에 부담이 큽니다.

장단점 정리

---

5. CSR의 단점 보완 방법

CSR의 가장 큰 단점은 초기 로딩 속도가 느리다는 점과 SEO 최적화가 어려운 점입니다. 이를 해결하기 위해 몇 가지 방법을 사용할 수 있습니다.

1. 초기 로딩 속도 개선 방법

• 코드 스플리팅 (Code Splitting)
  필요한 부분의 JavaScript만 로드하여 초기 로딩 속도를 개선하는 방법입니다. Webpack이나 ES6의 import() 기능을 사용하면 동적으로 필요한 부분만 로드할 수 있습니다.
• Lazy Loading
  초기 로딩 시 필요한 리소스만 우선 로딩하고, 나머지 리소스는 나중에 로딩하는 방식입니다. 이미지나 비동기적으로 로딩 가능한 데이터를 나중에 받아오게 설정할 수 있습니다.

2. SEO 최적화 보완

• 동적 렌더링 (Dynamic Rendering)
  웹 크롤러가 방문했을 때만 서버에서 미리 렌더링된 HTML을 제공하고, 일반 사용자는 CSR 방식으로 처리하는 방식입니다. Google은 이러한 동적 렌더링을 허용하고 있습니다.
• 프레임워크 활용
  Next.js와 같은 프레임워크는 CSR과 SSR의 장점을 결합하여 초기 로딩 속도와 SEO 문제를 해결합니다. Next.js를 사용하면, 클라이언트에서 수행해야 할 작업을 서버에서 처리하고 HTML을 먼저 전달하여 검색 엔진에 친화적인 페이지를 구성할 수 있습니다.

---

이처럼 CSR은 현대 웹 애플리케이션에서 많이 사용되는 방식이지만, 그 단점을 해결하기 위한 다양한 방법이 존재합니다. 개발 환경에 맞는 최적의 방법을 찾아 SEO와 퍼포먼스를 모두 개선해 나가는 것이 중요합니다.