PHP서비스를 Vue로 리팩토링 하면서 발생한 SEO 문제를 해결하는 내용입니다. SSR과 Prerender를 고민하였고, 최종적으로 Prerender를 사용하였습니다. 2017년 10월 GDG 인천에서 발표한 내용입니다.

1. github.com/wan2land/gdg171021-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. 발단
리팩토링 후 동작 방식

10. github.com/wan2land/gdg171021-vue-ssr-vs-prerender/commit/
d1416f6e92954eeb67c89814397233ccff256bc7
SPA로 리팩토링을 완료된 소스

11. 문제가 발생!

12. “검색엔진에 노출이 안돼요..”

13. 모든 페이지 소스가 다 이렇게..

14. “SSR이 필요하겠군요!”

15. Q. 그런데 SSR이 뭐죠?

16. Server Side Rendering

17. Server Side Rendering
동작방식

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으로 작성해야 합니다.

39. github.com/wan2land/gdg171021-vue-ssr-vs-prerender/commit/
5f298eb1d9e049e0181362d7add4c5cdedaf10d9
적용해봅시다.

40. 이제 모든 페이지 소스보기가 가능해졌어요.

41. Q. SSR은 문제 없지만
Prerender는 어떤 문제가 발생할까요?

42. 1.로그인에 따라 값이 바뀌는 경우, Prerender 시점에
는 로그아웃된 상태입니다.
2.로그인 한 상태에서 새로고침하면 Prerender된 화면
이 출력되고 로그인으로 바뀌면서 화면 깜빡임이 발생
합니다.
3.즉, State 가 존재하는 경우 Prerender에서는 제어할
수가 없습니다.
Prerendering
문제점
로그아웃 상태
로그인 상태로 전환

43. Nuxt.js를 사용하면
서버와 클라이언트간의 상태(States)를 전달하기 때문에
이러한 깜박임은 발생하지 않습니다.

44. Prerender에서는
조금 다른 방식으로 해결할 수 있습니다.

45. 화면이 깜빡이는 것 보다,
차라리 늦게 뜨는게 낫습니다.

46. webpack.js.org/plugins/define-plugin

47. 1.해당 플러그인은 브라우저에서 process.env.NODE_ENV 와 같은 변수를 사용할 수 있게 해줍니다.
2.process.env.NODE_ENV 를 빌드과정에서 찾아서 정해진 값으로 치환해서 사용합니다.
3.여기서는 process.env.PRERENDER 라는 변수를 선언해서 사용하였습니다.
webpack define plugin
동작원리

48. github.com/wan2land/gdg171021-vue-ssr-vs-prerender/commit/
f80e0a91e493896c3d46f54b0700b88f9c569547
적용해봅시다.

49. 결론

50. 새로운 프로젝트면 Nuxt.js
이미 한참 돌아가고 있는 서비스라면 PreRender.

51. 알고 있는 지식이 해결책이 아닐 수도 있다.
메뉴얼을 꼼꼼히 읽자.

52. Q & A ?