[Next.JS] 1. Next.JS와 SSR

Next.js의 SSR(Server-Side Rendering)과 SEO 최적화

웹 개발의 트렌드가 변화함에 따라 사용자 경험과 성능, 그리고 SEO(Search Engine Optimization, 검색 엔진 최적화)의 중요성이 점점 더 부각되고 있습니다. 이 중에서도 Next.js는 이러한 문제를 해결하는 데 최적화된 프레임워크로 많은 주목을 받고 있습니다. 특히 SSR(Server-Side Rendering)을 통해 더 빠른 렌더링 속도와 뛰어난 SEO 성능을 제공하는 것이 큰 장점입니다.

 

SSR이란?

SSR은 Server-Side Rendering의 약자로, 클라이언트가 웹 페이지에 처음 접속할 때 서버에서 HTML을 미리 생성하여 클라이언트에게 응답해주는 방식입니다. 일반적인 클라이언트 사이드 렌더링(CSR)에서는 브라우저가 자바스크립트를 다운로드하고 해석할 때까지 기다려야 하지만, SSR을 사용하면 이러한 대기 시간이 없어집니다.

 

SSR의 장점

1. 빠른 렌더링 속도: SSR을 사용하면 사용자가 웹 페이지에 접속했을 때 즉시 콘텐츠를 볼 수 있습니다. 특히 모바일 환경이나 저사양 기기에서도 빠른 응답 속도를 경험할 수 있습니다.
2. SEO 최적화: 검색 엔진 크롤러는 자바스크립트를 실행하지 않고 HTML만 읽는 경우가 많습니다. SSR을 사용하면 서버에서 미리 렌더링된 HTML을 제공하기 때문에 검색 엔진에 최적화된 웹 페이지를 제공할 수 있습니다.

 

SSR의 단점

1. 서버 부하: 클라이언트 사이드 렌더링에 비해 서버에서 모든 페이지를 매번 렌더링해야 하기 때문에 서버의 부하가 커질 수 있습니다.
2. 페이지 전환 시 깜빡임: SSR을 사용할 때 페이지 전환 시 화면이 깜빡이는 문제가 발생할 수 있습니다. 이를 해결하기 위해 클라이언트 사이드에서 페이지 전환을 처리하는 방식도 함께 고려할 수 있습니다.

 

 

Next.js 설치 및 기본 구조

Next.js는 npx create-next-app@latest 명령어로 자동 설치할 수 있으며, 수동으로 설치하려면 필요한 패키지를 직접 설치해야 합니다.

npm install next@latest react@latest react-dom@latest

설치 후 `package.json` 파일에 다음 스크립트를 추가합니다:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

주요 스크립트

- dev: 개발 모드에서 Next.js 애플리케이션을 실행합니다.
- build: 프로덕션 환경에 배포할 수 있도록 애플리케이션을 빌드합니다.
- start: 프로덕션 모드에서 Next.js 서버를 시작합니다.
- lint: Next.js의 내장된 ESLint 설정을 실행합니다.

 

파일 시스템 기반 라우팅

Next.js는 파일 시스템 기반 라우터를 사용합니다. 즉, 폴더 구조에 따라 경로가 자동으로 생성됩니다. 예를 들어 `pages/about.tsx` 파일을 만들면 `/about` 경로로 접근할 수 있습니다.

또한, `Link` 컴포넌트를 사용하면 클라이언트 사이드 네비게이션을 지원하여 성능을 더욱 향상시킬 수 있습니다. 아래는 Link 컴포넌트를 사용하는 예시입니다:

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <Link href="/about">About</Link>
    </div>
  );
}

Next.js의 랜더링 방식

Next.js는 SPA(Single Page Application) 형태를 기본으로 하고, 다양한 렌더링 방식(SSR, SSG, ISR 등)을 지원합니다.

1. 서버 사이드 렌더링(SSR)

SSR은 클라이언트의 요청에 따라 서버에서 실시간으로 페이지를 렌더링하여 응답하는 방식입니다. 사용자에게 최신 상태의 데이터를 항상 제공할 수 있어 실시간 데이터 처리가 중요한 웹 애플리케이션에서 유용하게 사용됩니다. 

SSR의 장점

- 실시간 데이터 제공: 매 요청마다 최신 데이터를 반영한 HTML을 생성하여 사용자가 항상 최신 상태를 볼 수 있습니다.
- SEO에 유리: 서버에서 미리 렌더링된 HTML을 제공하므로 검색 엔진 최적화에 매우 유리합니다.
- 캐싱 가능: 결과를 캐시하고 후속 요청에 재사용할 수 있어 성능이 향상되고 서버 비용이 절감될 수 있습니다.

SSR의 단점

- 비교적 느린 성능: 매 요청마다 서버에서 렌더링을 수행하기 때문에 정적 페이지를 미리 빌드해두는 방식(SSG, ISR)보다 느릴 수 있습니다.
- 서버 과부하: 사용자가 많아지면 서버의 부하가 증가할 수 있습니다.

결론

Next.js는 SEO와 성능 최적화를 위한 SSR 기능을 지원하여 현대 웹 개발에서 중요한 역할을 하고 있습니다. 서버 사이드에서 미리 렌더링된 페이지를 제공함으로써 빠른 렌더링 속도와 SEO 최적화를 쉽게 구현할 수 있습니다. 또한, SSR, SSG, CSR 등 다양한 렌더링 방식을 지원하여 유연한 웹 애플리케이션 개발이 가능하므로, 프로젝트에 적합한 방식으로 선택해 사용할 수 있습니다.