Angular Universal

標籤 (共 3 篇文章)

[Angular Universal] 使用 TransferState 解決畫面閃爍問題

透過 Angular Universal 可以輕易達成 SSR 伺服器端渲染的效果,不過對於伺服器端產生的內容,到了 client 依然會重新進行產生,對於比較複雜的非同步處理如 HTTP 呼叫,就會發生重複呼叫,甚至造成畫面閃爍的問題。

針對這個問題,Angular 提出了 Transfer State (狀態轉移) 的做法,將 server 抓取資料的狀態移轉到 client,讓 client 可以直接使用這些狀態資料,而不是重新產生,以避免畫面閃爍等問題。

今天就來看看 Transfer State 的使用方式吧!

繼續閱讀
[Angular Universal] 使用 Prerender 建立自己的 Static Site Generator

隨著 Angular 不斷的改版,原來難用且功能差強人意的 Angular Universal 在不知不覺已經變得相當完整及強大,搭配 Prerender 功能,不用再依靠如 Hexo、Scully 等工具,要刻出屬於自己的 Static Site Generator (靜態網站產生器) 也變得相當容易,今天就來簡單看一下 Angular Universal 現在變得多麼簡單,且透過 Prerender 功能來打造一個簡單的 Static Site Generator 吧!

繼續閱讀
在 Firebase 上部署 Angular Universal

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 的方法。

繼續閱讀