TIL 65 | Pre-rendering
Pre-rendering
-
NEXT-js를 사용하게 되면 기본적으로 모든 페이지마다
Pre-rendering
을 하게 된다. CRA를 통해 구현한 SPA의Client-side Rendering
과 다르게 렌더링의 주체가 client가 아닌 server이며, 이는 성능 개선 및 보다 향샹된 SEO를 제공한다. (비교 글은 여기 작성해놓았다.) -
Pre-rendering
은 정적 요소가 먼저 그려진 후 사용자에게 보여지며,JS
로딩 후 정적 문서를 데이터 변경 및 사용자에게 반응할 수 있는 동적 형태로 변환하는 과정이 이루어진다. (이를hydration
이라고 한다.) -
NEXT는 두 가지 형태의
Pre-rendering
가 존재하는데, 이는 다음과 같다.
Static Generation
-
DOM 요소들이
build
가 될때 생성이 되며 사용자의 요청마다 재사용된다. -
공식문서에서는 이
Static-Generation
을 추천한다. 그 이유는 페이지가 1번build
가 되고CDN
에 의해 제공이 되는데, 이는server
가 사용자의 요청마다render
하는 것보다 빠르기 때문이다. -
마케팅 페이지, 블로그 포스트, e-commerce 상품 리스트, help and documentation 페이지에 사용할 수 있다. (즉 데이터가 동적이며 수시로 변경하지 않는 페이지들)
-
사용자의 요청에 앞서 페이지를
pre-render
를 하고 싶다면,Static-Generation
을 선택해야한다.
Static Generation without data
export default function About() { return <div>About</div>; }
Static Generation with data
export default function Blog({ posts }) { return <ul> {posts.map(post) => (<li>{post.title}</li>)} </ul>; } // export async function getStaticProps(){ const res = await fetch('http.../posts'); const posts = await res.json(); return { props: { posts, } } }
-
data fetch
가 있을 경우,getStaticProps
라는 함수를 사용한다. -
웹이
build
될 때 함수가 실행되며, 함수가 속한 페이지 컴포넌트에 props로 데이터를 전달할 수 있다. -
getStaticProps
의 리턴값은 항상props: {}
의 형태이다. -
development
모드에서는 매 요청마다 실행이 되는 것을 참고하도록 하자. -
props
자리에는 또다른 매개변수를 사용할 수 있으며, 이는 공식문서를 참고하면 된다.
Server-side Rendering
-
Static-Generation
과 같이pre-render
를 하지만 사용자의 요청 혹은 수시로 변하는 데이터 변동을 보여주는 페이지를 구현하고자 할 경우Server-side Rendering
을 사용한다. -
렌더링 속도는 느리지만, 동적인 데이터 변동을 보여주기에 적합하다.
-
Static-Generation
보다 느린 성능을 보이기 때문에 절대적으로 필요한 경우에만 사용하는 것을 권장한다.
Server-side Rendering with data
export default function Blog({ posts }) { return <ul> {posts.map(post) => (<li>{post.title}</li>)} </ul>; } // export async function getServerSideProps(){ const res = await fetch('http.../posts'); const posts = await res.json(); return { props: { posts, } } }
getStaticProps
와 동일한 형태로 작성한다.
Reference
Author And Source
이 문제에 관하여(TIL 65 | Pre-rendering), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dydalsdl1414/TIL-65저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)