今年在 ModernWeb 分享的題目「pppr - 解決 JavaScript 無法被搜尋引擎正確索引的問題」,聽眾的回饋前幾天出來了。
雖然沒有 高見龍 大大突破圖表的那麼神 XDD,但也算是有達到自己的期待。其中聽眾的一些建議小編也會記下來,持續改進,期待明年的分享能夠讓大家更容易理解。
---
l 感謝以簡單易懂的方式,介紹CSR與SSR以及prerender
l 辛苦了~
l 給了前後端分離部署新的想法~
l 講解 CSR SSR 希望可以搭配 動畫 或 demo,流程圖無法清楚 SSR 為什麼這樣能運作
l 東西滿滿乾貨,但小弟太廢,當下跟不上QAQ,希望有人錄影
l 有點難吸收 但很實際
l 我目前使用的是 Angular Universal,不過我覺得大神透過 pppr 實作的 SSR 架構,效能上更佳,未來會嘗試採用這樣的 SSR 架構
l 謝謝
l 有點深,名詞帶回家當作業
l 講的非常好
l 謝謝
l 謝謝分享
l 沒什麼好說的
l 謝謝老師
l 有點卡...
l 講得有共鳴
l 感謝用心分享
l ppppppppppr
l 覺得講者技術很高深
l 講解得非常清楚,對CSR&SSR有更深的理解
l 謝謝分享PPPR~
l Good
l 讚
l 很清晰易懂
l 感覺用得到,感謝
l 實用,新手也很喜歡聽
l 很棒的分想,會讓人想試試 pppr!
l 謝謝分享!
l K旺大大講的內容雖然不是很懂,但在初學前端知識的我,了解到寫網頁會接觸到許多部份,透過前後端的配合,才能把網頁寫好寫完整,也會在空閒時間去深入了解pppr。謝謝大大。
l 嘸
l 讚
l GOOD
l great
l 後半部曲線突然升高了
l 感謝講者群在聊天室的補充
l 感謝
l 我是後端工程師,但是支援少部分前端,能學到SSR的技巧真是太好了
l 很棒的內容
l 內容實用
l 讚....讚不絕口
l 太難拉 聽到一半開始放空
l 講得稍微有些快 簡報都看不到ˊˋ
l 聽不是很懂,但原來可以這樣做,未來可以試看看
l 可!
l 有點困難(可能是因為公司平常是由後端在處理ssr的部分)
l 我沒用過
l 讚讚 強強滾
l 學習到一個新架構/想法,只是要一直改user agent就.......
l 普通
l 贊
l 最近常用javaScript 學到了許多知識 更上一層樓了
l 可以上傳這一位講者的影片檔嗎
l 一直都很喜歡Funliday,之前不知道有pppr可以使用,而且還這麼方便
l 之前有聽過偷米分享前端怎麼做SEO,今天聽K大分享,雖然很多地方懵懵懂懂,但是聽到了新東西,感覺很棒。
l 希望可以多一點老師露出的畫面(欸
l 放著當背景音樂聽,但這堂好像意外地很吸引人
#funliday #pppr #prerender #ssr
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
「angular prerender」的推薦目錄:
- 關於angular prerender 在 Kewang 的資訊進化論 Facebook 的最讚貼文
- 關於angular prerender 在 Kewang 的資訊進化論 Facebook 的最佳解答
- 關於angular prerender 在 Kewang 的資訊進化論 Facebook 的最讚貼文
- 關於angular prerender 在 コバにゃんチャンネル Youtube 的最佳貼文
- 關於angular prerender 在 大象中醫 Youtube 的最佳解答
- 關於angular prerender 在 大象中醫 Youtube 的最佳貼文
- 關於angular prerender 在 全端開發人員天梯- Angular Universal + Prerender 完全就是 ... 的評價
- 關於angular prerender 在 Angular Universal Prerendering - How does it work? - YouTube 的評價
- 關於angular prerender 在 Configure your angular application with Prerender ... - YouTube 的評價
- 關於angular prerender 在 Angular Universal and prerendered routes 的評價
- 關於angular prerender 在 Prerender angular application - generate static pages 的評價
angular prerender 在 Kewang 的資訊進化論 Facebook 的最佳解答
這一系列文總共有三篇,這是第二篇。
上一篇解決了 social network 抓取 head tag 裡面的 title, og data 等問題,但其實還有 search engine 要解決,因為 social network 只看 head,但 search engine 除了 head 以外也會看 body,所以這篇要來解決 body 一模一樣的問題。
傳統的 web 開發方式通常是一條龍開發 (你就是那條龍!),後端取得資料庫的內容,然後組成 HTML 之後丟到瀏覽器上顯示。現代的 web 開發方式通常就是一個前端配一個後端,後端專注於把資料送給前端,前端專注於取得資料後在瀏覽器上面顯示漂漂亮亮的。而傳統方式稱為 server side rendering (SSR),現代方式就稱為 client side rendering (CSR)。兩者開發方式各有優缺,蠻多文章有提過,這裡也就不另外說明了。
比較簡單判斷 CSR/SSR 的方式可以直接在你想知道的網頁,按下 Ctrl+u (Windows, Linux) 打開原始碼,看看實際上顯示的內容跟原始碼是不是差異過大。如果網頁內容很豐富,但原始碼才十幾二十行而已,那可以很粗略的說這是 CSR,如果基本上一致那就可以說是 SSR。
而 search engine 就是靠著原始碼把網頁內容做索引,所以如果谷歌大神到 CSR 的網站爬網頁內容,最後爬到的 body 當然都是同一份內容,這樣子對於 SEO 上是不合格的,所以這裡就要分享一下 Funliday-旅遊規劃 是如何處理這塊的。
第一種方式,可以用 VAR 這三套前端框架各自支援的 SSR 方案來處理,像是 Nuxt.js, Next.js, Angular Universal,這些內容已經有許多前輩分享,這裡就不另外說明了。但要注意一點,就是導入這類的解決方案通常會影響到原本的開發模式,像是 webpack 跟 bootstrapping 的方式就一定會動到,小編是建議對框架真的很熟悉之後,再來用這方式會比較好。
第二種方式,就是這次的重頭戲 prerender 了。prerender 也不是什麼魔法,就是一句話「讓爬蟲看到它應該要看的內容」。如圖所示,當 Nginx 收到 request 之後,發現 user agent 是 googlebot 就轉送到 prerender service,如果是一般 request 就直接丟到後面原本的 web server。
而 prerender service 接到 request 之後,就執行 headless chrome (用程式控制沒介面的 Google Chrome),把原本的網頁用 CSR 處理完之後,再把 HTML 的完整資料傳回給 googlebot,這樣子就達到「讓爬蟲看到它應該要看的內容」的功能了。原本的程式完全不用改,只要在 Nginx 做處理就可以了,也是負擔相對較小的方式。
另外,用了 prerender 之後,原本第一篇為了 title, og data 所做的調整也可以拿掉了。因為 CSR 本來就可以改 title, og data,所以避免重複做一樣的事,app.get("*") 這個 route 裡面關於 metadata 的功能也可以直接刪掉了。
那為什麼還會有第三篇?因為 Funliday 實際在應用 prerender.io 似乎有些問題,所以我們就改成自己寫 prerender 了,原因下回說明。
* Prerender.io:https://prerender.io
#prerender #funliday
angular prerender 在 Kewang 的資訊進化論 Facebook 的最讚貼文
這一系列文總共有三篇,這是第一篇。
對於用 Vue, Angular, React 這類前端框架來講,如果沒有對 search engine 或 social network 特別處理的話,出來的結果一定不會如你所想的一樣。
因為 client side rendering (CSR) 的作用域通常是在 body 裡面的 container,所以對於 search engine 或 social network 來說,container 外的 head tag 只是一層皮,裡面的資料基本上沒有什麼用,因為解析出來的內容都一模一樣,沒有獨特性。
為了要讓每一頁的 head tag 都不一樣,最簡單的方式就是在 web 這一層的 expressjs server 多加一個特殊的 route,去 catch 所有 web 的 get request,類似附圖的程式碼。
然後搭配 path-to-regexp 來設定特定 url pattern 做不同的 head tag 設計,比如 kewang/trips/123 的 title 叫做 "kewang 的台北二天一夜行程",kewang/journals/456 的 title 叫做 "kewang 的宜蘭三日遊記",當然這裡的例子舉的很簡單,正規的做法應該要搭配資料庫來取得對應的 title 跟 og data 才對,也就是附圖程式裡面的 loadMetaDataFunction。
只要做好這類的處理,在 social network 上面應該就可以所向無敵了。但這世界可不只有 social network,更恐怖的谷歌大神還在後面等著你咧!
下一篇就來講一下如何對付搜尋引擎吧。
#prerender #funliday
angular prerender 在 Angular Universal Prerendering - How does it work? - YouTube 的推薦與評價

This video is part of the Angular Universal Course - https:// angular -university.io/course/ angular -universal-course Check out the PDF E-Books ... ... <看更多>
angular prerender 在 Configure your angular application with Prerender ... - YouTube 的推薦與評價

Configuring Angular Application with Angular Universal frame work for SSR or Prerender. Also enable PWA support for the same application. ... <看更多>
angular prerender 在 全端開發人員天梯- Angular Universal + Prerender 完全就是 ... 的推薦與評價
Angular Universal + Prerender 完全就是神物啊! https://wellwind.idv.tw/blog/2021/10/16/static-site-generator-using-angular-universal-prerender/ 這幾年我都是 ... ... <看更多>