Next.js 데이터 페칭과 라우팅 리마인드

01_Next.js 특징 리마인드

Next.js 의 주요 특징을 리마인드하며 적재적소에 알맞은 렌더링을 할 수 있도록 한다. Next.js 주요기능과 장점 링크 :

✳️ 주요 기능

데이터 Fetching 방식 특징

• 사전렌더링 (Pre-Rendering)
• 각 페이지를 사전에 미리 HTML 문서로 생성하여 가지고 있다.
• 빌드 타임에 해당하는 페이지별로 각 HTML 문서를 미리 생성하여 가지고 있다가 서버에서 요청이 들어올때 알맞은 페이지를 반환해준다.

• 서버사이드렌더링 (SSR)
• 페이지를 서버에서 렌더링하여 초기 로딩속도를 향상시킨다.
• 사이트에 접속하면 서버에서 프리렌더링 하여 채워진 HTML 을 다운받아오기 때문에 JS 파일을 불러올때까지 반응은 하지 않지만 빠르게 화면을 볼 수 있기 때문에 속도가 빨라 보이는 효과가 있다.
• 하이드레이션 : 불러온 HTML과 자바스크립트파일을 불러올때까지의 과정을 하이드레이션이라고 한다.

• 정적 사이트 생성 (SSG)
• 빌드시점에 페이지를 사전 렌더링하여 성능을 향상시킨다.
• 동적으로 데이터가 자주 변하는 페이지에는 적합하지 않다.
• 게시물, 알람과같은 데이터는 SSR 을 사용해야지만 자주 변하지 않는 소개글, FAQ 같은 페이지는 SSG 로 이용하는것이 좋다.

• Incremental Static Regeneration (ISR)
• 동적으로 사전 렌더링 할 수 있는 중간 솔루션 제공
• SSG 를 사용하여 빌드시점에 페이지를 사전렌더링 하면서 페이지를 필요할 때 동적으로 사전렌더링 할 수 있다.

• SEO 최적화
• 검색엔진 최적화를 위한 메타태그, 제목태그 등 손쉽게 설정

• 파일 기반 네비게이션
• 폴더의 경로에 따라 페이지의 경로가 설정되어 구축이 빠르고 관리가 편하다.

라우팅 특징

• 현재 라우트 정보를 가져오고 페이지 내 동적 라우팅을 제어하는데 사용된다.

• router.push : 새로운 경로로 이동. (히스토리가 쌓인다.)

• router.replace : 현재 페이지를 새로운 URL 대체하기 때문에 히스토리가 쌓이지 않는다.

• router.back : 뒤로가기

• router.reload : 새로고침

• 그 외 속성 : pathname, query, locale, basePath

• <Link /> 컴포넌트를 클릭했을 때 새로고침되지 않고 클라이언트사이드 렌더링처럼 자연스럽게 이동이된다.

• viewport 안에 있는 모든 <Link /> 태그는 static generation 을 사용하는 페이지에서 prefetching 된다.

• 서버에서 렌더링 된 경로에 대한 데이터는 <Link /> 를 클릭했을 경우에만 가져온다.

Next.js 13.4ver. App 라우터

• /app 이라는 새로운 디렉토리 라우팅 설정

• 레이아웃, 서버컴포넌트, 스트리밍, 데이터 페칭을 지원하는 새로운 형태로 업데이트
• 공통 레이아웃 쉽게 만들 수 있음
• 서버사이드 처리가 기본 동작이 되었다.

• 기존 pages 파일구조에서 점진적 업데이트 할 수 있도록 지원

02_CSR vs SSR vs SSG

데이터를 가져오는 방식 세가지의 장단점과 사용 포인트 에 대해 알아본다.

CSR

• 사용자의 브라우저에서 자바스크립트를 사용하여 페이지를 동적으로 생성한다.

• 서버는 빈 HTML 페이지만 제공하고, 이후 데이터와 페이지를 렌더링 하는 역할은 클라이언트가 수행한다.

• 주로 웹앱 클라이언트 측 라우팅 및 상호작용이 많은 경우에 사용 (대시보드, 소셜미디어 플랫폼, 라이브스트리밍, 실시간 업데이트 서비스)

• 상호작용성 : 클라이언트에서 페이지를 렌더링하므로 사용자와의 상호작용이 빠르게 이루어짐

