Space
article thumbnail
Published 2023. 6. 30. 18:08
[React] SPA React & NextJS
반응형

SPA 란?

(Single-Page Application)

 

서버로부터 완전한 새로운 페이지를 불러오지 않고, 페이지 갱신에 필요한 데이터만 받아

그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 어플리케이션이나 웹 사이트를 말합니다.

 

SPA 등장 전

● 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분까지 포함된

     완전한 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다.

 

● 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다.

     이로 인해 화면 전환이 일어나면 화면이 순간적으로 깜빡이는 현상이 발생한다.

 

SPA 등장 후

장점

변경할 부분을 갱신하는데 필요한 데이터만 서버로부터 전송받기 때문에

     불필요한 데이터 통신이 발생하지 않는다.

 

변경할 필요가 없는 부분은 다시 렌더링 하지 않는다.

     따라서 화면이 순간적으로 깜빡이는 현상이 발생하지 않는다.

 

단점

HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일에 들어있기 때문에 

     ○ JavaScript 파일의 크기가 커지고, 그로 인해 첫 화면 로딩 시간이 길어집니다. 

     ○ 검색 엔진 최적화(SEO, Search Engine Optimization)에 좋지 않습니다.


 

 

React SPA 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.

 

 

반응형
profile

Space

@Space_zero

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!