Next.js 개념정리

💪🏻 GOAL
Next.js 공식문서의 내용을 읽으면서 정리해두어 더 쉽게 기억할 수 있고,
추후 참고하기 편하도록 한다!

⚠️ Next.js 13으로 업데이트되면서 가장 크게 바뀐 건 pages에서 app으로의 migration이라고 볼 수 있는데, 공식문서에 따르면 아직 해당 기능은 베타 버전이라 production에서의 사용을 지양하고 있다. 그러므로 일단 기존의 방식을 정리하되, 업데이트 된 내용은 따로 확인하는 것으로 :)

Pages with Dynamic Routes

• pages 폴더 안의 파일명을 바탕으로 루트 설정
  ex) /pages/about.js는 /about 루트로 접근

• Dynamic routes 가능
  ex) /pages/posts/[id].js

• <Link /> 태그 활용하여 이동 가능하며, Static Generation을 활용한 페이지로 이동 시에는 prefetch되고 서버에서 랜더링되는 경로의 페이지는 해당 링크가 클릭 되었을 때 fetch된다.

• useRouter를 사용하여 router 객체에 접근할 수 있다

• [...param]과 같이 세개의 점을 붙임으로써 쿼리 전체를 선택할 수 있다.
  ex) /post/1/2/3

• [[...param]]과 같이 대괄호를 두 번 사용하면 optional!
  ex) /post, /post/1/2/3

Pre-rendering

• Next.js는 기본으로 모든 페이지를 Pre-rendering
  - 클라이언트 JS가 모든 HTML을 랜더링하는 것이 아니라, 각 페이지의 HTML을 사전에 렌더링하여 성능 향상 & SEO 개선
  - Hydration : 브라우저에 의해 HTML이 로드된 이후 JavaScript가 그 위에서 동작하며 페이지에 인터렉션을 주는 전 과정
  
  

[ Two forms of Pre-rendering ]

• 페이지별 다른 렌더링 방식 사용 가능

• Static Generation (추천)

  • HTML이 빌드 시 생성되며, 페이지는 CDN에 캐싱되어 매 요청 시 재사용
  • pre-rendering을 위해 data fetching이 필요한 경우, 아래의 function 사용
    • 외부 데이터에 컨텐츠가 의존 : getStaticProps
    • 외부 데이터에 경로가 의존 : getStaticPaths
  • 최초 생성 이후 재사용 되므로, 빠른 속도로도 랜더링 가능
  • 사용자의 요청 이전에 미리 랜더링 가능하다면 사용!!
  • 사용자의 요청이 있어야만 페이지 렌더링을 할 수 있다면 Static Generation + Client-side data fetching OR Server-side Rendering 사용
  • Revalidation을 활용하여 성능 상의 이점을 챙기면서도 변경사항을 반영할 수 있다
    Next.js 공식 문서 - ISR

//getStaticProps

export async function getStaticProps() {
	const res = await fetch('...');
  	const posts = await res.json();
  
  	return {
    	props: {
        	posts,
        },
    }
  
}

//getStaticPaths - dynamic routing 사용 시와 같은 경우

export async function getStaticPaths(){
	const res = await fetch('...');
  	const posts = await res.json();
  
  	const paths = posts.map((post) => ({
		params: {id: post.id},    
    }))
    
    return {paths, fallack: false}
}

export async function getStaticProps({params}){
	const res = await fetch(`.../${params.id}`);
  	const post = await res.json();
  
	return {props: {post}}
}

• Server-side Rendering
  • 매 요청 시 새로운 HTML 생성

//getServerSideProps
export async function getServerSideProps(){
	const res = await fetch('...');
    const data = await res.json();
  
  	return {props: {data}}
}

ps. 정확하지 않은 내용이 있다면 언제든 공유 부탁드립니다!