한입 크기로 먹기 힘든 Next JS Week 2

robin Han·2025년 8월 21일

사전 랜더링 방식

서버 사이드 랜더링 SSR

요청이 들어올 때 마다 사전 랜더링 진행 (페이지를 요청할 때마다) HTML을 동적으로 처리하여 클라이언트로 응답
SEO 최적화 : 서버에서 생성된 완저한 HTMl로 검색엔진에 친화적
빠른 초기 로딩 : JS를 로딩하고 실행전, 이미 채워진 페이지를 볼수있다
최신 데이터 : 요청할떄마다 불러오기떄문에 항상 최신 데이터를 제공한다
서버 부화 및 로딩속도 지연 : 페이지를 볼때 서버에 따러서 SSG 보다는 느릴수있다 서버에서 요청되는 시간이 길어질수록

getServerSideProps() SSR


//getServerSideProps
export const getServerSideProps = async (context: GetServerSidePropscontext ) => {
  //컴포넌트 보다 먼자 실행되어서 컴포넌트에 필요한데이터 불러오는 함수 
  //오직 서버측에서만 한번 불러오는 함수 
  const data='hi'
  //브라우저에서만 실행가능한 window 사용못함 
  //window.location
  
  //무조건 객체로 return 
  return{
    props:{
      data,
    }
  }
}

//fetch 
export default ascyn function fetch():Promise<type of Response>{
  	try{
		const res = await fetch(url)
	}
	catch(err){
    	console.error(err)
      	return null
    }
	return await res.json() 
}


//page 
export default function Paege({items}: InferGetServerSidePropsType<typeof getServerSideProps>){
	return <></>		
}

번들링 과정에 한번 실행(서버) + 랜더링 과정에 한번 실행(브라우저) = 총 2번 실행됨
해결 방법 -> useEffect(랜더링 이후 실행)

정적 사이트 랜더링 SSG

빌드 시점에 페이지를 HTML 파일로 미리 생성하는 방식 이미 정적 파일을 제공하기 때문에 실제 요청시 빠르게 응답 랜더링 가능
SEO + 서버 안정화 : 빌드외 만들어진 파일을제공하기 때문에 트래핏과 검색 엔진 봇에 최적화 되어있다
빌드 시간이 오래걸린다
실시간으로 처리하는 데이터에는 해당 방식 부적합
페이지를 새로 만드는것이 아닌 빌드 시 만들어진 페이지로만 응답하기 때문에 최신 데이터를 반영이 어렵다

getStaticProps() SSG

interface Q{
	items: string
}

//getStaticProps
export const getStaticProps = async (context: GetStaticPropscontext ) => {
  //컴포넌트 보다 먼자 실행되어서 컴포넌트에 필요한데이터 불러오는 함수 
  //오직 서버측에서만 한번 불러오는 함수 
  const data='hi'

  //SSG 방식은 빌드시에 번들을 하기 떄문에 query와 같은 동적으로 가져오지 못한다.
	//사전 랜더링 못함 
  // const query = context.query.q 

  return{
    props:{
      data,
    }
  }
}

//fetch 
export default ascyn function fetch():Promise<Q>{
  	try{
		const res = await fetch(url)
	}
	catch(err){
    	console.error(err)
      	return null
    }
	return await res.json() 
}  

//getStaticPaths 
export const getStaticPaths = ()=>{
	return{
      paths: [
        {params: {id:'1'}},
        {params: {id:'2'}},
        {params: {id:'3'}},
      ],
      fallback:false,
    }	
}

//Page 
export default function Paege({items}: InferGetStaticPropsType<typeof getStaticProps>){
  //SSG는 페이지 내에서 요청해야됨 
  	const router = useRouter()
    const q = router.query.q;
  
		return <></>
}

개발모드에서는 실시간으로 수정되기 때문에 SSR /SSG 확인하기 어렵기 때문에, 실제로 빌드를 진행하고 해당 로그를 확인.

추가적으로 아무것도 설정 되어있지 않는 페이지들은 자동적으로 SSG로 정적으로 랜더링한다.

동적인 경로를 갔는 페이지들은 [id].tsx 같은 동적 페이지 사전 렌더링에 미리 설정이 필요함 ==> getStaticPaths()

params의 parameter 는 무조건 문자열
fallback ? 존재하지않는 동적 params는 어떻게 처리할것인지

fallbakc options

getStaticPaths() 로 동적경로 미리 등록

Options:

false : 404 not found
'blocking' : 즉시 생성( SSR ) --> 실시간으로 생성 next 서버에 저장
true : 즉시 생성 + 페이지만 미리반환 --> props가 없는 페이지만 반환 그이후 prop만 받아서 반환 (로딩 처리)

증분 정적 재생성 ISR Increment미 Static Regeration

단순히 SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술

사전 랜더링 에서 유통기한을 선언해서 빌드된 똑같은 페이지를 반환해주고 유통기한 지나면 다시 생성해서 반환
따라서 SSG 방식의 빠른 속도로 응답이 가능하고 유통기한 이후에는 SSR방식의 최신 데이터가 반영

예) 유통기한이 60초라면 -> 60초 이후에 들어오는 첫 요청에 새로운 페이지 생성하여 그 이후에 들어오는 요청에 대한 페이즈들은 새로운 데이터가 반영된 업데이트된 페이지들이 들어간다.

//getStaticPaths 
export const getStaticPaths = ()=>{
	return{
      paths: [
        {params: {id:'1'}},
        {params: {id:'2'}},
        {params: {id:'3'}},
      ],
      fallback:false,
      revalidate: 3 //seconds 
    }	
}

ISR이 어려운 페이지들
시간과 관계 없이 사용자의 행동에 따라 데이터가 업데이트 되는 페이지들

또한 유통기한을 걸면 필요없이 새로운 페이지들을 생성을 한다 이걸 해주는게 On-Demand ISR

On-Demand ISR

revalidate의 요청에 따라 페이지를 재생성

export default async function handler(req,res){
	try{
    	await res.revalidate('/')
      return res.json({revalidate:true})
    }catch (err){
      'failed'
    }
}

SEO

  <Head>
        <title>my app</title>
        <meta property="og:image" content="/thumbnail.png"/>
        <meta property="og:title" content="my-app"/>
        <meta property="og:description" content="my wonderfull app"/>
  </Head>