<aside> ❗ 서버 사이드 렌더링을 위한 React 프레임워크

</aside>

CSR vs SSR

Link

import Link from 'next/Link'

<Link href='/post'>
	<a> post로 이동 </a>
</Link>

• 주소를 이동시키는 객체
• href 속성으로 이동할 경로를 지정한다.
• Link 컴포넌트 안에 a 태그를 넣어야 한다.
• Link 컴포넌트가 또 다른 컴포넌트를 감싸게 되면 라우팅이 되지 않는다.

useRouter

// [id].jsx 파일 (파일 이름을 대괄호로 감싸야 동적 라우팅이 가능)

import { useRouter } from 'next/router'

const router = useRouter()

console.log(router.pathname)  // 해당 사이트 이름
console.log(router.query.id)  // pathname 다음에 오는 동적 라우팅의 쿼리를 뽑아낸다.

router.back()  // 전 페이지로 돌아가기
router.push('url')  // url 주소로 이동하기
router.replace('url')  // push 메소드와 동일

• useRouter : 경로 정보를 가지고 있는 객체
• push 메소드는 이전에 렌더링이 된 페이지를 기억하고, replace 메소드는 이전 페이지를 기억하지 못한다.
• 한 동적 경로는 하나의 동적 페이지만 가질 수 있다. ex) post/id 와 post/slug 공존 불가능

getStaticProps

// A 컴포넌트
function A(**props**) { .... }

export async function **getStaticProps**() {
	const res = await fetch('데이터 경로')
	const data = await res.json()

	return { **props**: {data} }
}

• static 파일을 빌드한다. static 파일은 빌드가 된 이후에는 동적으로 변경할 수 없다.
• 동적으로 변하는 페이지가 아니기 때문에 페이지 전환 속도가 빠르다.