일반 웹의 동작방식 vs React의 동작방식 vs Next의 동작방식(중요)

1. 기존 브라우저

기존 브라우저 특징: 사용자가 페이지를 업데이트 할때마다 서버에서 업데이트 된 화면 뿐만아니라 업데이트 되지 않은 화면 즉 모든화면을 보내줌

즉 다른 페이지로 이동할때마다 새로운 html을 받아오고 페이지를 로딩할때 마다 서버에서 리소스를 전달받아 해석한뒤 화면에 보여줌

문제점 :

2. React가 사용된 브라우저

REACT 가 사용된 브라우저 특징: React는 View 랜더링을 사용자가 담당하기 떄문에 처음에 View화면이 뜨다가 서버에 요청시 자바스크립트가 적용되는 모습을 보여준다.

사용자가 페이지를 업데이트 할때마다, Virtual Dom(업데이트된 DOM)과 실제 Dom이 비교해서 바뀐 부분만 실제 Dom에 적용해서 보여줌 (SPA)

문제점 : SPA는 앱의 규모가 커질수록 자바스크립트 파일이 커지므로, 페이지 로딩시 사용자가 실제 방문하지 않을수 있는 페이지의 스크립트까지 불러옴

그렇기에 자바스크립트 파일이 엄청 클경우 받아오는데 오랜시간이 걸리며, 빈 화면을 봐야하는 경우가 생김

해결방법 : 내가 들어간 페이지에서만 자바스크립트 파일을 가져오면 됨 (코드 스필리팅)

해결방법의 문제점 : 구현하고 환경설정하는데 오래걸림

3. Next.js가 사용된 브라우저

이미 스플리팅이 탑제 되어있어 , 내가 들어간 페이지 에서만 자바스크립트 파일을 가져옴

SSR 이므로 서버에서 이미 데이터가 요청된 상태에서 적용이 되므로, 빈 화면이 나오는 일이 없음, 또한 정적생성일경우 재활용함

추가적인 Next.js의 장점은 Next.js 폴더에 있음

4. 페이지 이동을 통한 일반페이지와 React 페이지(SPA) 비교

4.1 일반 브라우저에서 이동인 window.location.href

페이지를 이동할때 마다, 새로운 html을 받아옴, 이동할때마다 초기화 함

4.2 React에서 이동인 history.push

페이지가 이동할때마다 Stack에 쌓이는데 그 Stack들은 데이터를 가지고 있음

4.3 window.location.href vs history.push

A(컴포넌트이자,데이터요청함)

B(컴포넌트이자,데이터를 요청함)

C(컴포넌트)

4.4 A->B->C->B->A 이동

window.location.href 인 경우 A->B->C->B->A로 갈때마다 새로운 html과 리소스를 요청 (즉 계속 이동할때마다 초기화)

history.push 인 경우 A->B->C로 가다가 다시 C->B로 갈경우 B는 Virtual Dom과 기존의 것들과 비교롤 통해, 바뀐 부분만 실제 Dom에 적용해서 보여줌(SPA)

이렇게 때문에 정적인것을 굳이 React 로 구현할 필요가 없다는 거임, 정적인 페이지는 바뀐 부분이 없으니까 새롭게 요청하는거 다름없음

4.5 화면 이동을 통해 React 의 장단점

장점 : 첫 화면이 랜더링 될때는 당연히 새로운 html과 리소스를 요청하지만, 두번째 랜더링 될때는, 변화되지 않은건 그대로 사용하고, 새로운 변화된것만 화면에 보여준다.

단점 : 새로운 변화된것이 가져오는데 오래걸릴경우, 계속 기존화면만 나오다가 새로 변화된 화면이 늦게 나와버리는 문제가 생긴다.