• 서버부하 감소 : 서버는 초기 HTML 만 제공하고 클라이언트에서 데이터를 로드하여 부하가 적다.

• 자연스러운 앱 경험 : 싱글페이지로 구현되기 때문에 자연스러운 앱과 유사한 사용자경험 제공 가능

• SEO 의 어려움 : 초기 HTML 에 컨텐츠가 없기 때문에 검색엔진 최적화를 구현하기 어렵다.

• 초기 로딩 후 콘텐츠 표시까지 시간이 걸린다.

• 그 외 JS 에 의존하는 문제, 성능 문제가 있다.

서버사이드 렌더링 (SSR)

• 사용자가 페이지에 접속할 때 서버에서 미리 HTML 을 생성하고 클라이언트에게 보내준다.

• 사용자에게 초기 내용을 빠르게 표시하고 검색엔진 최적화를 개선하는데 도움을 준다.
• 미리 HTML 이 생성되어있기 때문에 사용자가 해당링크를 클릭하기 전에도 미리 HTML 페이지와 메타태그가 세팅이 되어있어 검색하는데 더욱 도움이 된다.

getStaticProps (SSG)

• 정적 페이지 생성을 위한 데이터 가져오기 함수. Next.js 는 기본적으로 SSG 방식으로 데이터를 페칭한다.

• 런타임이 아닌 빌드시점에서만 실행하기 때문에 변동의 거의없는 데이터 대상으로 적합. (개발모드에서는 항상 호출된다.)

• 초기로딩속도가 매우 빠르며 SEO 가 우수하다

• 서버 부하가 낮다.

• 동적 콘텐츠에 제한이 있다.

• 업데이트 된 데이터에 대한 재 빌드 필요

• 데이터가 Headless CMS 에서 온 경우 (콘텐츠 생성,저장 하는 관리 시스템, 사용자에게 콘텐츠가 보이는 부분은 API 로 제공하는 시스템에서 가져오는 경우)

• 페이지를 렌더링하는데 필요한 데이터를 사용자의 요청 전, “빌드” 할 때 사용할 수 있는 경우

• 페이지가 사전 렌더링 되어 렌더링이 매우 빨라야 하는경우
• 성능을 위해 CDN 에서 캐시할 수 있는 HTML 및 JSON 파일을 생성한다.

• 데이터를 공개적으로 캐싱될 수 있는지 여부 고려 (user-specific X)

getStaticPaths

• 동적 경로를 위한 정적 경로 생성 함수.
• 동적으로 생성되는 페이지를 사전 렌더링 할 때 사용된다.
• ex - 하나의 FAQ 데이터 (id:1) 가 존재할 때 faqs/1 이라는 경로를 빌드 타임에 미리 사전렌더링 가능

• 마찬가지로 빌드타임에 실행되므로 변동이 거의 없는 데이터 대상으로 적용하는게 좋음 (개발모드에서는 항상 호출)

• 특정 페이지의 경로가 외부데이터에 의존할때

• 동적 경로를 사용하는 페이지들을 사전 렌더링 하고 싶을때
• 데이터가 Headless CMS 파일시스템에서 온 경우
• 데이터가 데이터베이스에서 온 경우
• 페이지가 사전 렌더링 되고(SEO) 매우 빨라야 하는 경우
• 데이터를 공개적으로 캐시 할 수 있는 경우 (user-specific X)

getServerSideProps (SSR)

• 서버사이드 렌더링을 위한 데이터 가져오기 함수. 매 요청마다 (런타임) 데이터를 서버에서 가져온다.
• ex 자주 업데이트 되는 posts 데이터들(자주 변동되는 뉴스 글,검색결과 페이지,전자상거래 등)을 외부 API 로부터 fetch 해서 사전 렌더링 하고 싶을때 사용

• getServerSideProps 를 사용하는 페이지는 요청 시 서버측에서 렌더링 되며 cache-control 헤더가 구성된 경우에만 캐싱이 된다.

• 데이터 최신화
• 매 요청마다 최신 데이터를 가져올 수 있다.

• 매 요청마다 서버에서 페이지를 가져오면 서버자원을 많이 사용할 수 있다는 단점이 있다.

• 느린 네트워크 영향을 받으면 초기로딩이 느려질 수 있다.

• 매 요청마다 페이지 렌더링 해야할 경우

정리