NextJs - CSR, SSR

CSR(Client Side Rendering)

• 클라이언트 측의 브라우저가 JS 파일을 다운로드하고 직접 실행하여 렌더링한다.

• 장점
• 서버에서 전체 페이지를 다시 읽어오고 필요한 부분만 받아오기에 빠른 인터렉션이 가능

• 단점
• 사용자가 첫 화면을 보기까지 시간이 좀 걸린다
• 구글, 네이버와 같은 검색엔진이 빈 페이지로 인식하여 검색엔진이 인식을 못함
• 쿠키를 사용하기에 보안상 문제가 발생할 수 있음

SSR(Server Side Rendering)

• UI를 서버에서 렌더링하고, 사용자가 HTML을 전달받을때 내부에 렌더링된 결과물이 보인다

• HTML을 먼저 받고, JS 코드들이 다운되고 실행되어 HTML과 동기화되어 인터렉션이 가능해진다.

• 장점
• 웹서비스의 검색엔진 노출 최적화가 된다
• 초기 렌더링의 성능이 개선된다(일단 HTML은 받기 때문에, 대기시간이 최소화됨)

• 단점
• 서버 리소스가 많이 사용됨, 과부하가 발생할 수 있다
• 프로젝트 구조가 좀 더 복잡해질 수 있음

Nest에서의 SSR

• NestJS에서는 두가지 형태의 사전 렌더링이 존재한다
• SSG(정적 생성)
• 빌드 시 페이지를 HTML로 만들어 요청 시 제공
• getStaticProps, getStaticPaths
• SSR(서버 사이드 렌더링)
• 페이지 요청 시 SSR을 통해 HTML 제공
• getServerSideProps

• 어쩔 때 SSR을 사용하는가?
• 항상 최신 상태를 유지해야 하는 경우 사용한다.

getServerSideProps()

• SSR을 사용하여 페이지 요청 시마다 서버로 데이터 요청을 보낼 수 있다.

• 요청 url이 /board/{id} 인 경우

export default function Page({id}:any) { //-> 새로고침 시에도 id가 undefined가 되지 않음
	...
}

export async function getServerSideProps(context:any) {
  return { props: { id: context.params.id } };
}