미미의 메모장

[Next.js] 정적 라우팅 & 동적 라우팅 본문

memo/Front-End💙

[Next.js] 정적 라우팅 & 동적 라우팅

mimi memo 2023. 6. 9. 15:07

라우팅이란?

네트워크상에서 주소를 이용하여 목적지까지 메시지를 전달하는 방법을 체계적으로 결정하는 경로선택 과정

 

정적 라우팅

app 에서 폴더 별로 page.txs 만들면 됨

고정된, 지정된 경로 별로 라우팅 된다.

 

동적 라우팅

골격은 그대로, 키워드 별로 해당하는 데이터를 보여주는 것

[키워드] 로 폴더 만듬. 키워드는 임의대로.

 

 

페이지 미리 생성하고 싶다면 generateStaticParams 사용

 

 


기본적으로 모든 페이지를 Pre-rendering 한다. 

HTML 페이지를 미리 생성해 두고, HTML에 필요한 최소한의 자바스크립트 코드도 함께 브라우저에서 다운로드 받는다. 

HTML 페이지가 브라우저에 로딩이 되었을 때, 최소한의 자바스크립트 코드를 받아서 페이지를 fully interactive 하게 한다. 이것이 하이드레이션 임.


URL 경로에 영향을 주지 않고 경로를 구성하려면 그룹을 만들어 관련 경로를 함께 유지. 괄호 안의 폴더는 URL에서 생략 됨(예: (marketing) 또는 (shop)).