🌈 시작하며

벌써 이제 컴포넌트를 얼추 완성시키고, 페이지를 만들게 됐어요~

저도 지금 처음 만져보는 개발자로서 익숙치는 않지만, 우리가 더 나은 프로젝트를 수행하는 데 있어 필요할 것 같아 글을 남깁니다 😆

⭐ 본론

우리는 다음과 같은 내용을 현 문서에서 톺아볼 거에요.

<aside> 💡 1. CSR, SSR, SSG가 뭐에요? SSR과 SSG의 차이점은 무엇이죠? 2. 그렇다면, 이를 어떻게 내부에서 구현하죠? 3. 페이지는 어떻게 구성하는 거죠? 4. 페이지에 따른 전역 상태는 어떻게 지정하죠? 5. axios는 어떻게 다뤄야 할까요?

</aside>

1. CSR, SSR, SSG가 무엇인가요?

<aside> 💡 우선, 다음 이야기를 한 번 살펴보시죠!

우리가 정보처리기사 시험을 봤다고 생각해볼게요.

우리의 시험 결과는 다음 달에 나오기로 결정이 됐어요. 그런데, 갑자기 당일, 전산에 대한 오류가 생긴 거에요. 그러나 저는 지금 당장 시험 결과를 알아야 해서, 시험 결과를 조회했어요.

하지만, 안타깝게도 조회를 할 수 없었답니다. 왜냐구요? 모든 것은 데이터베이스에서 불러와야 했는데, 데이터베이스가 지금 먹통이거든요.

</aside>

이게 마치 SSR과 CSR의 차이라고 볼 수 있어요. 현재 조회를 해주는 사람을 검색 봇이라고 생각해봅시다. 그렇다면, 검색 봇은 저희 페이지를 어떻게 분석할 수 있을까요?

<aside> 💡 검색 봇의 기준은 항상 HTML과 같은 정적 문서, 파일이에요.

</aside>

SPA(Client Side Rendering)의 한계

그런데, SPA의 한계가 무엇일까요? 바로 HTML은 단지 app만 있다!고 써져 있는 거죠.

클라이언트 사이드 렌더링은 클라이언트에서 모든 내용들을 자바스크립트 코드로 해석해서, 데이터를 불러와서 렌더링 시켜줘요.

따라서 검색 엔진은 아무것도 이를 모르는 상태에요. 응? 문서 하나 있는 애네? 하고 넘긴다는 거죠.

<aside> 💡 그렇기 때문에 검색 최적화가 불가능하다는 단점이 존재한다는 얘기가 나오는 거에요.

</aside>