웹 동작 방식
SPA
SPA (Single Page Application)
현재 웹사이트는 과거보다 실시간으로 많은 인터렉션이 일어난다. 페이스북, 인스타그램 처럼 화면 깜박임이 없으면서 부드럽게 잘 동작하는 웹사이트 개발이 필요함
React는 CSR 방식을 채택하며 초반에 표시되는 index.html 파일 외에 html문서는 없으며 index.html 파일의 내용을 자바스크립트를 이용해 재 렌더링 해주는 방식으로 페이지를 구성한다. 따라서 페이지 별로 파일을 구성하지 않고, 표시해주어야 할 내용을 각각 컴포넌트 형식으로 구성한다.
Virtual DOM
DOM(Document Object Model)의 약자로 주로 html 문서 내에 요소를 말한다. querySelector, getElementbyID 같은 것들로 직접 DOM 요소를 찾아 직접 조작한다. 이렇게 직접 요소를 조작하는 방식은 페이지 내에 정보가 변할 때마다 다시 페이지를 로드해야 해서 페이지 용량이 크면 클수록 느려지는 단점이 있다.
Virtual DOM의 동작하는 방식은 인터렉션이 일어나면 Virtual DOM에 의해 구성된 DOM트리는 이전 페이지와 바뀐 부분들을 감지한다. 그래서 변화된 부분만 재 렌더링을 해준다. Virtual DOM이 감지하는 일은 실제 렌더링을 하지 않기 때문에 빠르다.
CSR방식으로 한번에 모든 정보를 받고 Virtual DOM을 이용해 페이지 내에 변한 부분만 감지해서 그 부분만 변경해주게 되면 훨씬 부담을 줄일 수 있다.
SSR
SSR (Server Side Rendering)
SSR(Server Side Rendering)의 경우에는 먼저 인덱스 페이지에 표시되어야 할 html 파일을 먼저 브라우저가 다운 받고 그 후 javascript 파일도 다운받는다. javascript를 다운 받는 동안에 html 파일의 렌더링을 시작하기 때문에 웹페이지 표시가 빠르다. 링크를 타고 페이지 이동시 해당 새 링크의 html을 다운 받고 이어서 javascript를 다운받는 일련의 과정이 반복된다.
렌더링이 빠른 장점이 있지만 페이지를 이동할 때마다 화면 깜박임(화면이 로드될 때마다 백지였다가 출력되는 과정)이 있다.
웹페이지의 용량이 무거우면 화면 깜박임이 길어져 사용자 경험이 나빠질 수 있다.
CSR
CSR(Client Side Rendering)
CSR(Client Side Rendering)의 경우에는 맨 처음 url요청에 웹문서가 가지고 있는 모든 정보,링크페이지까지 한번에 다 받아온다.
초기 화면 로드가 느리다. 하지만 로드가 완료되면 사이트 내에서 돌아다닐 때마다 로드되는 과정이 없어지므로 사용성이 좋아짐
하지만 링크 이동을 할 때 javascript를 이용해 동적으로 화면을 바꿔주므로 html문서가 가지고 있는 정보가 적어서 검색엔진들이 웹사이트를 제대로 걸러지지 못하게 된다. 또한 상단에 노출이 적어져 회사가 CSR을 사용한다면 큰 손해를 볼 수 있다.
즉, SEO(검색엔진 최적화)가 나쁘다
Next.Js
Next.JS
NextJs는 React에서 SSR을 쉽게 구현할 수 있도록 도와주는 프레임워크다. React 자체에서도 SSR을 구현할 수 있지만, 구현의 복잡함과 어려움 등 여러 문제들이 있다. NextJs는 이러한 문제들을 간단하게 해결할 수 있도록 도와주고 NextJs를 통하여 SPA의 장점과 SSR의 장점을 모두 가져갈 수 있다.
초기에 SSR로 렌더링한 HTML을 보내기에 SEO에 유리해지고, 페이지를 변경할 때마다 CSR방식으로 처리하기 때문에 SPA장점도 유지할 수 있다
