pppr - 解決 JavaScript 無法被搜尋引擎正確索引的問題
4 likes3,680 views
The document discusses solutions to the issue of JavaScript not being correctly indexed by search engines, emphasizing the use of Server-Side Rendering (SSR) and enhanced prerendering techniques. It outlines the advantages and complexities of both SSR and prerendering, including the need for specific frameworks and configurations. Furthermore, the document concludes by suggesting the adoption of SSR or prerendering strategies for better SEO outcomes along with references for further reading.
pppr - 解決 JavaScript 無法被搜尋引擎正確索引的問題
- 2. pppr - 解決 JavaScript 無法被搜尋引擎正確索引的問題
- 3. Kewang ● 王慕羣 Kewang ● Java / JavaScript ● HBase / PostgreSQL / MongoDB / ElasticSearch ● Git / DevOps ● 熱愛開源 LinkedinLinkedin kewangtwkewangtw SlideShareSlideShare kewangkewang GmailGmail cpckewangcpckewang FacebookFacebook Kewang 的資訊進化論Kewang 的資訊進化論 devopsday taipeidevopsday taipei '17'17 hadoopconhadoopcon '14 '15'14 '15 mopconmopcon '14'14 jcconfjcconf '16 '17 '18'16 '17 '18 modernwebmodernweb '18 '19'18 '19 GitHubGitHub kewangkewang FunlidayFunliday kewangkewang coscupcoscup '20'20
- 5. 5 Agenda ● CSR & SSR ● Why SSR? ● How SSR? ● What is prerender? ● pppr - enhanced prerender
- 6. 6 CSR & SSR
- 9. 9 CSR - client side rendering
- 10. 10 CSR - client side rendering 總行數就是 12 行
- 11. 11 SSR - server side rendering
- 12. 12 SSR - server side rendering 總行數超過 500 行
- 13. 13
- 14. 14
- 15. 15
- 16. 16
- 17. 17
- 18. 18
- 19. 19
- 20. 20
- 21. 21
- 22. 22
- 23. 23 Why SSR?
- 24. 24 Social media
- 25. 25 Social media
- 26. 26 Social media
- 27. 27 Meta tags
- 28. 28 Meta tags
- 29. 29 Meta tags
- 30. 30 Meta tags
- 31. 31 SEO
- 32. 32 SEO
- 33. 33 SERP - Search Engine Results Page
- 34. 34 SERP - Search Engine Results Page
- 35. 35 How SSR?
- 36. 36 JavaScript framework SSR solutions ● Vue.js – Nuxt.js ● Angular – Angular Universal ● React – Next.js
- 38. 38 Common SSR steps 1. Write server code at client page 2. Modify webpack build flow
- 42. 42 Common SSR steps - server.js
- 43. 43 Common SSR steps - server.js 比對出合適的路由
- 44. 44 Common SSR steps - server.js 比對出合適的路由 對應正確的路徑參數
- 45. 45 Common SSR steps - server.js 比對出合適的路由 對應正確的路徑參數 取得對應的 metadata
- 46. 46 Common SSR steps - server.js 比對出合適的路由 對應正確的路徑參數 回傳結果 取得對應的 metadata
- 47. 47 Common SSR steps - metadata.js
- 48. 48 Common SSR steps - metadata.js 不想被搜尋引擎 index
- 49. 49 Common SSR steps - webpack.js
- 50. 50 SSR cons
- 51. 51 SSR cons ● Code complexity increases
- 52. 52 SSR cons ● Code complexity increases ● Can't separate server and client code
- 53. 53 SSR cons ● Code complexity increases ● Can't separate server and client code ● Every route need an extra API to generate data
- 54. 54 SSR cons ● Code complexity increases ● Can't separate server and client code ● Every route need an extra API to generate data ● Avoid to run `window` or other DOM objects at server code
- 55. 55 SSR cons ● Code complexity increases ● Can't separate server and client code ● Every route need an extra API to generate data ● Avoid to run `window` or other DOM objects at server code ● You need a full-stack engineer
- 57. 57 Introduction
- 59. 59 System diagram client CDN puppeteersend request Nginx Web server
- 60. 60 System diagram client CDN puppeteersend request Nginx Web server non-crawler
- 61. 61 System diagram client CDN puppeteersend request Nginx Web server crawler non-crawler
- 62. 62 System diagram client CDN puppeteersend request Nginx Web server crawler non-crawler if no cache
- 63. 63 System diagram client CDN puppeteersend request Nginx Web server crawler non-crawler if no cache request
- 64. 64 Reverse Proxy - Nginx
- 65. 65 Reverse Proxy - Nginx crawler
- 66. 66 Reverse Proxy - Nginx crawler forward to prerender
- 67. 67 Reverse Proxy - Nginx crawler forward to prerender direct to origin
- 73. 73 pppr - enhanced prerender
- 74. 74 pppr - enhanced prerender https://github.com/funliday/pppr
- 75. 75 DEMO
- 77. 77 LRU cache
- 78. 78 Retry times
- 79. 79 Endpoint
- 80. 80 Callback
- 81. 81 If you want to build a prerender service
- 90. 90 With cache expressjs puppeteer has cache N Y clientclientclientclientclient
- 92. 92 Without open new page per request client
- 93. 93 Without open new page per request client A page
- 94. 94 Without open new page per request client A page B page
- 95. 95 Without open new page per request client A page B rendered B page
- 96. 96 Without open new page per request client A page B rendered B page A unexpected error
- 97. 97 With open new page per request client
- 98. 98 With open new page per request client A page
- 99. 99 With open new page per request client A page B page
- 100. 100 With open new page per request client A page B rendered B page
- 101. 101 With open new page per request client A page B rendered B page A rendered
- 108. 108 Without handle redirection expressjs puppeteer HTTP client status 30x
- 109. 109 Without handle redirection expressjs puppeteer HTTP client status 30x N
- 110. 110 Without handle redirection expressjs puppeteer HTTP client renderer status 30x N
- 111. 111 Without handle redirection expressjs puppeteer HTTP client renderer status 30x Y N
- 114. 114 With handle redirection expressjs puppeteer HTTP client status 30x
- 115. 115 With handle redirection expressjs puppeteer HTTP client status 30x N
- 116. 116 With handle redirection expressjs puppeteer HTTP client renderer status 30x N
- 117. 117 With handle redirection expressjs puppeteer HTTP client renderer status 30x YN
- 118. 118 With handle redirection expressjs puppeteer HTTP client renderer status 30x return 30x YN
- 120. 120 Handle query string 取得除了 url 外的其他參數
- 121. 121 Handle query string 取得除了 url 外的其他參數 重組成完整的 URL
- 122. 122 Conclusion
- 123. 123 Conclusion
- 124. 124 Conclusion ● Client solution: SSR or Framework solution
- 125. 125 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript
- 126. 126 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API
- 127. 127 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page
- 128. 128 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page – Cache API
- 129. 129 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page – Cache API – Full-stack engineer
- 130. 130 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page – Cache API – Full-stack engineer ● Server solution: pppr
- 131. 131 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page – Cache API – Full-stack engineer ● Server solution: pppr – Pure server code and configuration
- 132. 132 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page – Cache API – Full-stack engineer ● Server solution: pppr – Pure server code and configuration – Cache page and CDN
- 133. 133 Conclusion ● Client solution: SSR or Framework solution – Universal JavaScript – Extra API – Mix server & client code at one page – Cache API – Full-stack engineer ● Server solution: pppr – Pure server code and configuration – Cache page and CDN – More and more user-agents
- 134. 134 References ● Rendering on the Web ● Client-Side, Static, and Server-Side Rendering ● React and Server Side Rendering (SSR) ● vuejs/vue-hackernews-2.0 ● Implement dynamic rendering with Rendertron ● Puppeteer Tutorial ● Prerender in the Cloud ● prerender 1粉絲頁文章 ● prerender 2粉絲頁文章 ● prerender 3粉絲頁文章