[Day 57] Next.js Data Fetching

기업협업에서 next.js을 현업에서 많이하고 이번 프로젝트에도 사용한다고 해서 Data Fetching 개념을 정리해보자

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

✉️ Data Fetching

• to render your content in different ways, depending on your application's use case
• These include pre-rendering with Server-side Rendering
  or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration

📌 SSR: Server-side rendering
📌 SSG: Static-site generation
📌 CSR: Client-side rendering
📌 Dynamic Routing
📌 ISR: Incremental Static Regeneration

📌 SSR: Server-side rendering

---

getServerSideProps

If you export a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps.

export async function getServerSideProps(context) {
	return {
    	props: {}, // will be passed to the page component as props
    }
}

"Note that irrespective of rendering type, any props will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be hydrated correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in props."

hydrate?

Hydrate란, Server Side에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다.