끄적끄적

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

Next는 React 전용 프레임워크입니다. React에서 Sever Side Rendering을 쉽게 하기 위해 만들어진 프레임워크입니다. CSR(Clinet Side Rendering) 과 SSR(Server Side Rendering)은 이전의 블로그를 참고해주시면 되겠습니다. ! Next의 특징 ● React에서 SSR을 가능하게 해준다. SPA의 큰 단점 중 하나는 첫 페이지에 빈화면을 먼저 받고 JS파일을 해석하며 화면을 구성하기 때문에 SEO에 가장 큰 문제를 갖고 있습니다. React만으로도 SSR을 구현할 수 는 있지만 매우 복잡하고 까다롭다고 합니다. 이를 Next를 통해 해결할 수 있습니다. 완성된 HTML파일을 처음에 받아오게 하여 맨 처음 화면의 로딩 속도 또한 빠르게 해줍니다. ..

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