[ React : Next.js ] Pages

#Pages

Pages with Dynamic Routes

Next.js는 동적 경로가 있는 page 지원.

ex) 'pages/posts/[id].js' => '/posts/1', '/posts/2' 등으로 액세스 가능.

 

Pre-rendering

Next.js 는 기본적으로 모든 page를 pre-rendering한다.

Pre-rendering은 아래 두 가지의 종류가 있는데 두 방식의 차이점은 페이지에 대한 HTML을 생성하는 것이 다르다.

 

1. Static Generation ( Recommended )

    - 빌드시 html이 생성되며 각 요청에서 재사용된다.

2. Server Side Rendering ( SSR )

    - 각 요청에 대해 html이 생성된다. 

 

Next.js 는 사용할 Pre-rendering 방식을 선택할 수 있다. 

 

Pre-redering vs Non-Pre-rendering

Pre-rendering

 

Non-Pre-rendering

 

Static Generation without Data

Static Generation with Data

'getStaticProps'

    - getStaticProps 는 production build시 실행되고, 함수 내에서 외부 데이터를 가져와 page의 Component로 보낼 수 있다. 

 

 

Server-side Rendering with Data

'getServerSideProps'

 

[ + ] 

meta data 구문 분석 library => gray-matter  

npm install gray-matter

https://nextjs.org/learn/basics/data-fetching/pre-rendering

Learn | Next.js

 

[ + ] 다음에 읽어볼뤠 ( SWR )

https://nextjs.org/learn/basics/data-fetching/request-time