뜨거운 SSR은 가고 남은 건 볼품없지만 (feat. SSG, CSR, ISR)

 

왜 SSR ( Server  Side Rendering ) 을 도입하고자 하였나?

 
React에서 CSR을 하면 는 빈 HTML을 불러와서 브라우저에서 렌더링하여 화면을 그린다.

(React 18버전부터는 RSC 라고 하는 서버컴포넌트를 사용할 수 있으나 RSC와 SSR은 다르다 !)

 React 코드를 보면 index.html 파일에 아래와 같이 root DOM 노드를 나타내는 코드가 있고,  자바스크립트 코드들은 모두 브라우저에서 실행되기 때문에 html 파일이 비어있다.  

<div id="root"></div>

 
이렇게 되면 브라우저가 켜지면서 화면이 그려지기 시작하기 때문에 초기 로딩 속도가 느리다는 단점이 있다.
(물론 코드가 많지 않은 프로젝트는 빠르게 로딩된다.) 
 
 
반면,  SSR은서버에서 렌더링 되어 브라우저로 전달된 정적 HTML 페이지를 Hydration (밑에 참고자료에 위키백과를 참고해주세요) 기술을 사용해 클라이언트에서 JavaScript가 페이지를 변경한다.

 

위는 토스 테크 블로그의 '환경 고민없이 개발하기' 에서 발췌해 온 Hydration 의 정의이다.

아래 참고자료에 적은 intelliJ Webstorm webinar 영상에서 질문타임에 리액트 서버 컴포넌트에서의 ssr은 php와 무엇이 다르냐 라는 질문이 나오는데 발표자분이 php는 일부 데이터가 바뀐 상황에서도 전체를 다시 불러오지만, 리액트 서버 컴포넌트는 일부 데이터가 바뀌면 바뀐 부분만 다시 렌더링한다 라고 하는 부분이 있다.
 
 SSG (정적 사이트 생성)와는 클라이언트에서 동적으로 이벤트를 실행할 수 있다는 점에서 구별된다.
 
서버에서 정적 사이트를 생성해서 주기 때문에 일단 화면에 무언가가 보인다. (-> 초기 렌더링 속도가 빠르다)
 

SSR을 안하게 된 이야기

 
Next.js 로 개발한 포트폴리오 사이트가 있다. SSR을 시도했으나 결국 SSG가 되었다.
채팅은 api를 비교적 많이 호출할 듯하여 컴포넌트에 async 키워드를 붙여서 네이버 챗봇 api를 호출하는 서버 컴포넌트를 만들었는데, api 호출될 때까지 화면이 안뜨는 문제가 있었다. 따라서 api 호출이 오래걸리면 화면이 뜰 때까지 기다려야 해서 아래 그림과 같이 SSG로 바꾸었다.
 
(SSR을 사용하게 되면 build 후에 나오는 아래 화면에서 aws lambda 아이콘 같은 아이콘이 뜨고 SSR이라고 써져있다 )
 

 
 

SSR 단점

- 보안
 
참고자료에 적은 intelliJ 영상에서는 컴포넌트에서 DB에 접근해서 데이터를 화면에 그리는 것을 보여주는데, 보안 측면에서 좋지 않다고 생각했다.
 
- 서버관리
 
이 부분은 따로 질문하고 찾아서 알게되었는데, SSR을 하면 관리해야할 서버가 생기고 서버관리까지 해야한다.
 

그렇다면 ISR은 무엇인가?

 
ISR 은 Incremental Static Regeneration의 약자로 빌드시 페이지를 생성한다는 점에서 SSG와 동일하지만
getStaticProps의 revalidate option을 사용하여 revalidate에 작성한 시간 후마다 api를 계속 호출해서 화면에 있는 데이터를 바꾸는 방법이다.
 
 데이터가 자주 바뀌는 페이지라면 ISR을 사용하면 될 듯하지만 revalidate 시간을 짧게 줘서 api를 자주 호출하게 되면 서버 부하가 커진다는 단점이 있다.
 
 

참고자료

 
- https://en.wikipedia.org/wiki/Hydration_(web_development)
- https://www.youtube.com/watch?v=phUhGC24ETo 

- 인프콘 2023 SSR의 기쁨과 슬픔: 렌더링의 변화와 흐름을 통해 알아보는 SSR과 Streaming SSR
https://www.inflearn.com/conf/infcon-2023/session-detail?id=748

https://www.inflearn.com/conf/infcon-2023/session-detail?id=748

- https://medium.com/uplusdevu/next-js-reactquery-isr-%EC%A0%81%EC%9A%A9%EA%B8%B0-2c7b5b73fe24
- 네이버 d2에 SSR관련 글이 있는데 아직 보기 전이다