기본 콘텐츠로 건너뛰기

글

8월, 2023의 게시물 표시

NextJS의 4가지 Rendering 방식과 그 구현

NextJS의 4가지 Rendering 방식과 그 구현 Next.js는 React 기반의 프레임워크로, 다양한 종류의 렌더링을 지원하며 쉽게 구현할 수 있도록 도와줍니다. 1. 4가지 렌더링 방법과 그 구현 방법 Static Generation (정적 생성): 정적 생성은 빌드 타임에 페이지의 HTML을 생성하는 방식입니다. 동적 데이터를 포함할 수도 있습니다. 구현 방법: // pages/about.js function AboutPage ( { data } ) { return ( < div > < h1 > About Page </ h1 > < p > {data} </ p > </ div > ); } export async function getStaticProps ( ) { const data = 'This is dynamic data.' ; return { props : { data, }, }; } export default AboutPage ; Server-side Rendering (서버 사이드 렌더링): 서버 사이드 렌더링은 요청이 들어올 때마다 서버에서 페이지의 HTML을 생성하는 방식입니다. 동적 데이터를 포함할 수 있습니다. 구현 방법: // pages/blog/[slug].js import { useRouter } from 'next/router' ; function BlogPost ( { post } ) { return ( < div > < h1 > {post.title} </ h1 > < p > {post.content} </ p > </ div > ); } export async funct...