Single Page Application

SPA 🧚🏻‍♀️

• 전통적인 웹 애플리케이션과 달리 페이지 전체를 새로 로드하지 않고, 필요한 부분만 동적으로 부드럽게 업데이트하는 웹 애플리케이션 아키텍처
• React, Angular, Vue, Svelte 등의 라이브러리들을 통해 적용할 수 있다.

SPA의 단점

1. 웹페이지들을 구글 검색 결과에 노출 시키는게 매우 어렵다.
   검색 엔진 최적화(SEO) 문제
   • 전체 페이지를 새로 로드하지 않고 필요한 부분만 동적으로 업데이트 하기에 검색 엔진이 페이지의 콘텐츠를 제대로 인식하기 어려울 수 있다.
2. 자바스크립트 파일 사이즈가 너무 커져 첫페이지 로딩시간이 저하된다.

이게 싫으면 Server-side Rendering을 하면 된다. html을 클라이언트가 아닌 서버에서 생성하여 클라이언트에 전송하는 방식입니다. (이것은 옛날 방법)

• 참고로 클라이언트 측에서 JavaScript를 사용하여 HTML을 생성하고 조작하는 방식을 Client-side rendering 이라고 한다.

State Management

단점은 이런 라이브러리들을 사용할 때 프론트엔드에는 DB가 없기 때문에 필요한 데이터를 자바스크립트 변수 문법에 저장하고 관리해야하는 어려움이 있다.
이러한 변수들을 관리하는 행위를 State Mangement라고 한다. 그것들을 쉽게 도와주는 외부 라이브러리엔 redux recoil 등이 있다.

SSR은 이러한 변수관리 문제가 상대적으로 적다. 서버에서 필요한 데이터를 처리하고 HTML 페이지를 생성하기 때문에, 클라이언트 측 변수 관리의 부담이 줄어든다.

Meta Framework

React, Vue.js, Svelte 등의 프레임워크와 유사한 문법으로 server side rendering을 하고 싶다면?
Next.js, Nuxt.js, Remix, SvelteKit 등의 라이브러리를 설치해서 쓰면 된다. 자바스크립트 문법으로 간단하게 서버를 만들 수 있고 Server-side Rendering을 지원하여 풀스택 개발이 가능하다.

Serverless

서버 역할을 대신해주는 서비스(Firebass, Supabase)도 있다.