Vue SSR vs Prerender
4 likes13,401 views
PHP서비스를 Vue로 리팩토링 하면서 발생한 SEO 문제를 해결하는 내용입니다. SSR과 Prerender를 고민하였고, 최종적으로 Prerender를 사용하였습니다. 2017년 10월 GDG 인천에서 발표한 내용입니다.
Vue SSR vs Prerender
- 2. Vue SSR vs Prerender 전창완 레거시 PHP Template에서 Vue SPA 까지
- 3. 전창완 (@wan2land) - Oponiti - Allbus 개발자 - 주로 PHP를 사용 발표자 소개
- 4. 저희 회사 서비스는 PHP 입니다.
- 6. PHP 기반의 서비스는 다음과 같이 동작합니다. (다 아는 이야기지만..)
- 7. 발단 기존의 동작 방식
- 8. Vue + Vue Router + Vuex SPA(Single Page Application)으로 리팩토링 하였습니다.
- 9. 발단 리팩토링 후 동작 방식
- 11. 문제가 발생!
- 13. 모든 페이지 소스가 다 이렇게..
- 14. “SSR이 필요하겠군요!”
- 15. Q. 그런데 SSR이 뭐죠?
- 18. 1.브라우저가 자바스크립트로 그려야 할 내용을 서버에서 미리 그려서 보여줍니다. 2.기존 방식 + SPA(Single Page Application) 두가지 장점을 모두 누릴 수 있습니다. Server Side Rendering Server Side Rending이 뭐지?
- 19. ssr.vuejs.org/ko
- 20. SSR을 하려면 서버에서 자바스크립트를 동작시켜야 합니다.
- 21. 1.Node.js 1.ssr.vuejs.org/ko 를 보며 한땀한땀 구현 2.Nuxt.js 사용 2.비 Node.js 1.v8 엔진 모듈 사용 2.헤드리스 브라우저 사용 Server Side Rendering 서버에서 자바스크립트를 동작시키는 방법
- 22. 1.Node.js 1.ssr.vuejs.org/ko 를 보며 한땀한땀 구현 2.Nuxt.js 사용 2.비 Node.js 1.v8 엔진 모듈 사용 2.헤드리스 브라우저 사용 -> 말도 안되는 방식 (...) Server Side Rendering 서버에서 자바스크립트를 동작시키는 방법
- 23. 1.Node.js 환경이고 레거시코드가 있을 때 적합한 방식. 2.Frontend만 작업한다고 하면 Nuxt를 바로 도입하는게 더 낫습니다. Server Side Rendering ssr.vuejs.org/ko 를 보며 한땀한땀 구현
- 24. 1.SSR 과 관련된 모든 것이 적용된 Vue Framework. 2.SSR로 한땀한땀 구현하다 보면 결국 최종 종착지가 Nuxt라는 이야기가 많음. 3.신규 프로젝트라면 이 방식을 무조건 추천. Server Side Rendering Nuxt.js
- 25. 1.v8 엔진은 c++로 되어있고 해당 모듈을 구동하는 라이브러리를 이용. 2.과거에는 이 방식이 동작하지 않았지만 vue 2.5 버전 부터 지원. https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#environment-agnostic- ssr 3.PHP의 경우 V8js(github.com/phpv8/v8js)을 통해서 가능. (위 버전 업데이트가 일주일(2017.10.21 기준) 되었다는 점을 고려하면 적용 사례가 없음) Server Side Rendering v8 엔진 모듈 사용
- 26. 1.Node.js 1.https://ssr.vuejs.org/ko 를 보며 한땀한땀 구현 2.Nuxt.js 사용 2.비 Node.js 1.v8 엔진 모듈 사용 2.헤드리스 브라우저 사용 -> 말도 안되는 방식 (...) Server Side Rendering 서버에서 자바스크립트를 동작시키는 방법
- 27. 1.Node.js 1.https://ssr.vuejs.org/ko 를 보며 한땀한땀 구현 -> Node.js로 다 옮겨야함. 2.Nuxt.js 사용 -> Node.js로 다 옮겨야함. 2.비 Node.js 1.v8 엔진 모듈 사용 -> 나온지 일주일 되어서 적용 사례가 없음. 2.헤드리스 브라우저 사용 -> 말도 안되는 방식 (...) 서버에서 자바스크립트를 동작시키는 방법 Server Side Rendering
- 29. Q. 우리회사의 요구사항이 뭐였지?
- 30. Q. 우리회사의 요구사항이 뭐였지? A. 검색엔진 노출이 안돼요.
- 31. Q. 우리회사의 요구사항이 뭐였지? A. 메인페이지가 검색엔진 노출이 안돼요.
- 32. Q. 우리회사의 요구사항이 뭐였지? A. 특정 몇 페이지가 검색엔진 노출이 안돼요.
- 33. ssr.vuejs.org/ko
- 34. Prerendering
- 35. 이건 또 무엇인가요?
- 36. 바로 여기를 개선
- 37. 1.소스를 빌드하고, 소스를 헤드리스 브라우저에서 동작. 2.헤드리스 브라우저(Phantom.js)에서 동작 시키고, 그 결과를 html로 저장. 3.그리고 그 html파일을 서버사이드쪽 템플릿 파일로 사용. 4.이 상태로 서버 운영을 시작. Prerendering 동작원리
- 38. 1.소스를 빌드하고, 소스를 헤드리스 브라우저에서 동작. 2.헤드리스 브라우저(Phantom.js)에서 동작 시키고, 그 결과를 html로 저장. 3.그리고 그 html파일을 서버사이드쪽 템플릿 파일로 사용. 4.이 상태로 서버 운영을 시작. Prerendering 동작원리 빌드 과정. 이부분을 Webpack으로 작성해야 합니다.
- 40. 이제 모든 페이지 소스보기가 가능해졌어요.
- 41. Q. SSR은 문제 없지만 Prerender는 어떤 문제가 발생할까요?
- 42. 1.로그인에 따라 값이 바뀌는 경우, Prerender 시점에 는 로그아웃된 상태입니다. 2.로그인 한 상태에서 새로고침하면 Prerender된 화면 이 출력되고 로그인으로 바뀌면서 화면 깜빡임이 발생 합니다. 3.즉, State 가 존재하는 경우 Prerender에서는 제어할 수가 없습니다. Prerendering 문제점 로그아웃 상태 로그인 상태로 전환
- 43. Nuxt.js를 사용하면 서버와 클라이언트간의 상태(States)를 전달하기 때문에 이러한 깜박임은 발생하지 않습니다.
- 44. Prerender에서는 조금 다른 방식으로 해결할 수 있습니다.
- 45. 화면이 깜빡이는 것 보다, 차라리 늦게 뜨는게 낫습니다.
- 47. 1.해당 플러그인은 브라우저에서 process.env.NODE_ENV 와 같은 변수를 사용할 수 있게 해줍니다. 2.process.env.NODE_ENV 를 빌드과정에서 찾아서 정해진 값으로 치환해서 사용합니다. 3.여기서는 process.env.PRERENDER 라는 변수를 선언해서 사용하였습니다. webpack define plugin 동작원리
- 49. 결론
- 50. 새로운 프로젝트면 Nuxt.js 이미 한참 돌아가고 있는 서비스라면 PreRender.
- 51. 알고 있는 지식이 해결책이 아닐 수도 있다. 메뉴얼을 꼼꼼히 읽자.
- 52. Q & A ?