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