SSR(Server Side Rendering)

서버에서 *랜더링 준비를 끝 마친 상태로 클라이언트에 전달 하는 방식

*작성된 마크업 언어를 엔진이 해석해서 사람의 눈으로 볼 수 있도록 해주는 과정

주로 정적인 화면에 사용

관련 기술 : JSP, 타임리프

CSR(Client Side Rendering)

서버에서 데이터를 받아 클라이언트 에서 랜더링 해주는 방식

마크업 언어 결과물을 자바스크립트를 사용하여 동적으로 생성해서 적용

주로 동적인 화면에 사용

관련기술 : React, vue.js

 

구분 SSR CSR
웹페이지 (최초)로딩 빠름
(필요한 부분의 스크립트만 불러옴)
느림
(모든 스크립트을 한번에 불러옴)
페이지 이동 / 동작 속도 느림
(다음 페이지 로딩이 필요 / 요청시 마다 브라우저 새로고침 일어남)
빠름
(모든 스크립트가 다운되어 있어 빠름)
SEO
(Serach Engine
Optimization
검색엔진 최적화)
유리
(서버쪽에 만들어진 html을 크롤링 할 수 있기 때문에 유리)
불리
(최초로 불러온 html의 내용은 비어 있어 크롤링에 불리)
서버 부담(자원) 불리
(페이지를 구성하는 모든 리소스를 준비해서 응답해야함) 
유리 
(필요한 정보만 요청하게 됨으로 유리)

 

 

 

'CS(Computer Science) 용어' 카테고리의 다른 글

JSON(JavaScript Object Notation)  (0) 2023.07.11
XML(Extensible Markup Language)  (0) 2023.07.11
웹페이지 종류  (0) 2023.07.04
JDBC 란?  (0) 2023.06.30
SPA 와 MPA  (0) 2023.06.29
{
  "cars" : [
    {
      "name" : "레이",
      "type" : "경차",
      "color" : "하얀색"
    },
    {
      "name" : "쏘나타",
      "type" : "중형",
      "color" : "검정색"
    }
  ]
}

Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷

웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용

 

장점

1. MXL 에 비해 용량이 적고 빠르다.

2. 언어의 독립성(다양한 프로그래밍 언어에서 사용이 가능)

3. 가독성이 좋음(객체의 구조 파악이 쉬) 

 

단점 

1. 주석을 지원하지 않음

2. 날짜 시간데이터 지원 하지 않음

'CS(Computer Science) 용어' 카테고리의 다른 글

SSR와 CSR  (0) 2023.07.11
XML(Extensible Markup Language)  (0) 2023.07.11
웹페이지 종류  (0) 2023.07.04
JDBC 란?  (0) 2023.06.30
SPA 와 MPA  (0) 2023.06.29
<cars>
  <car>
    <name> 레이 </name> <type> 경차 </type> <color> 하얀색 </color>
  </car>
  <car>
    <name> 쏘나타 </name> <type> 중형 </type> <color> 검정색 </color>
  </car>
</cars>

Extensible Markup Language(XML) 은 
W3C 에서 개발된 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받게 하기 위하여 만들어진 마크업 언어

 

용도

데이터 전송

웹 애플리케이션

설명서

데이터 유형

 

장점

1. 데이터 무결성 검증이 가능 

 - 데이터 정확성 ,일관성, 유효성(여러 플랫폼에 걸쳐 일관되게 데이터 저장)이 유지 됨

 

2. 검색 효율성 향상

- 검색엔진과 같은 컴퓨터 프로그램은 다른 유형의 문서보다 더 효율적이고 정확하게 XML 파일을 정렬하고 분류할 수 있다.

- XML 태그를 기반으로 검색 엔진은 관련 검색 결과에 대해 정확하게 분류가 가능하여 컴퓨터가 자연어를 보다 효율적으로 해석이 가능

 

3. 확장성(유연한 애플리케이션 설계 가능)

 - 애플리케이션 디자인을 편리하게 업그레이드 하거나 수정할 수 있으며 많은 기술 , 특히 최신 기술에는 기본 XML지원이 함께 제공 됨

 - 데이터 파일을 자동으로 읽고 처리가 가능하여 전체 데이터 베이스를 다시 포맷하지 않고도 변경이 가능

 

4. 호환성

 - 유니코드로 작성되는 텍스트 형식이라 호환성이 매우 좋다. 유니코드를 인식하는 모든 운영체제상에서 호환이 가능

 

단점 

1. 실제 데이터 양에 비해 더 많은 용량 차지(XML 태그로 인한 ) 

2. 데이터의 파싱*이 JSON 에 비해 느림

 


*parsing(파싱) :  웹페이지에서 원하는 데이터를 추출하여 가공하기 쉬운 상태로 바꾸는 것

'CS(Computer Science) 용어' 카테고리의 다른 글

SSR와 CSR  (0) 2023.07.11
JSON(JavaScript Object Notation)  (0) 2023.07.11
웹페이지 종류  (0) 2023.07.04
JDBC 란?  (0) 2023.06.30
SPA 와 MPA  (0) 2023.06.29

정적 웹페이지(Static Web Page)

서버의 데이터가 바뀌기전까진 사용자는 늘 고정된 웹페이지를 제공 

 

동적웹 페이지 (Dynamic Web Page)

서버의 저장된 데이터를 그대로 보여주는 것이 아닌 스크립트를 통해 가공을 한 웹페이지

사용자 인터랙션에 따라 같은 페이지여도 각기 다른 결과를 볼수 있음

 

적응형 웹(Adaptive Web Design)

웹 브라우저가 동작할 기기별로 레이아웃이 정해져 해당 기기에 맞게 보여주는 방식

 

반응형 웹(Responsive Web Design) 

하나의 레이아웃을 가지고 있으며 웹프라우저의 가로폭이 바뀔때 마다 배치나 크기가 자동으로 맞춰주는 웹페이지

 

인터랙티브 웹(Interactive Web)

웹페이지내의  콘텐츠를 클릭, 스크롤 입력등 사용자의 동작에 따라 상호작용하는 웹페이지

 

 

 

참고 : https://www.inflearn.com/pages/weekly-inflearn-13

 

'CS(Computer Science) 용어' 카테고리의 다른 글

JSON(JavaScript Object Notation)  (0) 2023.07.11
XML(Extensible Markup Language)  (0) 2023.07.11
JDBC 란?  (0) 2023.06.30
SPA 와 MPA  (0) 2023.06.29
JSP(Java Server Pages)  (0) 2023.06.29

+ Recent posts