getStaticProps에 대해 익숙하지 않다면, 아래 글을 먼저 보는 것을 추천 드립니다. [Next.JS] SSG - getStaticProps getStaticProps SSG(Static Site Generator)는 페이지를 호출할 때마다 서버에서 pre-render하는 SSR와 달리 빌드시점에 pre-rendering을 한다. // posts는 빌드 시점에 getStaticProps()에 의해 채워진다. function Blog({ posts } soojae.tistory.com getStaticPaths 동적 경로를 사용하는 페이지에서 getStaticPaths라는 함수를 사용할 때 Next.js는 getStaticPaths에 지정된 모든 경로를 정적으로 미리 렌더링한다. paths pat..
getStaticProps SSG(Static Site Generator)는 페이지를 호출할 때마다 서버에서 pre-render하는 SSR와 달리 빌드시점에 pre-rendering을 한다. // posts는 빌드 시점에 getStaticProps()에 의해 채워진다. function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // 이 함수는 Server Side에서 빌드 타임에 호출된다. // Client Side에서는 호출되지 않으므로 직접 데이터베이스 쿼리를 수행할 수도 있다. export async function getStaticProps() { const res = await fetch('https://.../..
getInitialProps, getServerSideProps, getStaticProps 전부 Server Side Rendering(SSR)을 위해 필요한 함수들이다. SSR은 서버에서 미리 데이터를 채운 페이지를 브라우저에 보여준다. 이는 특히 SEO 구현에 유용하다. 이번 시간은 getInitalProp와 getServerSideProps에 대해 알아보자. 각각의 렌더링 유형은 props를 페이지 컴포넌트로 전달된다. 초기 HTML가 내려왔을 때, 클라이언트 측에서 이 props 데이터를 확인 할 수 있다. 이는 페이지에서 적절한 hydrate를 위함이다. 그러므로 클라이언트에서 사용하면 안되는 민감한 정보(secret key등)를 props로 전달하면 안 된다. getInitialProps 사..
_app.js, _document.js 이 파일들은 pages폴더에 위치한 Next.JS에서 제공하는 로직을 override하기 위해 필요한 파일들이다. Next.JS에서 제공해 주는 기능만 사용한다면 생성하지 않아도 된다. 하지만 실제로 개발하다 보면 100% 커스텀해야 한다. _app.js _app은 모든 페이지에 레이아웃 형태로 항상 적용되어 있다. 페이지 이동 시에 상태가 변하지 않는다. 필요한 초기 데이터를 getInitialProps에서 받아 컴포넌트들에 공유할 수 있다. global css를 추가하기 좋은 파일이다. // _app.ts const App = ({Component, pageProps}: AppProps) => { return } } export default App; 위 코드에..
