Next.js의 렌더링 방식 이해:

• 렌더링 정의: React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 과정
• 일반 React 애플리케이션 (Create React App):
  • 클라이언트 사이드 렌더링 (CSR): 모든 렌더링 작업이 브라우저에서 이루어진다
  • 단점:
    • 초기 로딩 시 빈 화면이 나타나며, JavaScript 파일이 모두 로드되고 실행되어야 UI가 표시된.
    • JavaScript를 비활성화한 경우 UI가 표시되지 않는다
    • SEO에 불리하며, 검색 엔진에 빈 페이지로 인식될 수 있다
• Next.js 애플리케이션:
  • 서버 사이드 렌더링 (SSR): 초기 렌더링이 서버에서 수행되어 완성된 HTML이 브라우저에 전달된다
  • 장점:
    • 브라우저는 즉시 UI를 표시할 수 있으며, JavaScript 로드를 기다릴 필요가 없다
    • JavaScript를 비활성화해도 기본적인 UI가 표시된다
    • SEO에 유리하며, 검색 엔진이 실제 콘텐츠를 크롤링할 수 있다
• 클라이언트 컴포넌트와 서버 컴포넌트:
  • 'use client'를 선언한 컴포넌트도 초기에는 서버에서 렌더링 된다
  • 'use client'는 해당 컴포넌트가 클라이언트 사이드에서 상호작용이 가능하도록 설정하는 것이지, 서버 사이드 렌더링을 막는 것이 아니다
  • 모든 컴포넌트는 최초에 서버에서 HTML로 변환되며, 이후 클라이언트에서 필요한 경우 상호작용을 위해 JavaScript가 로드된다

SEO란?

SEO는 Search Engine Optimization의 약자로, 한국어로는 검색 엔진 최적화라고 한다. 이는 웹사이트가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위에 오를 수 있도록 사이트의 구조나 콘텐츠를 최적화하는 과정을 의미한다

왜 SEO가 중요한가?

• 가시성 증가: 높은 검색 엔진 순위는 더 많은 유기적 트래픽을 유도한다
• 신뢰성 향상: 사용자들은 검색 결과 상위에 위치한 사이트를 더 신뢰하는 경향이 있음
• 비용 효율성: 유료 광고 없이도 지속적인 트래픽 유입이 가능하다

Next.js와 SEO의 관계:

• 서버 사이드 렌더링(SSR): Next.js는 기본적으로 SSR을 지원하여, 초기 HTML 콘텐츠를 서버에서 렌더링해 브라우저에 전달한다
• 검색 엔진 크롤러 친화적: SSR로 생성된 HTML은 검색 엔진 크롤러가 쉽게 읽고 인덱싱할 수 있어 SEO에 유리하다
• 빠른 로딩 시간: 초기 로딩 속도가 빨라 사용자 경험이 향상되며, 이는 SEO에 긍정적인 영향을 미친다

클라이언트 사이드 렌더링(CSR)과의 비교:

• CSR은 초기 로딩 시 빈 HTML을 제공하고, 브라우저에서 JavaScript를 실행하여 콘텐츠를 생성한다
• 이로 인해 검색 엔진이 콘텐츠를 제대로 인식하지 못할 수 있으며, 로딩 시간도 길어져 SEO에 불리하다