https://opentutorials.org/course/5098/32351
Single Page Application - 생활코딩
소스코드 https://github.com/egoing/nextapp/commit/e0dc92feeb55b80239f0015792a60f281f930001 라이브 예제 https://nextapp-9efh7p3uc-egoing.vercel.app/ 우리가 하고 싶은 것 링크를 클릭하면 페이지 전체 리로딩이 일어나지 않
opentutorials.org
를 참고하여 공부하고 있습니다.
SPA(Single Page Application )
=> 하나의 페이지에서 모든 작업을 처리
next.js 에서는 Link를 이용하여 SPA를 구현한다.
Link를 이용하면
1. 페이지 리로딩 X
2. 방문페이지 다운 X
3. 미리 페이지 다운 O
----
근데 SPA가 뭔데?
---
React, vue, angular 프레임워크가 모두 SPA 프레임워크이다.
SPA 는 모던 웹의 프레임워크라고 생각하면 된다.
SPA ( Single Page Application, 현재 ) <> MPA (Multi Page Application, 과거)
과거는 사용자가 메뉴 클릭시 완선히 새로운 페이지를 서버에서 전송한다.
-> 즉, 서버는 DB에서 데이터를 가져와 HTML로 만들고 전송한다.
-> 페이지가 요청될 때마다 서버가 일을 해야한다.
but, SPA는 최초 접근 시 단 한번만 다운로드해서 서버에 부하를 줄인다.
변경이 필요한 특정부분만 Ajax를 통해 변경한다.
------
SPA는 웹앱을 네이티브앱 같이 퍼포먼스를 향상시킬수있다.
SPA는 수정된 부분만 렌더링을 하기에 사용자가 편하다.
서버 : 정적 웹과 같이 HTML, CSS, JS 코드들을 브라우저로 전송하는 역할
나머지는 웹브라우저가 하도록한다.
<참고 블로그 >
https://velog.io/@kws60000/SPASingle-Page-Application-1-%EB%93%B1%EC%9E%A5-%EB%B0%B0%EA%B2%BD
SPA(Single Page Application) - [1] 등장 배경
많은 웹 프론트엔드 개발자가 React, vue, angular 프레임워크를 사용하여 개발한다.이들은 모두 SPA 프레임워크이다. 그런데 SPA는 뭘까?SPA를 설명하기 앞서, SPA는 모던 웹의 패러다임이라고 한다.과
velog.io
https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/
[WEB] SPA 란?
SPA 중심에는 대표적인 라이브러리/프론트프레임워크 React, Vue/Angular가 있다.
linked2ev.github.io
[SPA 프론트엔드 프레임워크] Angular, React, Vue 란?
SPA : Single Page Application SPA가 등장한 이유? 빠르고 강력한 MVC 패턴의 등장으로 빠르게 웹사이트를 만들 수 있으나, 1. 좋아요 하나 클릭하면 깜빡 하면서 새로고침 되는 불편함 2. PC용 / 모바일용 /
aspring.tistory.com
'개발공부 > NEXT.js' 카테고리의 다른 글
| 한입크기 next.js 이정환_강의 구매_블프25%할인_인프런 (2) | 2024.11.25 |
|---|---|
| 포트포워딩_localhost를 외부에서 접속하도록 만드는 법_공유기설정 (0) | 2024.09.01 |
| Next.js 프로젝트 생성_node.js, npm 설치 확인 (1) | 2024.08.28 |