2019 Zeropage Devil's Camp

1. Server Side Rendering
(feat. )
24기 지무근

2. INDEX
1. Single Page Application
2. Server Side Rendering
3. Next.js

4. Single Page Application (SPA)

5. Single Page Application (SPA)
✓
✓ 매번 서버로부터 페이지를 받아 오는 것이 아닌
현재 페이지의 내용을 변경하여 표시하는 웹 어플리케이션
✓ 중복되는 부분 생략 가능
✓ 실제 페이지의 이동이 일어나지 않음

8. Single Page Application (SPA)
No reload !
Interaction
Data

11. Multi Page Application (?)
Page reload
Interaction

12. Single Page Application (SPA)
✓ Client Side Rendering 사용
✓ Rendering: View을 구성하는 단계
✓ Rendering 시점에 따라
Client Side Rendering (CSR)
Server Side Rendering (SSR)

13. Rendered HTML

14. Server Side Rendering (traditional way)
Browser Server
Request
Rendered HTML Rendering
Additional Data

15. Client Side Rendering
Browser Server
Request
Empty HTML
Rendering
Additional Data

16. view-source
rendered

17. SPA와 Routing
✓ AJAX
✓ Hash (fragment identifier)
✓ History API (HTML 5)

18. AJAX
✓ AJAX: Javascript를 사용하여
비동기적으로 데이터를 가져오는 기법
✓ JQuery

19. AJAX
✓ AJAX: Javascript를 사용하여
비동기적으로 데이터를 가져오는 기법
✓ DOM 조작(페이지의 내용을 조작)을
통해 페이지 이동을 구현
✓ 하나의 주소로 동작하기 때문에 history
관리 불가능

20. Hash (Fragment Identifier)
✓ subsection을 가리킬 수 있는 기능을 활용
https://en.wikipedia.org/wiki/Fragment_identifier#Basics
✓ 본래 기능과 구분하기 위해 # 대신 #! (hash bang) 또한 사용
✓ 별도의 URL의 형태로 존재하므로, 브라우저에서 history를 관리하는 것이 가능
✓ Vue-Router (history 방식으로도 설정 가능)

21. History API
✓ 사용자 히스토리 내에서 이동 (back, forward, go === 브라우저 버튼)
✓ https://developer.mozilla.org/ko/docs/Web/API/History
✓ window.history.back( ); window.history.forward( );
✓ pushState, replaceState
✓ 새로고침 없이 세션 히스토리를 조작
✓ React-Router, Angular Router, PJAX

22. Server Side Rendering

23. CSR vs SSR
✓ CSR이 초기 loading 속도는 느리지만,
user interaction에 따른 loading 속도는 빠름
✓ SSR의 경우, 초기 loading 속도가 빨라 유저가 더
빠르게 컨텐츠를 이용 가능
✓ SEO 문제 crawler들은 javascript을 실행할 수
없기에, CSR의 경우 완성된(의도된) 페이지가
아닌 빈 페이지를 crawl 할 수 있음

24. Googlebot
✓ 대단해….

25. But
✓ Two wave indexing (resource limitation)
CSR을 통해 만들어진 페이지 변화가
즉각적으로 indexing 되지 않음
✓ 네이버, 다음, Bing, Baidu 등 Google 외의
검색엔진 대응

26. 그러면 CSR은 버리나요
✓ 단점을 보완해 봅시다
✓ Hybrid Rendering
✓ Dynamic Rendering

27. Hybrid Rendering
✓ 초기엔 Server Side Rendering
✓ 이후 user interaction에 따라 Client Side
Rendering
✓ 빠른 초기 loading + 빠른 유저 interaction
✓ Crawler는 Server Side Rendering 된
HTML을 수집  SEO 문제 해결

28. Dynamic Rendering (구글 추천)
✓ Crawler 에 대한 개별적인 대응
✓ User-Agent detection
✓ 기존 CSR 코드 변경 없이 적용
Dynamic Renderers
○ Puppeteers
○ Rendertron

29. Next.js

30. ✓ React Framework
✓ Server Side Rendering
✓ Auto Code Splitting
✓ Hulu, Material ui, twitch mobile …

31. Hello, Next.js !
$ mkdir next-ex && cd next-ex
$ npm init -y
$ npm install react react-dom next
$ mkdir pages

32. $ npm run dev

33. Next.js routing?

35. Server Side Rendering?
✓ initial load 시 SSR 사용
✓ 이후 user interaction 에 따라 CSR
✓ getInitalProps
1. SSR 시점
2. CSR 시점

37. URL 직접 접근: SSR Link를 통해 접근: CSR