오늘 면접에서 받았던 질문 중, 대답을 가장 제대로 하지 못했던 2가지 질문이 있었다.
- Hydrate 관련 질문
- SSR, SSG, ISR에 대한 질문
특히 SSR, SSG, ISR 관련 질문은 Next.js를 공부하면서 한 번씩 알아두었어야 하는 개념이었을텐데 제대로 대답하지 못한 게 아쉬워서 이번에 정리해보려고 한다..ㅎㅎ
그래도 모른다고 포기하지는 않았다 ...!
SSR에 대해서라도 말씀드리고 싶다 요청했고, 흔쾌히 응답해주셔서 편하게 말할 수 있었다😻
그럼 머릿속에 3가지 렌더링 방식에 대한 지식을 넣기 위해 정리를 하러 가보자!
💜 SSR
SSR은 지금까지 공부해오며 많이 들어왔던 개념이었기에 수월하게 설명할 수 있는 것 중 하나였다.
Client Side Rendering인 CSR과 반대의 성격을 가진 렌더링 방식으로, 요청한 템플릿을 서버에서 모두 렌더링하여 완성된 페이지를 클라이언트 측으로 보내 사용자에게 보여주는 렌더링 방식이다.
서버에서 템플릿이 만들어져 전달되기 때문에 로딩되는 동안 검색 엔진이나 검색 로봇이 크롤링하며 완성된 페이지를 걸러낼 수 있고, 그렇기에 SEO 최적화를 하는 데 도움이 되는 렌더링 방식이라고들 하는 것이다.
그러나 페이지를 이동할 때마다 새로운 페이지를 요청하기 때문에 CSR보다는 UX적으로 좋지 못하다는 단점이 존재하기도 한다.
💜 SSG
SSG는 Static Site Generation의 약자를 의미한다.
영어에서 의미를 알 수 있듯이 "정적 사이트 생성하는 것" 으로 빌드 시 페이지가 생성된다.
즉, 웹사이트의 모든 페이지를 미리 렌더링하여 준비한 뒤, 클라이언트 요청에 따라 필요한 페이지를 바로 보여줄 수 있는 렌더링 방식이다.
데이터베이스나 서버 측 프로세스가 필요없는 단순 정적 페이지를 만들 때 유용하고, 미리 준비되어 있어 매우 빠르다는 장점을 가지고 있다.
그러나 빌드 시 정적 페이지가 생성되어버리기에, 새로운 페이지를 만들어 넣고 싶다면 다시 빌드하여 배포해야 하는 수고로움이 발생하기도 한다.
💜 ISR
ISR은 Incremental Static Regeneration의 약자를 의미한다.
ISR은 SSR과 SSG 방식이 합쳐진 효율적인 렌더링 방식이다.
SSG는 필요 시 직접 새로 빌드하지 않으면 업데이트 되지 않는 너무나도 정적인 특징을 가지고 있지만, ISR은 지정한 시간이 지나면 자동으로 빌드되며 데이터를 업데이트 해준다.
SSR와 마찬가지로 서버에서 모든 페이지를 렌더링하여 준비한 뒤, 클라이언트 요청에 따라 보여주기 때문에 매우 빠르다는 장점이 있고, 다시 배포하지 않아도 된다는 장점을 가지고 있다.
그러나 타이밍을 맞추지 못하면 업데이트가 되지 않은 이전 상태의 웹 사이트를 보게되는 단점이 존재하기도 한다.
이렇게 정리해두었으니 렌더링 방식들을 까먹을 것 같을 때 자주 확인해보자😔
➕ hydrate는 좀 더 이해를 해보고 내일 빠르게 작성해보고자 한다.... 내용이 어렵더라고...
