透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果,不過對於伺服器端產生的內容,到了 client 依然會重新進行產生,對於比較複雜的非同步處理如 HTTP 呼叫,就會發生重複呼叫,甚至造成畫面閃爍的問題。
針對這個問題,Angular 提出了 Transfer State (狀態轉移) 的做法,將 server 抓取資料的狀態移轉到 client,讓 client 可以直接使用這些狀態資料,而不是重新產生,以避免畫面閃爍等問題。
今天就來看看 Transfer State 的使用方式吧!
隨著 Angular 不斷的改版,原來難用且功能差強人意的 Angular Universal 在不知不覺已經變得相當完整及強大,搭配 Prerender 功能,不用再依靠如 Hexo、Scully 等工具,要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易,今天就來簡單看一下 Angular Universal 現在變得多麼簡單,且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧!
Angular Universal 可以幫助我們以 server side 的方式把 Angular 畫面先產生好回傳給用戶端,而 Firebase 本身提供了 Firebase Hosting 服務,能讓我們輕易的部署靜態網站,若要部署 Angular Universal 的 express server的話,還可以搭配 Firebase Functions 功能。
透過這樣的整合,我們可以把前端 SPA 架構的 Angular 網站都部署到 Firebase 上面,同時享有 Angular Universal 的 server side rendering (SSR、伺服器渲染) 功能,讓 SEO 排名更好,在做社群分享(如 facebook) 時,也能更正確的抓到資訊!
今天就來分享一下將 Angular 程式部署到 Firebase,並同時支援 Angular Universal 的方法。