CSR, SSR, SSG

사용자가 웹사이트에 들어오면 html파일을 받아오는데 , 텅텅비어있고 오직 JS파일만 있다. JS파일을 서버에 요청해서 받아온다. 이때 앱에 필요한 모든 소스코드를 받아오게된다.

웹사이트에 접속하면, 서버에서 렌더링에 필요한 모든 데이터를 가져와서 html파일로 만들어서 사용자에게 보내준다. 이렇게하면 첫페이지 로딩이 매우 빠르기 때문에 좋은 사용자경험을 가져온다.

또한, 모든 컨텐츠가 html에 담겨져있기 때문에, SEO가 매우 효율적이다.

그러나, 이후 사용자가 다른 요청을 할때 다시 서버에서 전체 html파일을 가져와야하기 때문에 데이터비용면에서 비효율적이다.

화면이동시 하얀색 화면이 보이게된다.

사용자가많고 데이터정보가 많은 서비스면 서버에 부담이 커서 서버에 과부하가 걸리기 쉽다.

TTV(Time To View) 와 TTI(Time To Interact)의 시간이 다르다.

사용자가 빠르게 첫 렌더페이지를 확인 할 수 있지만, 동적으로 데이터를 처리하는 JS파일을 아직 받아오질 못해서 사용자의 요청에 반응이 없을 수 있다.

SEO는 검색엔진최적화. 웹 크롤러, 봇들은 html에서 컨텐츠를 수집해서 검색을 도와준다.

Static Site Generation

리액트(CSR)로 만든 앱을 Gatsby로 정적으로 웹페이지를 미리 생성해두고 , 서버에 배포해둘 수 있다.

이렇게 만들어두면 CSR의 단점을 최소화 시킬 수 있다. 또한 정적페이지에 JS파일을 가지고 있을 수 있어서 동적인 이벤트도 해결 할 수 있다.

Next.js는 SSR을 지원하는 라이브러리이다. NEXT의 장점은 리액트로 SSR을 작성할 수 있고

SSG도 지원해서 SSR의 장점과 SSG의 장점을 동시에 누리며 활용할 수 있다.