NextJS) CSR/SSG/SSR/ISR 사용해보기!

NextJS의 강점은 바로 CSR/SSG/SSR/ISR을 모두 사용가능하며, 이를 이용한 SEO 향상 및 많은 장점들이 있습니다.

오늘은 간단하게 위 네가지의 사용법과 차이점에 대해서 알아보겠습니다.

먼저 코드로 부터 간단하게 보겠습니다.

 

1. CSR (Client-Side-Rendering)
- 동적으로 변화하는 컨텐츠들을 계속 실시간으로 빠르게 변화시켜줄 수 있다

- 페이지 초기 로딩시 불러오는 데이터에 따라 로딩이 느릴 수 도 있으며, 새로고침시 페이지 깜박 거림발생

- SEO(Search-Engine-Optimization, 검색엔진최적화)에 약하다. 이는 웹서비스에 있어 치명적일 수 있다

function Csr(){
	useEffect(() => {
    	// 데이터 호출
   	}, [])
    
    return (
    	...데이터 UI 구성
    )
}

 

 

2. SSG (Static-Site-Generation)

- 이미 만들어진 페이지로 바로 보여주기 때문에 속도가 빠르고 서버 부담이 적을 수 있다.

- 동적인 컨텐츠들을 활용할 수 없고, 정적이기때문에 변화가 없는 고정 페이지 같은 곳에 사용 해야 한다.

- 그렇기에 새로운 데이터를 보여주려면 새로 빌드하고 배포 해야 한다.

function Ssg({...데이터}){
	return (
    	...데이로 UI 구성
    )
}

export async function getStaticProps(){
	...데이터 fetch
    
    return {
    	props: {
        	...데이터들
        }
    }
}

 

3. SSR (Server-Side-Rendering)

- 서버에서 데이터 패칭을 하고 만들어진 페이지로 보여줄 수 있어서 취약했던 SEO를 해결할수 있다.

- 서버 부하가 커질 수 있다. 

- 화면 깜빡임이 발생한다. 

- TTV(Time to View) 와 TTI (Time to Interact) 사이에 틈이 생길 수 있다.

function Ssr({...데이터}){
	return (
    	...데이로 UI 구성
    )
}

export async function getServerSideProps(){
	...데이터 fetch
    
    return {
    	props: {
        	...데이터들
        }
    }
}

 

4. ISR ( Incremental-Static-Regeneration)

- 설정한 주기만큼 페이지를 서버측에서 렌더링으로 함 (새로업데이트된 데이터를 주기마다 갱신가능)

- SEO 최적화가 좋음

- 실시간 데이터가 아닌 주기설정한 것에 따라 새로고침을 해야함

function Isr({...데이터}){
	return (
    	...데이로 UI 구성
    )
}

export async function getStaticProps(){
	...데이터 fetch
    
    return {
    	props: {
        	...데이터들
        },
        revalidate: 60
    }
}

 

 

이상으로 NextJS를 사용하면서 가장 중요한 기능들인 CSR/SSG/SSR/ISR에 대해 간단하게 알아보았습니다.

물론 중요한건 적절한 포지션에 적절한 기능을 섞어가며 효율적으로 개발하는 것이 중요하겠습니다.