정적 웹? 그게 무엇인가? + 동적 웹

📖정적 웹이란?

서버에 미리 저장된 파일(HTML, JS, CSS, 이미지 등)을 사용자(User, Client, Browser)에게 전송합니다. 미리 저장된 파일을 전송하기 때문에 사용자는 누가 언제 어디서 접속하던 같은 결과를 보게 됩니다. 전송하기 전이나 전송하고 나서 추가적인 처리가 필요 없기 때문에 전송 속도가 빠르고 서버 비용이 적다는 장점이 있습니다. 하지만 변경을 위해서는 서버에 저장된 파일을 수정해야 하기 때문에 관리가 복잡해지고 제공할 수 있는 정보나 서비스가 단조로워질 수 있다는 단점이 있습니다.

 

📖동적 웹이란?

정적 웹과 달리 미리 저장된 파일이 아닌 요청에 따라 만들어진 파일을 사용자에게 전송합니다. 요청, 조건, 사용자에 따라 각자 다른 결과를 보게 됩니다. 동적 웹은 만들어진 파일을 사용자에게 전달하게 되는데 어디서 만들어지느냐(=Rendering)에 따라 CSR과 SSR로 나눌 수 있습니다. 또한 페이지 전환 방식에 따라 MPA와 SPA로 나뉩니다.

1. CSR: Client Side Rendering의 약자로 클라이언트에서 렌더링이 발생합니다. 클라이언트에서 사용되는 Browser(Chrome, Edge, Safari 등)에서 작업이 진행됩니다. 처음에는 최소한 HTML을 받아서 로드합니다. 데이터가 필요한 경우 서버에 요청을 보내 데이터를 받아 화면을 그려줍니다. 거의 모든 동작을 클라이언트 측에서 해결합니다.
2. SSR: Server Side Rendering의 약자로 CSR과 다르게 요청이 들어오면 데이터, 로직 연산 등 동작을 마치고 완성된 HTML을 클라이언트에게 넘겨줍니다. 서버에서 거의 모든 동작을 해결합니다.
3. SPA: Single Page Application의 약자로 하나의 페이지로 이루어져 있어 전체 페이지를 다시 로드하지 않고 페이지 내부에서 일부 또는 전체를 바꿔가며 화면을 보여줍니다. 정적 리소스 로드 시 최초에 모든 정적 리소스를 다운로드하여 내부 화면을 바꿉니다.
4. MPA: Multiple Page Application의 약자로 SPA와 다르게 여러 페이지로 이루어져 있어 새로운 페이지를 요청할 때마다 리소스를 다운로드하여 화면에 보여줍니다.

네 가지 종류를 조합해서 다양하게 사용할 수 있습니다.

	CSR	SSR
SPA	클라이언트 측에서 전체 페이지 렌더링 + 동적인 페이지 전환	서버에서 초기 HTML 렌더링 + 나머지 로직 클라이언트 처리
	장점   - 페이지 전환이 빠르다   - 동적인 사용자 인터페이스에 최적화 되어 있다 단점   - 초기 로딩 속도가 느리다   - SEO에 불리하다	장점   - 첫 화면 로딩이 빠르다   - SEO에 유리하다   - 페이지 전환이 빠르다 단점   - 서버 부하가 커질 수 있다   - 서버와 클라이언트 양쪽에서 동일한 코드를 관리하기에 복잡성이 증가한다
	대규모 웹 애플리케이션, 상호작용이 많거나 실시간 데이터 변경이 중요한 서비스. 대시보드, 소셜 미디어 등	SEO가 중요한 동적 웹 애플리케이션. 전자상거래 사이트, 블로그 등
MPA	각 페이지가 별도의 HTML로 제공 + 페이지 별로 클라이언트 측에서 JS로 동적인 콘텐츠 관리	서버에서 렌더링 + 새로운 HTML을 사용한 페이지 전환
	장점   - SEO에 유리하다   - CSR을 활용해 상호작용이 가능하다   - 독립적인 HTML 파일 제공으로 유지보수가 쉽다 단점   - 페이지 전환 속도가 느리다   - UX적인 측면에서 부드러운 페이지 전환이 불가하다	장점   - 첫 화면 로딩 속도가 빠르다   - SEO에 유리하다   - 독립적인 렌더링으로 서버 부하가 분산된다 단점   - 페이지 전환 속도가 느리다   - 클라이언트 측에서 동적인 상호작용 구현이 어렵다
	SEO가 중요하지만 동적인 상호작용이 필요한 경우	대규모 컨텐츠 기반 웹사이트. 뉴스, 블로그 등

 

참고

[WEB] 정적 웹 페이지와 동적 웹 페이지

CSR? SSR? SPA? MPA? 이것들은 뭘까?

chatGPT