data fetching 2

[Next.js] 13버전 Data Fetching

사전 렌더링(Pre-rendering) 복습 미리 각 페이지의 html을 생성하여 SEO 적용할 수 있게 하는 것으로, Next.js 에서는 페이지마다 2가지 렌더링 방법을 선택적으로 사용할 수 있다. 정적 사이트 생성(SSG) : 빌드 시 html 생성해두고 요청이 오면 생성해둔 html 재사용, 빈번한 업데이트 필요 없는 정적 페이지 만들 때 사용 ex) 마케팅, 블로그 게시글, 설명서, 제품 목록 페이지 서버 사이드 렌더링(SSR) : 사용자 각 요청마다 새 html 생성, 요청마다 데이터를 최신상태로 업데이트해야 될 경우 사용 Next.js 13 버전 Data Fetching fetch() 사용 export default funciton Home(){ const a = use(fetchData()..

Next.js 2023.08.21

[Next.js] Data Fetching (getStaticProps/getStaticPaths/getServerSideProps)

Next.js 는 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR) pre-rendering 웹사이트 생성을 도와주는 프레임워크이다. Next.js에서는 SSG와 SSR을 위한 데이터 패칭 기능을 제공한다. 즉, 사이트를 렌더링하기 전 어떤 데이터를 이용해서 페이지를 생성할 것인지에 대한 함수를 작성하는 기능을 말하는 것이다. ( getStaticProps와 getStaticPaths, getServerSideProps ) getStaticProps function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // SSG export async function getStaticProps(context) { // 외부..

Next.js 2023.08.12