[Next.js] Next.js 의 특징과 SEO, CSR, SSR, SSG

📌 Next.js

Next.js는 React 기반의 프레임워크입니다.

강력한 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 제공하여, 초기 로딩 속도를 개선하고 SEO를 향상시킬 수 있습니다. 

 

✅ Next.js 를 사용하는 이유

• 서버 사이드 렌더링(SSR)
  • 초기 로딩 속도를 개선하고, SEO를 향상시킵니다.
  • 요청이 들어올 때 서버에서 React 컴포넌트를 렌더링하여 HTML을 생성 후, 클라이언트에게 전송합니다.
• 정적 사이트 생성(SSG)
  • 사전 빌드된 페이지를 제공하여 정적 HTML 파일로 생성하며, 데이터가 변경될 때마다 재빌드 할 수 있습니다.
• React 컴포넌트 기반
  • Next.js는 React 컴포넌트를 기반으로 하므로, 거대한 React 생태계를 이용할 수 있으며 컴포넌트 재사용성을 활용할 수 있습니다.
• TypeScript 지원
  • 정적 타입 검사를 통해 코드 안정성을 높이고 버그를 사전에 방지할 수 있습니다.
• Routing
  • React와 달리, 내장된 라우팅 시스템을 통해 페이지 간 이동을 관리할 수 있습니다.

---

📌 SEO 검색 엔진 최적화

SEO (Search Engine Optimization) 은 검색 엔진 최적화를 의미합니다. 

웹사이트가 검색 엔진 결과 페이지(SERP)에서 노출되고, 높은 순위를 차지할 수 있도록 콘텐츠, 구조, 링크 등을 최적화하는 프로세스를 나타냅니다. 

즉, 웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에서 노출될 수 있도록 최적화하는 과정입니다.

 

비즈니스 유형이 어떤 것이든지 간에, SEO는 가장 중요한 마케팅 유형 중 하나입니다.

검색 엔진 상위에 노출됨으로써 브랜드 윈지도와 신뢰성을 높이고, 시장에서의 경쟁력을 강화하는 데 도움을 줍니다.

---

📌 CSR - React의 렌더링 방식

React의 렌더링 방식인 CSR (Client Side Rendering) 은 클라이언트 측에서 모든 UI 렌더링을 처리하는 방식입니다.

 

✅ 동작 방식

1. 사용자: 사용자가 웹 페이지를 요청합니다.
2. CDN: 서버는 초기에 빈 HTML 파일과 JavaScript 파일을 클라이언트에게 전달합니다.
3. Client: 클라이언트는 받은 HTML을 기반으로 JavaScript 파일을 다운로드하고 실행합니다.
   1. 이때, 사용자는 화면에서 빈 페이지를 보거나, 로딩 상태를 보게 됩니다.
4. Client: JavaScript가 실행되면 API를 호출하여 서버로부터 필요한 데이터를 요청합니다.
5. Server: 서버는 API 요청에 대한 응답을 보냅니다.
6. Client: 받은 데이터를 HTML에 채워 넣어서 최종적으로 사용자에게 완성된 페이지를 보여줍니다.
7. 사용자: 이후 사용자는 페이지와 상호작용이 가능합니다.

🤔 CDN (Content Delivery Network)
전세계적으로 사용자에게 콘텐츠를 더 빠르고 안정적으로 제공하기 위해 사용되는 네트워크
콘텐츠 전송 최적화, 로드 밸런싱, 보안 강화, 캐싱, 대역폭 절감 등의 기능을 제공

 

✅ 장점

• 트래픽 감소: 초기에 필요한 HTML, JavaScript 파일 등의 리소스를 한 번에 다운로드받기 때문에, 이후 필요한 데이터만 요청하는 방식으로 네트워크 트래픽이 줄어듭니다.
• 사용자 경험: 페이지를 새로고침하지 않고 동적으로 업데이트할 수 있어, 네이티브 앱과 유사한 사용자 경험을 제공합니다.
• 적은 서버 부담: 전체 렌더링 과정을 모두 클라이언트에서 진행하기 때문에 서버에 부담이 적습니다. 
• TTV(Time To View)와 TTI(Time To Interact): 초기 로딩 이후 사용자가 콘텐츠를 보게 되는 시간(TTV), 상호작용을 시작할 수 있는 시간(TTI) 사이 간격이 매우 짧습니다. 

✅ 단점

• SEO에 불리: 초기 HTML 페이지는 빈 페이지이기 때문에, SEO에 불리할 수 있습니다.
  • 일부 검색엔진 봇들은 JavaScript를 해석하고 실행하는 데 제한이 있어, HTML에서 크롤링을 진행하게 됩니다.
  • CSR 방식은 클라이언트 측에서 페이지를 구성하기 때문에, 구성 전에는 HTML에 아무것도 없게 됩니다.
  • 따라서 검색엔진 봇들은 CSR 방식의 웹 사이트에서 데이터를 수집하지 못하기 때문에 SEO에 불리한 것입니다.
• 느린 초기 로딩 속도: 한 번에 모든 리소스를 다운로드받기 때문에 초기 로딩 속도가 느립니다.

