최근 수정 시각 : 2023-04-14 22:39:01

Modern Rendering


웹페이지 렌더링 방식
Server Side Rendering Single Page Application
Modern Rendering

1. 개요2. 렌더링 순서
2.1. 사이트가 접속되었다?2.2. 사이트가 내 사이트 하이퍼링크로 접속되었다?2.3. 다른 사이트가 내 사이트 하이퍼링크로 접속되었다?
3. 라이브러리 / 프레임워크4. 지원 사이트

1. 개요

Modern Rendering은 pjax 기술을 이용해 히스토리를 조작하고, 비 JavaScript 환경이나 직접 접속 등을 대비해 해당 페이지에도 라우팅을 해놓는 렌더링 기술이다. Client Side Rendering이라고도 불린다.

2. 렌더링 순서

[ 순서 펼치기 / 접기 ]
||<tablebgcolor=#f0f8ff> 요청 || > || 서버 연산 || > || > || 새로고침 및 로딩 || > || 하이퍼링크로 같은 사이트 재요청 || > || Single Page Application과 같게 동작 || > || 주소창으로 해당 사이트 접근 || > || 서버 연산 || > || 새로고침 및 로딩 || > || 주소창으로 다른 사이트 접근 || > || 다른 사이트 서버 연산 || > || 새로고침 및 로딩 ||

여기서 조금 복잡해졌는데, 모든 액션을 한 표에 강제로 욱여넣어서 그런거고, 조건으로 분리하면 이렇게 된다.

2.1. 사이트가 접속되었다?

요청 > 서버 연산 > 새로고침 및 로딩

2.2. 사이트가 내 사이트 하이퍼링크로 접속되었다?

Single Page Application과 같게 동작
참 쉽죠?

2.3. 다른 사이트가 내 사이트 하이퍼링크로 접속되었다?

다른 사이트 서버 연산 > 새로고침 및 로딩

3. 라이브러리 / 프레임워크

4. 지원 사이트