- Pages
- nextjs에서
page
는- React component이다
pages
디렉토리에 존재하는 소스파일명으로 자동 route 설정됨pages/about.js
를 만들면 browser에서/about
이란 경로로 접근된다
function About() { return <div>About</div> } export default About
pages/posts/[id].js
- path parameter도 지원한다- 파일명에
[
,]
가 들어가는게 생소하지만 된다
- 파일명에
- Pre-rendering
- 기본적으로 nextjs에선 모든 페이지를 pre-render한다
- 성능과 SEO 측면에서 좋다
- 생성된 html은 최소한의 javascript 코드를 담고있다. 브라우져가 로드하고 javascript가 수행되면 fully interactive해 진다(그 전에도 보이긴 함)
hydration
과정이라고 칭함
- 2가지 방식의 pre-rendering
- Static Generation(추천)
- build time(by
next build
)에 html을 생성해 버린다 - 즉, 매 요청마다 서버에서 뭔가 처리하지 못한다
- headless CMS나 headful CMS에서 내용을 기반으로 static page 구축
getStaticProps
,getStaticPaths
사용
- build time(by
- Server-side Rendering
- 요청마다 서버에서 작업 결과를 넘겨준다
getServerSideProps
를 정의하면 된다
- Static Generation(추천)
- 대부분의 page는 static generation을 사용하고 불가피한 page만 server-side rendering을 수행하게 만들수 있고 추천한다
- 기본적으로 nextjs에선 모든 페이지를 pre-render한다
- nextjs에서
Pre-rendering types of nextjs
· 2 min read