[Next.js] SPA(Single Page Application)

진기명기 2023. 8. 21. 08:26

Next.js의 SSR과 SPA에 대해서 알아보고, <Link>를 사용하면 좋은 점에 대해서 설명하고자 한다!

💁‍♀️ Next.js SSR(Server Side Rendering)이란?

SSR(Server Side Rendering)은 서버 측에서 초기 로딩을 수행하고, 렌더링 된 완전한 HTML을 사용자에게 반환한다.

❗️ React의 경우, JavaScript로 페이지를 로드하기 때문에 Disabled javascript를 할 경우, 페이지가 렌더링 되지 않는다.
⭕️ 그러나 Next.js는 SSR을 지원하기 때문에 서버에서 초기 렌더링을 수행하며, SEO(Search Engine Optimization)를 개선할 수 있다. (SEO : 검색 엔진 최적화)

👀 Next.js SPA(Single Page Application)이란?

SPA(Single Page Application)은 웹애플리케이션이나 웹사이트를 한개의 웹페이지로 구현하는 방식을 나타낸다.

✅ SPA는 초기 페이지 로드 이후에 페이지 전체를 다시 로드하는 대신 필요한 데이터만 교체하여 사용자에게 동적으로 콘텐츠를 제공한다. 따라서 속도와 성능에서 이점을 가짐!

아래 예시를 통해 <a> 태그와 <Link> 태그를 사용하여 비교해보자!

1️⃣ <a> 태그 사용

✅ 개발자도구 > 네트워크 > 빠른 3G로 변경한 후, 확인

위에 영상을 보면 새로고침 시, 초기 로딩이 11.43초가 걸린 것을 확인할 수 있으며, <a> 태그로 생성한 링크를 클릭하면 10.72초가 걸린 것을 확인할 수 있다.

❗️ 속도가 느릴 뿐 아니라, 성능면에서 비용도 많이 든다는 단점이 있다.

▶️ <a> 태그 사용

▶️ 초기 렌더링 11.43초

▶️ <a> 태그로 생성한 링크 클릭 10.72초

2️⃣ <Link> 태그 사용

✅ 개발자도구 > 네트워크 > 빠른 3G로 변경한 후, 확인

위에 영상을 보면 초기 로딩 이후 <Link>로 생성한 목록을 누를 경우, 해당 페이지만 동적으로 콘텐츠를 제공하는 것을 볼 수 있으며, 속도가 빨라진 것을 확인할 수 있다.
또한 같은 링크를 다시 클릭하면 이미 불러온 데이터를 다시 다운로드할 필요 없이 미리 캐시 된 데이터를 사용하여, 네트워크 부하를 최소화하고 더 나은 성능을 제공할 수 있다.

이를 통해 <Link> 태그를 통해 SPA의 장점을 활용할 수 있음을 확인!

▶️ <Link> 태그 사용