끄적끄적

NextJS의 강점은 바로 CSR/SSG/SSR/ISR을 모두 사용가능하며, 이를 이용한 SEO 향상 및 많은 장점들이 있습니다. 오늘은 간단하게 위 네가지의 사용법과 차이점에 대해서 알아보겠습니다. 먼저 코드로 부터 간단하게 보겠습니다. 1. CSR (Client-Side-Rendering) - 동적으로 변화하는 컨텐츠들을 계속 실시간으로 빠르게 변화시켜줄 수 있다 - 페이지 초기 로딩시 불러오는 데이터에 따라 로딩이 느릴 수 도 있으며, 새로고침시 페이지 깜박 거림발생 - SEO(Search-Engine-Optimization, 검색엔진최적화)에 약하다. 이는 웹서비스에 있어 치명적일 수 있다 function Csr(){ useEffect(() => { // 데이터 호출 }, []) return ( ..

오늘은 핫한 SPA의 원리인 SSR(Server Side Rendering) 과 CSR(Client Side Rendering) 에 대해서 공부하겠습니다. ! Rendering이란? 서버로 부터 받은 HTML 의 정보를 받아 우리가 지금 보는 화면에 보여지는 과정입니다. 그렇다면 CSR과 SSR의 차이를 알아보겠습니다. ■ Server Side Rendering 서버 사이드 랜더링은 말 그대로 어떠한 요청 시마다 서버(프론트엔드가 돌아가고있는 환경)에서 자원을 가져와 랜더링을 해주는 것입니다. ■ Clinet Side Rendering 클라이언트 사이드 랜더링은 최초 로드시 필요한 파일들을 모두 받고 사용자의 인터랙션에 따라 클라이언트단에서 받아와 랜더링을 해주는 것입니다. ! SSR vs CSR 의 장..