Universal Rendering
11 likes3,389 views
클라이언트와 서버사이드 렌더링을 동시에 지원하는 유니버설 렌더링에 관한 슬라이드입니다. 유니버설 렌더링의 정의 및 장점과 단점을 각각 살펴본 후 개괄적인 구현 방법, 모범 사례를 설명합니다.
Universal Rendering
- 17. 장점과 단점 17 / 51
- 25. 장점 - 빠르다 페이지를 더 빠르게 읽어들일 수 있다. 사용자 경험이 향상될 수 있다. 별 차이 없다(goo.gl/Mpi5xI). 마지막 데이터를 그리는 시간 25 / 51
- 26. 장점 - 빠르다 페이지를 더 빠르게 읽어들일 수 있다. 사용자 경험이 향상될 수 있다. 별 차이 없다(goo.gl/Mpi5xI). 확실히 서버 렌더링이 빠름(goo.gl/GfXMuK).내가 해봐서 아는데 I'd argue that ... the server rendered app will stay significantly faster than the same app rendered only on the client. - Malte Ubl: Google AMP 프로젝트의 Tech lead 26 / 51
- 27. 장점 - 빠르다 페이지를 더 빠르게 읽어들일 수 있다. 사용자 경험이 향상될 수 있다. 별 차이 없다(goo.gl/Mpi5xI). 확실히 서버 렌더링이 빠름(goo.gl/GfXMuK). 페북/인스타그램도 안 쓰고, UX에는 딱히 도움되는지 못찾음(goo.gl/qvMoif). 내가 해봐서 아는데 I'd argue that ... the server rendered app will stay significantly faster than the same app rendered only on the client. - Malte Ubl: Google AMP 프로젝트의 Tech lead We haven't found sr useful for real users. - Crhistoph Pojer: 페이스북 엔지니어 27 / 51
- 28. 28 / 51
- 30. 장점 - 빠르다 - 옳다 - SEO 자바스크립트를 실행하지 않아도 콘텐츠를 읽을 수 있으므로 검색 엔진 최적화(SEO: Search Engine Optimization) 측면에서 유리하다(goo.gl/qvMoif). instagram.com uses server rendering for SEO. - Crhistoph Pojer: 페이스북 엔지니어 30 / 51
- 31. 장점 - 빠르다 - 옳다 - SEO 자바스크립트를 실행하지 않아도 콘텐츠를 읽을 수 있으므로 검색 엔진 최적화(SEO: Search Engine Optimization) 측면에서 유리하다(goo.gl/qvMoif). 페이스북, 트위터 등 다른 서비스와 연동에 유리하다. instagram.com uses server rendering for SEO. - Crhistoph Pojer: 페이스북 엔지니어 31 / 51
- 35. 구현 방법 35 / 51
- 36. 시간 표시 - HTML 출력 <!doctype html> <html> <head> <title>시간 표시</title> <script src="app.js"></script> </head> <body> <div id="root"> <p>Wed Dec 07 2016 15:00:17 GMT+0900 (KST)</p> </div> </body> </html> 36 / 51
- 37. 시간 표시 - React 앱 // app.js import React from 'react'; export default class App extends React.Element { componentDidMount() { this.timeoutId = setInterval( this.tick.bind(this), 1000 ); } componentWillUnmount() { clearTimeout(this.timeoutId); } tick() { const dateStr = new Date().toString(); this.setState({ date: dateStr }); } render() { return <p>{this.state.date}</p> } } 37 / 51
- 38. 시간 표시 - 클라이언트 // client.js import React from 'react'; import { render } from 'react-dom'; import App from './app'; render( <App />, document.getElementById('root') ); 38 / 51
- 40. Node.js 서버 // server.js import { renderToString } from 'react-dom/server'; import App from './app'; function handleRender(res, res) { const html = renderToString( <App /> ); res.send(`<!doctype html> <html> <head> <title>시간 표시</title> <script src="app.js"></script> </head> <body> <div id="root">${html}</div> </body> </html>`); } 40 / 51
- 43. 구성1: 다른 언어 웹서버 + Node 렌더링 최초 렌더링 이후부터는 API를 통해 서버에 데이터를 요청하고 이를 사용해 클라이언트에서 렌더링 클라이언트 렌더링 43 / 51
- 45. 구성2: Node 웹 서버 + 다른 언어 API 서버 Node 렌더링 서버대신 쉘 스크립트를 사용하는 경우도 있음 최초 접속시 Node 웹 서버가 렌더링 결과 반환 45 / 51
- 51. 감사합니다. 51 / 51