Static website
Dynamic Website
1. CSR (Client Side Rendering) - 동적으로 만들어지는 곳이 client side?
처음에 웹서버에 요청할 때 데이터가 없는 문서를 반환한다.
HTML 및 static파일들이 로드 되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다.
Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring한다.
- 장점
-첫 로딩에 HTML과 static파일들만 다 받으면, 동적으로 빠르게 Rendering하기 때문에 사용자 UX가 뛰어나다.
-서버에 요청하는 횟수가 훨씬 적기 때문에 서버 부담이 덜하다. - 단점
-모든 HTML과 static파일이 로드될 때까지 기다려야 한다.
(리소스를 Chunk(청크) 단위로 묶어서 요청할 때만 다운받에 하는 방식으로 완화시킬 수는 있지만 해결할 수는 없다.)
-SEO(검색엔진 최적화) 문제가 발생할 수 있다.
(검색엔진이 크롤링을 하는데 어려움을 겪기 때문에, 구글 검색엔진은 javascript까지 크롤링을 하지만 다른 검색엔진의 경우 그렇지 않다.)
- 특징:
-심각한 문제: SEO
-CSR은 검색 엔진에 굉장히 비효율적.
2. SSR (Server Side Rendering) - 아니면 server side인지?
완전하게 만들어진 HTML파일을 받아오고 Rendering하게 된다.
웹서버에 요청할때 마다 Browser 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식.
- 장점
-초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
-모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능하다. - 단점
-매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다.
-서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다.
- 특징:
- CSR & SSR을 섞어서 사용 가능한 것이 Next.js 라는 프레임워크.
- Django 는 전형적인 SSR 프레임워크. (1.5세대라 부른다)
- 검색 엔진 최적화
Single Page Application (SPA) - React는 전형적 SPA
before you understand about CSR & SSR
Multi Page Application (MPA)
용어들
1. hydration
2. isomorphic javascript
Quoted context
(by - https://developers.google.com/web/updates/2019/02/rendering-on-the-web)
개발자로서 우리는 종종 애플리케이션의 전체 아키텍처에 영향을 미칠 의사 결정을 하곤 합니다. 웹 개발자가 하는 가장 핵심적인 결정 중 하나는 애플리케이션에서 로직와 렌더링을 구현하는 것입니다. 이는 생각보다 어려울 수 있습니다. 웹 사이트를 구축하는 데는 여러 가지 방법이 있으니까요.
이 영역에 대한 우리의 이해도는 지난 몇 년 동안 Chrome에서 대형 사이트들을 상담하며 깊어졌습니다. 대체로 말하자면 개발자는 전체 rehydration 접근 방식을 통해 서버 렌더링이나 정적 렌더링을 고려하도록 권장합니다.
이러한 결정을 내릴 때 우리가 선택한 아키텍처를 더 잘 이해하기 위해서는 각 접근법에 대해 확실하게 이해하고 그에 대한 이야기를 할 때 일관된 용어를 사용해야 합니다. 이러한 접근 방식의 차이점은 성능 향상 렌즈를 통한 웹 렌더링 렌더링의 절충을 설명하는 데 도움이 됩니다.
용어:
렌더링
- SSR: Server-Side Rendering (서버 측 렌더링) - 클라이언트 측 또는 유니버설 앱을 서버의 HTML로 렌더링합니다.
- CSR: Client-Side Rendering (클라이언트 측 렌더링) - 브라우저에서 애플리케이션을 렌더링합니다. 일반적으로 DOM을 사용합니다.
- Rehydration: 클라이언트가 서버에서 렌더링 한 HTML의 DOM 트리와 데이터를 재사용하도록 자바 스크립트 뷰를 "부팅"합니다.
- Prerendering: 빌드 타임에 클라이언트 측 애플리케이션을 실행하여 초기 상태를 정적 HTML로 캡처합니다.
성능
- TTFB: Time to First Byte (첫 번째 바이트까지의 시간) - 링크를 클릭한 후 처음으로 들어오는 콘텐츠 비트 사이의 시간을 나타냅니다.
- FP: First Paint - 픽셀이 처음으로 사용자에게 표시되는 시점.
- FCP: First Contentful Paint - 요청 콘텐츠(기사 본문 등)가 표시되는 시점
- TTI: Time To Interactive - 페이지가 상호작용 가능하게 될 때까지의 시간 (이벤트 발생 등).
