220808 TIL
기존에 하던 프로젝트는 어쩌다 보니깐 GCP계정 서버가 3개가 돌아가는 중이다. 백엔드 서버, 프론트 서버, GCP첨부파일에 관한 서버이다. 백엔드 서버는 DNS를 바꾸면서 운영 중이지만, 첨부파일 서버는 기존에 것을 불러와야 하는 부분을 옮기는 과정이 애매해서 무료기간을 지나고 과금을 하고 있는 형태이다ㅠ. 프론트서버도 다른 팀원이 서버를 돌리고 있었는데 무료기간이 끝나서 이번 기회에 백엔드 계정과 같이 합치는 것에 대해 논의를 하였다. 프론트엔드는 스토리지를 통해서 배포하기 때문에 비교적 수월하였다. 이 이과정에서 배웠던것을 정리해보려고 한다.
Next.js
우선 React가 브라우저에 작동하기 위해서는 Next.js에 대해서 알아아했다. Next.js는 React기반 Framework이며 SSR, SEO, TypeScript 지원 등등을 제공해준다고 한다. Vercel이라는 곳에서 Next.js를 개발하였다고 한다.
클라이언트가 페이지를 가져오는 방법에는 크게 CSR과 SSR로 구분되는 그 차이점을 알아보기 전에 SPA에 대해서 알아보고 마지막으로 SSG까지 정리해보자.
SPA
기존 Page Lifecycle은 다음과 같다고 한다.
- Client에서 Server에 최초 요청을 보낸다.
- Server는 응답을 하고 Client에 화면을 보낸다.
- Client는 필요시에 요청을 Server에 보낸다.
- Server는 응답한다.
- 페이지가 Reload가 된다.
위 방식은 사용자가 새로운 요청을 보내고 응답을 받을 때마다 페이지가 다시 생성되기 때문에 비효율적이라고 볼수 있다고 한다. 그래서 위 문제를 해결하기 위한 벙법중 나온것이 SPA(Single Page Application)이라고 한다.
SPA는 필요한 정적 리소스를 최초 한번만 받는다. 그리고 변경이 있는 부분만 갱신되는 방식이라고 한다.
CSR과 SSR은 Server에서 HTML문서를 Client에 주어서 Client에서 렌더링 하는 것인지 아니면 Server에서 HTML문서를 렌더링해서 Client에 보내주는 것인지에 따라 방식이 나뉜다고 한다. 위에서 얘기한 SPA방식은 CSR방식이라고 볼 수 있다고 한다.
CSR
Client Side Rendering동작 방식은 다음과 같다.
1. 서버에서 브라우저로 응답을 보낸다.
2. 브라우저는 JS를 다운을 받는다.
3. 브라우저는 React를 실행한다.
4. 페이지와 상호작용을 할 수 있게 한다.
CSR의 장점은 초기 로딩속도를 제외하면 나머지 부분에서는 빠른속도를 보여준다고 한다. 단점이라고 한다면 초기 속도와 SEO때문이라고 하는데... SEO는 무엇인가? Search Engine Optimization의 약자로 검색최적화를 뜻한다. 웹 크롤러 봇이 웹페이지를 돌아다니면서 데이터를 축척하는데, CSR방식을 선택하면 웹 크롤러에게는 빈페이지로 인식하여 검색엔지에 카운팅이 안된다고 한다.
SSR방식은 이런 단점에 유리한 방식이라고 한다.
SSR
Server Side Rendering 동작 방식은 다음과 같다고 한다.
1. 서버가 렌더링한 HTML을 준비 되었다고 브라우저에게 보낸다.
2. 브라우저는 렌더링을 하고 페이지는 볼 수 있게 된다.
3. 브라우저가 JS를 다운로드 한다.
4. 브라우저가 React를 실행한다.
5. 페이지가 상호 작용할 수 있게 한다.
SSR은 렌더링한 페이지를 대기하고 있기 때문에 CSR에 비해 로딩시간이 상대적으로 짧은 편이라고 한다. 그리고 위에서 언급했던 SEO가 가능하다고 한다. 단점으로는 서버 부하가 많이 발생하고 사용자가 페이지 전환시 깜박거리는 느낌을 받을 수도 있다고 한다.
SSG
Static Site Generation 이라고 하고, 공홈에서는 Static Generation이라고 한다. SSR에서 서버에서 HTML 문서를 랜더링을 한다고 하였는데, SSG는 HTML 문서를 미리 랜더링한 것이라고 볼 수 있다. 이방법은 모든 페이지를 매번 랜더링할 필요가 없기 때문에 유용한 방식이라고 본다. 하지만 SSG도 단점은 있다. 빌드 할 때 전체를 매번 다시 만들어야 하기 때문에 컨텐츠를 자주 업데이트하는 경우 적합하지 않다는 것이다. 이렇게 등장한 것이 React에서는 Next.js / Gatsby.js가 있다고 한다. Vue의 경우에는 Nuxt.js가 있다고 한다.
마치면서
SSG방식으로 웹을 올리면서 개념을 살짝 잡으려고 알아봤다. 역시 방대한 내용에 간략하게나마 집고 넘어거야겠다.
참조
[SSR, SSG, JAM Stack이 뭔가요? (+ CSR, SEO, Next.js, Nuxt.js, Gatsby), 얄팍한 코딩사전 YouTube, 2022년08월09일 접속]
https://youtu.be/5ILR9Vd_Vos
[NextJS, 그게 뭔데?, velog, 2022년08월09일 접속]
https://velog.io/@skypedanny/NextJS-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0
[CSR, SSR을 이해해야 하는 이유? SEO, tistory, 2022년08월09일 접속]
https://hyothorhyo.tistory.com/19
[[FE] CSR(Client-Side-Rendering) vs SSR(Server-Side-Rendering) (feat. React를 중점으로), velog, 2022년08월09일 접속]
https://velog.io/@longroadhome/FE-CSRClient-Side-Rendering-vs-SSRServer-Side-Rendering-feat.-React%EB%A5%BC-%EC%A4%91%EC%A0%90%EC%9C%BC%EB%A1%9C
[SPA와 SSG, 그리고 SSR, daleseo, 2022년08월09일 접속]
https://www.daleseo.com/spa-ssg-ssr/
