Next.js 13버전 작동 순서

// page.tsx
export default async function Page({
		params,
	}){
	params : {id : string}
	children? : ReactNode
} {
	const data = await fetchById(params.id, {cache : 'no-cache'})
	
	return (
				<div>
						<h1>{data.title}</h1>
						<p>{data.body}</p>		
				</div>
		)
}

• 설명 : 페이지에서 id를 가져와 렌더링을 수행하는 일반적인 서버 컴포넌트 예제임. 어떻게 동작할까?

1. 최초 요청시에 HTML Document를 내려받는다.

• 기존 page-router의 getServerSideProps와 마찬가지로, 미리 렌더링되어 완성된 HTML이 내려오는 것을 확인 할 수 있다.

<aside> 🧠 즉 Next.js 13버전에서도 여전히 서버사이드 렌더링과 비슷하게 서버에서 미리 페이지를 렌더링해서 내려받는 것이 가능하다. 하지만 주의 깊게 봐야하는것은 body태그 맨 뒤에 오는 <script> 태그들이다.

</aside>

• getServerSideProps를 사용하는 애플리케이션에서는 특별한 태그가 추가돼 있었고, 서버에서 미리 만들어진 정보를 바탕으로 클라이언트에서 하이드레이션을 수행하여썽ㅆ다.
• 리액트 18버전에서는 서버 컴포넌트에서 랜더링한 결과를 직렬화 가능한 데이터로 클라이언트에 제공하고, 클라이언트는 이를 바탕으로 하이드레이션을 진행하게 된다.