Hyunseok
프로그래밍/개인홈페이지 SSG vs SSR 무엇을 선택할까
2023. 1. 23. 14:36

발단

 

블로그 제작도 막바지에 들어섰고

 

이제 SEO처리를 위해 타이틀, 내용, 이미지 등등 여러 헤더 작업을 끝내고

 

ssr이냐 ssg를 선택해야 한다

 

사실 둘 다 비슷한 거 아니야?라고 생각했는데

 

이번에 nextjs 공식 다큐먼트에서 그 내용을 자세히 알 수 있었다

 

 

 

https://nextjs.org/docs/basic-features/pages#static-generation

 

Basic Features: Pages | Next.js

Next.js pages are React Components exported in a file in the pages directory. Learn how they work here.

nextjs.org

 

일단, nextjs는 가능하다면 ssg를 권장한다 ssr은 서버에서 싸악 렌더해서 오는 것이니

비교적 느린 게 당연하고 더 빠른 ssg를 쓸 수 있다면 써라 라는 마인드인 듯하다

 

일단 들어가기 전에 내가 원하는 조건을 나열해 보자

1. 업데이트 사항이 늦으면 안 됨(공개/비공개)

2. 그렇게 많은 유저를 유입시킬 생각이 없음(메인은 티스토리, 어디까지나 기록용 보조 블로그)

3. 인트로/블로그/포트폴리오 3 섹터로 그래도 조금씩 많이 올라오고 바뀔 예정

 

 

SSG

SSG는 빌드시점에서 HTML로 만들 수 있는 부분을 미리 만들어버린다

그리고 나머지 데이터를 냅다 페칭 해서 불러오는 방식이다 

 

SSG를 하루정도 구글링해보니 on-demand로 다이나믹 경로로 생성되는 페이지도 만들어 준다고 한다

얘로 결정하려고 여러 사항을 구글링 해서 찾아보니 

 

적용시키려면 1번부터 문제가 생긴다

 

만약 내가 페이지를 생성하고 그 페이지를 hide 해야 할 상황이 생길 경우,

cdn에서 긁음 > 글을 비공개로 돌림 >  한 달이 지남 > 글 방문

누군가가 이 페이지를 방문하지 않는 이상 생명 주기가 1초던 1년이던

일단 다음 방문 시점에서의 리빌드가 일어난다

그러면 누군가는 비공개인 글은 한 번은 보게 된다는 것이니.. 꺼림칙하다 

 

비슷한 맥락으로 3번도 똑같은 이유로 문제이다 고로.. ssg는 탈락

 

SSR 

얘는 주소에 접속하면 냅다 서버로 html을 요청하고 받고 > js 요청 > 후처리

이런 식이다 중간 js까지의 텀에 로딩이 생길 수 있지만 장점은 무조건 최신의 내용으로 렌더링 한다는 점

 

누군가가 페이지에 접근했을 때 봇이 이전 글을 서버에서 긁어갔다 해도

일단 접속은 새로운 내용으로 서버에서 긁어 보여주기에 어느 정도 보완이 가능하다

 

1, 3번을 만족하고 2번에서 약간 아쉽지만 어디까지나 보조용이니 그리 필요하지는 않다 판단.

이 녀석으로 골라 적용시키기로 했다 

 

사실 보조용이면 RCA 템플릿으로 csr방식을 써도 문제가 없어 보이지만

 

그래도 사람이 욕심이 있고 공부도 하고 싶은 마음이 생기니 ssr을 적용해 보자 

 

글이 중구난방이긴한데 더 자세한내용은 여기가 더 좋아보이니 여기서도 읽어보자

https://serip39.hatenablog.com/entry/2020/08/23/225000

 

Client Side Rendering(SPA)・SSR・SSG を整理してみた - 7839

Next.js で開発しているときに、Client Side Rendering(SPA)・SSR・SSG についてきちんと整理できておらず、自分なりの整理をしてみたので、備忘録として残しておく。(React ベースのフレームワー

serip39.hatenablog.com

 


프로그래밍/개인홈페이지의 다른 글