React / Redux同構/服務器端呈現和媒體查詢

Question

我開始創建一個基於Node的同構React / Redux應用程序。 該項目的一個要求是基於“移動”和“桌面”視圖的“適應性”呈現特定組件。 我已經實現了Redux動作和reducer來存儲有關用戶視圖的屏幕信息（基於媒體查詢 - “小”，“中”，“大”）。 在調整大小時，狀態/商店會更新。 默認狀態為“小”。

const defaultState = {
    isMobile: true,
    isTablet: false,
    isDesktop: false,
    sizes: {
        small: true,
        medium: false,
        large: false,
        huge: false,
    },
};

在需要根據屏幕大小在兩個不同版本中呈現“自適應”的組件中，我只需執行以下操作：

如果（小）返回變化1

如果（中）返回變異2

一切正常。

現在我面臨兩個問題：

1. 我的應用程序是同構的，這意味着標記也呈現服務器端。 服務器對用戶的瀏覽器和媒體查詢一無所知。 因為我的默認狀態是“小”，服務器將始終呈現“variation1”。 節點服務器是站點的入口點。 看起來渲染需要“延遲”（中間件？），服務器需要在React應用程序“交付”之前從客戶端獲取有關瀏覽器寬度的一些信息。 知道如何解決這個問題嗎？

2. 因為渲染是基於狀態的，所以在加載“變化1”之后總是可以看到幾毫秒（閃爍），即使瀏覽器大小是“桌面”。 這是因為在使用當前屏幕寬度更新狀態之前，JS檢測需要幾毫秒。 我認為這與上述問題和默認狀態一起發揮作用。

我找不到1的任何解決方案，但我想必須有一些同構和響應/自適應的東西。

Answer 1

在我看來，一個非常難以解決的問題是基於很多“依賴於”的解決方案。 :)

我是react-sizeme和react-component-queries ，兩個庫來幫助響應組件，並且遇到了與您在問題中描述的類似問題。 根據我的經驗，我發現解決你的一個問題通常會影響另一個問題。 我將通過描述下面的經驗詳細說明我的意思......

我曾嘗試先解決你的“問題2”：

由於默認狀態導致的渲染閃爍是我在初始創建react-sizeme庫時react-sizeme 。 react-sizeme是一個更高階的組件，它獲取組件可用的大小，然后將其傳遞給組件。 基於大小，您當然可以選擇渲染不同的組件，就像您在示例中所做的那樣，因此除非您碰巧遇到默認狀態最佳位置，否則可能會發生更新閃爍。 我通過改變react-sizeme來“征服”這react-sizeme ，最初渲染一個空占位符以獲得可用的寬度/高度，然后只渲染你的Component，給它“適當的”寬度/高度。 這對我來說非常有效。 我不再看到ComponentBob被渲染，只是被卸載並讓ComponentFoo立即渲染到它的位置。

然后“問題1”出現了......

react-sizeme開始流行起來，最終我有一個圖書館的消費者希望在服務器端渲染環境中使用它。 但是由於我為問題1設置的修復，服務器端渲染會產生大量空白內容（即我正在談論的占位符）。 在將有效負載傳遞到瀏覽器之后，占位符邏輯將啟動並最終將大小數據發送到組件並將其呈現。 這並不理想，因為您首先要從根本上取消做SSR的任何好處。 我與這個用戶合作，我們認為最好的方法是允許將react-sizeme配置為在“SSR模式”下運行。 基本上這需要刪除占位符呈現並允許呈現默認組件，以便您不會在初始服務器響應上獲得空白頁，但隨后您可以輕松地再次遇到組件閃爍問題！

Aaaaaaaaaah！ 在這里看見了影響！ :(

所以基本上解決一個問題直接影響另一個。

---

我繼續給出一些想法，我相信最好的方法是嘗試在第一次請求時獲取用戶瀏覽器的寬度/高度。 這實際上意味着渲染一個簡單的實用程序，它可以捕獲此信息，然后將其發回服務器，以便呈現用戶的初始請求。 然后，您可以使用寬度/高度並將其傳遞到整個組件樹（沿途進行數學運算），以繼續確定每個組件的可用高度/寬度。 這里有超級棘手的東西，但可能會奏效。

另一個危險當然是google只是為初始請求索引一個空白頁面（即用於捕獲初始寬度/高度的util的空白渲染）。 你必須嘗試使用​​一些聰明的HTTP響應代碼，如重定向等，以確保谷歌跟蹤到正確的渲染輸出。

---

對不起，這可能不是您正在尋找的答案，但希望我的經驗有所幫助或提供某種靈感。 如果您確實想出了一些有趣的實驗，請讓我發布。 我很樂意和你一起工作。

Answer 2

您可以從服務器上的標頭獲取用戶代理，然后使用返回數據的reducer發送帶有用戶代理信息的redux操作，這樣您就可以檢測用戶是否在手機/平板電腦/桌面/等等上進行相應的渲染