Index mit SWR umsetzen

[eoss-sh]

Die Index Seite soll initial mit SSR geladen werden, danach soll SWR und useSWRInfinite für das "Load more" und das hinzufügen von Mumbles mit optimistic Updates verwendet werden. Als Fallback sollen die SSR Daten dienen.

[eoss-sh]

Increment 1

Dazugehörige PR: https://github.com/smartive-education/app-thierry-und-simon/pull/49 https://github.com/smartive-education/app-thierry-und-simon/pull/50 https://github.com/smartive-education/app-thierry-und-simon/pull/51

• SWR wird für Caching eingesetzt
• Load more geht so
• Mumbles werden hinzugefügt und State mit optimistic Updates aktualisiert

Probleme

Die Daten beim Page Reload und initialen Laden werden auf aus dem SWR Hook generiert und die SSR Daten werden nicht verwendet.

[eoss-sh]

Increment 2

Die Fallback Daten sind verfügbar und könnten auch genutzt werden. Das passiert jedoch nicht automatisch. Ich vermute, dass dies wegen dem useEffect ist, welcher für das LoadMore eingesetzt wird.

Da die Daten verfügbar sind, habe ich nun dem Mumbles-State als initialen Wert einfach die Daten aus dem Fallback mitgegeben und das Überscchreiben innerhalb des useEffect nur gemacht, wenn die Daten aus dem SWR-Hook nicht mehr undefined sind.

useEffect

 useEffect(() => {
    data && setMumbles(getMumblesFromData(data))
  }, [data])

useState

 const [mumbles, setMumbles] = useState<MumbleType[]>(fallback)

Die "Generierung" der Fallback-Daten mache ich ohne unstabel_serialize. So wie ich das verstehe, würde man das nur brauchen, wenn man gecachte Daten als Fallback haben möchte. Da unser Fallback aber aus dem SSR kommt, ist ads wohl ev. nicht nötig. Ich bin an der Stelle aber nicht sicher, ob das wirklich so ganz korrekt ist.

[eoss-sh]

Diverse Anpassungen und Updates bei gemeinsamen Aufräumen.

PR: https://github.com/smartive-education/app-thierry-und-simon/pull/60