milliwonkim의 블로그

요약 - 페이지 내용이 자주 바뀐다? => SSR 사용 - 페이지 내용이 거의 안바뀐다? => SSG 사용 Next.js에서 SSG와 SSR이 무엇인가! 1. Static Site Generation(SSG) - 빌드 타임에 페이지를 서버에서 사전에 HTML을 생성해둠 - getStaticProps, getStaticPaths를 이용함 - 생성된 정적페이지는 모든 요청에 동일하게 제공됨 - 서버 측에서 사전렌더링 => 클라이언트에서 추가적인 데이터 요청 안해도됨 - 캐싱 => 성능향상, 서버 부하 감소 가능 - 주로 변경이 적은 페이지, 공통 데이터를 사용하는 정적 컨텐츠에 적합함 2. Static Site Generation(SSG) - 각 페이지 요청이 올 때마다 HTML을 생성함 - getServe..

Next.js에서 Dynamic Route를 사용하기 위해선 반드시 getStaticPaths, getStaticProps를 사용해야한다. getStaticPaths getStaticPaths는 동적 경로를 가지는 정적페이지를 생성하기 위해 모든 URL에 따른 페이지를 빌드 시점에 서버를 이용해 모두 Pre-Render한다. 예를 들어, /post/[id].tsx라는 동적 라우팅이 있다면, /post/1, /post/2, /post/3에 대한 HTML, JS 등을 미리 렌더링한 파일을 만들고, 이 배포 시, /post/1을 호출할 경우, Pre-Render된 /post/1의 HTML, JS 등을 브라우저에 렌더링한다. getStaticProps 그런 후 getStaticProps에 해당 경로(/post/..

동작 안한다. getStaticPaths, getStaticProps, getServerSideProps는 Node 서버가 필요하기 때문에, Node 서버를 올릴 수 없는 AWS S3, Github Pages에서는 Build time 당시의 Pre Render 기능은 모조리 업데이트 불가능하다 (다만 deploy 시도 시에는 새로운 빌드를 하기 때문에 최신이 적용되긴 한다) AWS amplify, Vercel이 서버리스를 위한 서버를 이용할 수 있기 때문에 Next.js에 적당해보였다 import React, { useEffect, useState } from "react"; const Post = (data: IData, params: IRoute) => { const { category: catego..