[Next] Nextjs에 대해 알아보기

1. Next.js란?

Next.js는 React를 기반으로 한 웹 개발 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원합니다. 이를 통해 성능 향상과 검색 엔진 최적화(SEO)를 극대화하며, 개발자가 쉽게 React 애플리케이션을 구축하고 배포할 수 있도록 다양한 기능을 제공합니다.

2. 렌더링 방식: SSR vs CSR

• 서버사이드 렌더링(SSR): 사용자가 페이지를 요청하면 서버가 HTML을 생성해 전달하는 방식입니다. 페이지 초기 로딩 시 서버에서 데이터를 가져오기 때문에 콘텐츠를 빠르게 볼 수 있고, SEO에 유리합니다.

• 클라이언트사이드 렌더링(CSR): 사용자의 브라우저가 JavaScript로 HTML을 생성하는 방식입니다. 초기 로딩 시 모든 JavaScript 파일을 다운로드 및 실행해야 해서 느릴 수 있지만, 페이지 전환이 빨라져 사용자 경험이 향상됩니다.

3. Next.js의 프리렌더링 방식

Next.js는 두 가지 주요 프리렌더링 방식을 지원합니다:

• 정적 생성(Static Generation, SSG): 빌드 시 HTML 파일을 미리 생성하여 저장하는 방식으로, 빠른 로딩과 서버 자원 절약이 가능해 주로 블로그, 문서 사이트 등에서 활용됩니다.

• 서버사이드 렌더링(SSR): 페이지가 요청될 때마다 서버에서 최신 데이터를 반영해 HTML을 생성하는 방식으로, 동적인 데이터가 필요한 페이지에 적합합니다.

프리렌더링 기능은 성능과 사용자 경험을 최적화하는 데 기여합니다.