✅ CSR을 사용해야 할 때

• 네트워크가 빠를 때 (CSR은 한번에 모든 것을 불러오기 때문)
• SEO 검색 엔진 최적화가 필요 없을 때 
• 사용자에게 보여줘야 하는 데이터가 많을 때 
• 서버 성능이 좋지 않을 때
• 사용자와 상호작용이 많을 때 (오히려 렌더링 전 사용자 조작을 막는 것이 유리하기 때문)

---

📌 SSR - Next.js의 렌더링 방식 (1)

SSR (Server Side Rendering) 은 CSR과 반대로, 서버 측에서 페이지의 렌더링 준비를 마친 상태로 클라이언트에게 전달하는 방식입니다. 

 

✅ 동작 방식

1. 사용자: 사용자가 웹 페이지를 요청합니다.
2. Server: 서버는 HTML을 생성하기 위해 필요한 데이터를 가져오고 컴파일하여, 즉시 렌더링이 가능한 완성된 HTML 파일을 생성하여 클라이언트에게 전달합니다.
3. Client: 해당 HTML 파일을 전달 받습니다.
   1. 이때, 즉시 렌더링이 이루어지고 사용자는 웹 페이지의 콘텐츠를 볼 수 있습니다.
   2. 하지만 JavaScript가 읽히기 전이기 때문에 웹 페이지 조작은 불가합니다. 
4. Client: JavaScript 파일을 다운로드하고 실행합니다.
   
   1. 이때, JavaScript 프레임워크가 초기화되며, 페이지의 동적인 부분이 생성됩니다.
5. 사용자: JavaScript가 실행되면, 사용자는 상호작용이 가능해집니다.

✅ 장점

• SEO에 유리: 서버에서 이미 완성된 HTML 파일을 전달하므로, SEO에 유리합니다.
• 초기 로딩 속도 개선: CSR과 달리 필요한 페이지의 리소스만 전달받으므로, 초기 로딩 속도가 개선됩니다.

✅ 단점

• 서버 부하: 매 요청마다 서버에서 페이지를 동적으로 생성하기 때문에 서버에 부하가 걸릴 수 있습니다.
• 페이지 이동 시 요청 시간: 페이지를 이동할 때마다 매번 API 호출하여 완성된 HTML 파일을 요청해야합니다. (Next.js에서 이 성능을 향상 시킬 수 있는 기능을 제공합니다.)
• 상호작용: 클라이언트 측에서 자바스크립트 로드 전까지 사용자 상호작용이 제한될 수 있습니다.

✅ SSR을 사용해야할 때

• 네트워크가 느릴 때
• SEO 검색 엔진 최적화가 필요할 때
• 최초 로딩이 빨라야 할 때
• 웹 사이트 상호작용이 적을 때

---

📌 SSG - Next.js 의 렌더링 방식(2)

SSG (Static Site Generation) 은 빌드 시점에 페이지를 미리 렌더링하여 정적인 HTML 파일을 생성하는 방식입니다. 

모든 페이지는 사전에 정적으로 생성되며, 클라이언트 요청 시에는 서버가 저장된 HTML 파일을 단순히 제공하는 역할을 합니다.

 

✅ 동작 방식

1. 빌드 시점에서 페이지 생성: 개발자가 웹 페이지를 빌드할 때, 모든 페이지는 미리 정적으로 생성됩니다.
2. 정적 파일 제공: 서버는 미리 생성된 HTML 파일을 클라이언트에게 제공합니다. 
   1. 이 HTML 파일들은 서버에서 미리 생성되었기 때문에 동적 데이터 처리가 필요하지 않습니다. 
3. 클라이언트 측 자바스크립트 로드: 사용자의 브라우저는 받은 HTML 파일들을 로드하고, 필요한 경우에 자바스크립트 파일을 다운로드하여 동적으로 페이지를 업데이트 할 수 있습니다. 

✅ 장점

• 캐싱 용이: 정적 페이지는 단순 HTML 파일입니다. CDN을 통해 정적 파일을 캐싱하여 더 빠르게 제공할 수 있습니다. 
• 성능 향상: 빌드 시점에 HTML 페이지를 미리 렌더링하기 때문에 페이지 로딩 속도가 빠르며, 서버 부하가 적습니다. 
• 보안과 안정성: 정적 파일을 제공하므로 보안 취약점이 줄어듭니다. 

✅ 단점

• 동적 데이터 처리 제한: 매 요청마다 업데이트되는 데이터를 실시간으로 반영하기 어렵습니다.
  • 웹 페이지를 한 번 만들고 나면 다음 배포 전까지 내용이 변하지 않습니다. 

✅ SSG를 사용해야 할 때

• 정적 콘텐츠가 많을 때 (블로그, 포트폴리오, 회사 소개 페이지 등 내용이 자주 변경되지 않을 때)
• SEO 검색 엔진 최적화가 필요할 때
• 보안과 안정성이 필요할 때
• 단기간 내 콘텐츠가 자주 업데이트 되지 않을 때

---