하나씩 배워나가는 개발일지

CSR이 가진 단점을 극복하기 위해서 SSR 개념을 부분적으로 적용하고 싶을 수 있다.SPA 방식인 React에서 Next.js 프레임워크를 사용하여 SSR을 적용하는 방법에 대해 알아보고 Next.js에서 사용되는 렌더링 방식인 SSR, SSG, ISR 방식의 차이에 대해서 배워보도록 하자. Pre-RenderingNext.js는 렌더링을 할 때 기본적으로 pre-rendering(사전 렌더링)을 수행한다.사전 렌더링이란 서버단에서 DOM 요소들을 Build하여 HTML 문서를 렌더링하는 것을 말한다. 또 하나의 중요한 개념으로는 Hydration이 있다.Hydration이란 이렇게 미리 렌더링된 HTML에 JavaScript를 결합하여서 이벤트가 동작할 수 있도록 만드는 과정을 말한다.하지만 이러한 ..

지금 우리가 보고 있는 브라우저의 화면은 브라우저 렌더링 과정을 통해 만들어진 것이다.렌더링 방식은 클라이언트와 서버 중 어느 쪽에서 화면을 만드는지에 다라 CSR, SSR로 나뉜다.두 방식의 차이를 이해하기 위해서는 SPA와 MPA의 이해가 선행되어야 한다.먼저 **SPA, MPA**의 개념을 이해하고 **CSR, SSR**의 차이에 대해 알아보자.SPA와 MPASPA(Single Page Application)하나의 HTML 페이지에서 새로운 페이지를 불러오지 않고 필요한 부분만 동적으로 컨텐츠를 바꾸는 어플리케이션MPA(Multiple Page Application)여러 개의 페이지로 이루어져 있으며 사용자가 페이지를 요청할 때마다 서버에서 렌더링된 HTML를 받아와서 컨텐츠를 변경하는 어플리케이션..