기타 개발

정적 페이지랑 동적 페이지는 어떤 차이가 있을까?

안녕하세요.NekoNyangYee입니다.

우리는 인터넷을 사용하면서 크게 두가지의 웹사이트를 만나게 됩니다.

• 정적 웹 페이지(Static Web Page)
  
• 동적 웹 페이지 (Dynamic Web Page)

오늘은 이 두 개의 페이지가 어떤 차이가 있는지에 대해 알아보려합니다.

정적 웹페이지 (Static Web Page)

• 웹 서버에 이미 저장된 파일들(HTML, Image, Javascript 등등)을 클라이언트에게 전송하는 웹 페이지입니다.

• 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 계속 보게 될 것입니다.

• 따라서 모든 사용자는 같은 결과의 웹페이지를 서버에 요청하고 응답 받게 됩니다.

장점

• 다른 처리 없이 요청에 대한 파일만 전송하기 떄문에 빠릅니다.

• 단순한 문서로 웹 서버를 구축하므로 호스팅 서버에 연결하는 비용이 적습니다.

단점

• 저장된 정보만 보여주기 때문에 서비스가 한정적입니다.

• 추가, 삭제, 수정 등의 작업이 모두 코드를 건드려야하기 때문에 관리하기가 힘듭니다.

동적 웹 페이지 (Dynamic Web Page)

• 서버에 저장된 HTML 파일이 그대로 브라우저에 나오는 것이 아닌, 동적으로 만들어지는 웹 페이지 입니다.

• 요청에 관하여 사용자는 조건에 따라 달라지는 웹페이지를 보게 됩니다.

동적 웹페이지 종류

1. CSR (Clent Side Rendering)

• CSR은 데이터가 없는 HTML 문서나 정적인 파일만을 처음 받아와 로드하고, 이후에 데이터를 요청하여 받아오는 방식입니다.

• 자바스크립트를 사용하여 브라우저에서 페이지를 직접 렌더링을 진행합니다.

• 모든 로직, 데이터 가져오기, 탬플릿 및 라우팅 등은 서버가 아닌 클라이언트 측에서 처리합니다.

2. SSR (Server Side Rendering)

• CSR과 상반되게 서버에서 동적으로 데이터까지 전부 삽입하여 완성된 HTML을 넘겨준다.

• 서버 렌더링은 브라우저에서 응답을 받기 전에 처리되므로 클라이언트에서 데이터를 가져오거나 템플릿 작성에 대한 추가 왕복이 발생하지 않는다. (웹 서버에서 모든 요청이 처리된다.)

3. MPA (Multi Page Application)

• 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 그에 맞춰 전체 페이지를 다시 렌더링하는 방식입니다. (즉 SSR 방식으로 렌더링)

• 인터넷 주소창에 주소를 입력하거나 링크를 클릭하는 등의 사용자가 어떠한 요청을 하게 되면, 그에 맞는 완전한 페이지를 받아오고 다시 렌더링된다.

• 장점은 검색 엔진 최적화 (SEO, Search Engine Optimization) 관점에서는 유리하지만, 단점으로는 새로운 페이지를 이동할 때마다 완전히 새로 렌더링 되므로 깜빡거리고 프론트엔드와 백엔드가 밀접하게 연결되어 개발이 복잡할 수 있습니다.

4. SPA (Single Page Application)

• 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한 번만 다운로드를 합니다. 그 이후, 새로운 페이지에 대한 요청이 있을 때마다 페이지 갱신에 필요한 데이터만 전달 받고 그 정보를 기준으로 페이지를 갱신합니다. (즉, CSR 방식으로 렌더링합니다.)

• SPA를 만드는데 사용되는 프레임워크로 Vue, Angular가 있습니다. (React는 UI 라이브러리이며, CRA (Create-REact-App)은 프레임워크입니다.)

• 장점으로는 최초 접속 시 맨 첫 페이지 로딩 시간을 길어도 이후 페이지부터는 속도가 빠르다. 또한 앞선 MPA와 달리 깜빡거림이 없고 반응 속도가 좋다. 또한 로컬 데이터를 효과적으로 캐싱할 수도 있다. 단점으로는 초기 구동 속도가 느리고 SEO에 불리하다는 것입니다.

다음 포스트

우주먼지, 토심이 팝업스토어 다녀오기!!

우주먼지랑 토심이 팝업스토어 다녀왔습니다!!

이전 포스트

Apple Events 2023 간단 요약

애플 이벤트 2023에서 공개한 제품들을 간략하게 소개합니다.