NextJS를 사용한 강의를 듣기 전에 NextJs에 사전에 공부하고, 공부한 내용을 정리할 계획이다.
NextJS란?
Next.JS는 Vercel에서 개발한 React기반 프레임워크로, 빠른 성능과 SEO 최적화를 위해 서버 사이드 렌더링(SSR) 및 정적 사이트 생성 (SSG) 등을 지원한다.
사전 렌더링 (Pre-Rendering)
- 각 페이지들을 사전에 미리 HTML 문서로 생성해서 가지고 있음
서버 사이드 렌더링 (SSR)
- 페이지를 서버에서 렌더링하여 초기 로딩 속도를 향상
정적 사이트 생성 (SSG)
- 빌드 시점엣 페이지를 사전 렌더링하여 성능을 향상
Incremental Static Regeneraton (ISR)
- 동적으로 사전 렌더링할 수 있는 중간 솔루션을 제공
SEO 최적화
- 검색 엔진 최적화를 위한 메타 태그, 제목 태그 등을 손쉽게 설정
파일 기반 네비게이션
- 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편리
- pages/about.js ⇒ “/about” 경로와 연결됨
CSR이란?
클라이언트 측에서 페이지 렌더링을 수행하는 방식
- 사용자의 브라우저에서 Javascript를 사용하여 페이지를 동적으로 생성
- 따라서 처음에 서버는 빈 HTML 페이지만 제공하고, 이후 데이터와 페이지를 렌더링하는 역할은 클라이언트가 수행
- 사용자가 새로운 사이트 요청
- 서버에서는 빈 HTML 파일 제공 (화면 X, 상호작용 X)
- 브라우저가 JS 파일 다운로드 (아직도 화면 X, 상호작용 X)
- 다운로드한 이후에 브라우저가 JS 실행하면 (화면 O, 상호작용 O)
CSR 장단점
- 주로 웹 애플리케이션에서 클라이언트 측 라우팅 및 상호작용이 많은 경우에 사용
- SPA, 대시보드 및 관리 패널, 소셜 미디어 플랫폼, 라이브 스트리밍 및 실시간 업데이트 서비스
- React, Vue, Angular와 같은 프레임워크, 라이브러리에서 주로 사용된다
[장점]
상호작용성 : 클라이언트에서 페이지를 렌더링을 하므로 사용자와의 상호작용 매우 빠름.
서부 부하 감소 : 서버는 초기에 HTML만 제공하고 이후에는 클라이언트에서 데이터를 로드하고 모든것을 작업하기 때문에 서버 부하 감소한다는 장점이 있음.
자연스러운 앱 경험 : SPA로 구현되는 경우가 많은데, 이는 자연스러운 앱과 유사한 경험을 제공
[단점]
SEO 어려움 : CSR은 초기에 HTML에 콘텐츠가 없으므로 검색 엔진 최적화를 구현하기 어려움.
그외
- 초기 로딩 후 콘텐츠 표시까지 로딩 시간 문제
- CSR에서 페이지가 많이 복잡하고 데이터 양이 큰 경우 초기 로딩 or 페이지 전환 시 성능 문제 발생할 수도 있음 (특히 느린 네트워크애서 두드러짐)
SSR이란?
서버에서 페이지를 미리 생성한 뒤, 사용자에게 페이지를 렌더링을 하는 방식
- 사용자가 페이지에 접속할 때 서버에세 미리 HTML을 생성하고 클라이언트로 보냄
- 사용자에게 초기 내용을 빠르게 표시하고 검색 엔진 최적화(SEO)를 개선하는데 도움을 줌
- 사용자가 새로운 사이트 요청
- 서버에서 미리 생성된 HTML 파일 제공 (화면 O, 상호작용 X)
- 브라우저가 JS 파일 다운로드 (화면 O, 상호작용 X)
- 브라우저가 JS 실행 (화면 O, 상호작용 O)
SSR 장단점
- 주로 동적 콘텐츠를 포함하고 있는 웹 애플리케이션에 적합
- 실시간으로 콘텐츠가 업데이트되는 뉴스 웹 사이트, 블로그, 전자 상거래 플랫폼에 적합
[장점]
SEO 최적화 : SSR 된 페이지들을 검색 엔진에 쉽게 색인화 가능.
초기 로딩 속도 개선 : 사용자에게 초기 콘텐츠를 더 빠르게 표시할 수 있음.
데이터 최신화 : 매 요청마다 최신 데이터를 가져올 수 있음
[단점]
서버 부하 : 매 요청마다 서버에서 페이지를 가져오면 서버 자원을 많이 사용할 수 있음
느린 네트워크 연결 시 : 서버에서 HTML 생성해서 가져오는데, 느린 네트워크의 영향을 받으면 초기 로딩 속도가 느려질 수 있음.
마지막으로 SSG 알아보기
Static Site Generation는 페이지를 사전에 빌드 시점에서 생성하고 정적 파일로 제공하는 방식
- 기본적으로, Next.js는 SSG 방식으로 데이터를 페칭함.
- 초기 로딩 속도가 빠르고, SEO가 우수
- 미리 빌드된 페이지를 제공하기 때문에 서버 부하가 적음
- 하지만, 정적 데이터를 사용하므로 동적 콘텐츠에는 제한이 있음
ex) 주로 블로그, 포트폴리오 웹 사이트, 회사 홈페이지 등 정적인 사이트에 사용
[장점] 빠른 초기 로딩 속도, SEO 우수, 서버 부하 적음
[단점] 동적 데이터 제한, 업데이트된 데이터에 대한 재빌드 필요
