웹/Html

정적/동적 웹페이지

hihijh826 2024. 9. 11. 16:00

728x90

SMALL

📍정적 페이지

서버에 요청이 들어올 때마다 파일 내용이 변경되지 않고 그대로 전송 ( 웹 서버에 이미 저장된 파일(html 파일, 이미지, Javascript 파일을 그대로 봄)
사용자의 입력이나 데이터에 따라 내용이 바뀌지 않고 모든 사용자에게 동일한 내용이 표시 ( EX) Apache 서버 소프트웨어
ex) 회사 소개 페이지, 반복이 없는 포트폴리오 페이지 등이 있음

☑️ 프로세스

클라이언트 요청

클라이언트의 요청 전 리스너 포트를 열어둠
접속이 되면 서버는 각 클라이언트를 위한 소켓을 생성하고 통신을 하게 됨

2.필터링

3.응답

프로토콜에 따라 헤더에 동적/정적페이지에 대한 정보를 넣고 브라우저가 캐싱해야될지 결정하게 해줌 캐싱 : 웹 브라우저가 웹 페이지 자원(html,css,javascript,이미지)를 임시로 저장하여 같은 페이지를 다시 방문 할 때 더 빠르게 로드 할 수 있도록 함
Header에 포함되는 정보
Cache-Control: public 이 헤더 정보는 응답이 공개적으로 캐시가 될 수 있음을 나타낸다.
- 여러 사용자가 이 캐시된 데이타 사용 가능
- ex) 정적자원(이미지, css)
  - Cache-Control: private 이 헤더 정보는 응답이 개인적으로만 캐시가 될 수 있음을 나타낸다.
- 사용자 개인정보

☑️ 코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>정적 페이지 예시</title>
</head>
<body>
    <h1>안녕하세요, 이곳은 정적 웹 페이지입니다.</h1>
    <p>이 페이지의 내용은 모든 방문자에게 동일하게 표시됩니다.</p>
</body>
</html>

📍 동적 페이지

서버에 요청이 들어 올 때마다 그 내용이 바뀔 수 있는 페이지
서버 사이드 스크립트 ( java servlet,jsp등)를 통해 생성
데이터 베이스 쿼리 결과나 사용자의 입력에 다라 내용이 달라질 수 있음
예를 들어, airbnb 사이트에서 어제 접속하고, 오늘 접속할 때마다 추천 숙소 목록이 바뀜. 목록 디자인은 그대로 인데, 숙소 목록 데이터가 바뀌는 것임
화면에서는 숙소이름, 장소, 숙소 img url 등이 다이내믹하게 변하여 html이 만들어 짐

☑️동적 웹 페이지의 종류

1. csr (client side rendering)

동적으로 만들어지는 것이 클라이언트 사이드임
데이터가 없는 html 문서나 static 파일만을 처음에 받아와 로드하고, 이후에 데이터를 요청하여 받아옴
js 로 브라우저에서 페이지를 직접 렌더링함
모든 로직, 데이터 가져오기, 템플릿, 및 라우팅은 서버가 아닌 클라이언트 측에서 처리

2. Ssr (server side rendering)

동적으로 만들어지는 것이 서버에서 담당
웹 서버에서 모든 요청 처리
csr와 상반되게 서버에서 동적으로 데이터까지 전부 삽입하여 완성된 html을 넘겨줌
브라우저에서 응답을 받기 전에 처리되므로 데이터를 가져오거나 템플릿 작성에 대한 추가 왕복 발생 x
next.js

3. MPA( multi page application)

새로운 페이지 요청시 정적 리소스가 다운되고 그에 맞춰 전체 페이지를 다시 렌더링(ssr방식으로 렌더링)
url클릭, 주소창에 치기등 사용자가 어떠한 요청을 하게 되면, 그에 맞는 완전한 페이지를 받아오고 다시 렌더링
새로운 페이지 이동 때마다 완전히 새로 랜더링 되므로 깜빡거림

4. Spa (single page application) ⭐️

모든 정적 리소스(static resources) (html,css,js,이미지 등) 를 최초 한번만 다운 이후 새로운 페이지에 대한 요청이 있을 때마다 필요한 데이터만 전달 받고 그 정보를 기준으로 페이지 갱신 (csr 방식으로 렌더링)
프레임워크 : react, vue, angular
로컬 데이터를 효과적으로 캐싱할 수 있음

동적/정적 페이지 그리고 아파치/톰캣 - AI_Nomads

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

Next.js 렌더링 동작 원리 with Hydration

728x90

LIST