So haben wir SWR in einem Projekt eingesetzt – und warum wir es lieben

Kamil Polok
09. Juni 2021・6 Min. Lesezeit
Warum SWR?
Kürzlich hatten wir bei SDH die Gelegenheit, ein Projekt mit React und Unterstützung durch Redux Toolkit zu entwickeln. Das Problem: Zwar wurden die Daten im Store gehalten und von dort geholt, aber es gab keinen Caching‑Mechanismus in der App. Und Dutzende von Responses im State zu horten, ist nicht gerade meine Vorstellung von cool. Wie auch immer – man verlor sich schnell in all den State Slices, trotz Toolkit.
Mehr noch: Das Ganze hatte zu diesem Zeitpunkt null Einfluss auf das Backend. Mit diesen eisberggroßen Datenbrocken brauchten manche Requests eine Ewigkeit. Und da die UI hauptsächlich aus langen Listen mit wenigen CRUD‑Operationen bestand, wurde schnell klar, dass ein Cache hier äußerst praktisch wäre. Also fiel die Wahl auf SWR – eine Library der Entwickler von Vercel (auch bekannt für Next.js).
Was ist SWR?
Magst du Definitionen lesen? Hoffentlich nicht, denn das hier wird eine der kürzesten überhaupt. „SWR ist eine React Hooks‑Library für Remote Data Fetching“. Das war’s. Einfach? Ja – aber ich zeige dir jetzt, dass SWR auch sehr leistungsfähig ist. Falls du dich fragst: SWR steht für stale‑while‑revalidate. Das erklärt schon die Funktionsweise. SWR liefert Daten aus dem Cache (stale), schickt einen Fetch‑Request, um aktualisierte Daten zu holen (revalidate), und liefert dann die neuen Daten. Wie gesagt: simpel.
Warum wir SWR lieben
Man erkennt schnell, wie SWR die eingangs beschriebenen Probleme eliminiert. Dank SWR haben wir:
- die UI (nach den ersten Requests) dank Caching reibungslos zum Laufen gebracht
- nahezu alle Slices mit API‑Daten samt zugehöriger Logik entfernt
- den Ablauf der Revalidierung nach CRUD‑Operationen auf Collections vereinfacht
- die Entwicklung neuer, API‑abhängiger Features beschleunigt
Wie haben wir die Library nun eingesetzt, um diese magischen Ergebnisse zu erzielen?
Wie SWR funktioniert
Schon nach kurzer Zeit zeigte sich: SWR ist schlicht und sehr anwenderfreundlich. Lust auf einen API‑Request mit SWR? Bitte sehr:

Der einzige Haken ist der Fetcher. Das ist einfach deine eigene Funktion zum Laden der Daten. In der Anwendung, an der wir gearbeitet haben, war axios bereits mit kompletter Config (Interceptors, Headers, Base URL etc.) eingerichtet, also haben wir unsere axios‑Instanz so gewrappt und unseren eigenen Fetcher gebaut:

Der gesamte Hook kann dann so schlicht aussehen (Error Handling lassen wir hier der Einfachheit halber weg):

Und ... das war’s! Wir haben einen Hook für das Fetching von API‑Daten gebaut – mit all den SWR‑Goodies. Immer wenn dieser Hook aufgerufen wird, liefert er zuerst bereits geladene Daten (falls vorhanden) und revalidiert dann, um anschließend die neue Collection zurückzugeben.
SWR bringt out of the box eine Reihe vorkonfigurierter Parameter mit (alle sind hier gelistet), die die Arbeit damit zum Kinderspiel machen. Eine Lieblingsoption ist dedupingInterval.
Typischer Use Case: Daten in einer Komponente holen, die Komponente weiterentwickeln, die Children wachsen dir über den Kopf – und plötzlich braucht ein Child in der vierten Ebene die Daten. Diese Daten ohne großen Aufwand dorthin zu bekommen und doppelte Requests zu vermeiden, ist immer eine Herausforderung. Mit SWR geht’s einfach: Verwende den Hook erneut ... Das deduping‑Intervall lässt innerhalb eines festgelegten Zeitraums (standardmäßig 2 Sekunden) keinen weiteren Request zu. Klingt fair.
„Aber wenn ich den Endpoint aufrufe und er dieselben Daten wie zuvor zurückgibt, rendert meine Komponente doch trotzdem neu.“ Tut sie nicht: SWR setzt auf Deep Comparison, ein Re‑Render wird nur ausgelöst, wenn sich die Daten wirklich geändert haben. Und die Vergleichsfunktion lässt sich natürlich anpassen.
Datenmutation
Du wirst einwenden: Daten per GET zu holen ist immer leicht – aber was ist mit dem Mutieren? Das ist doch sicher komplizierter. Nicht wirklich, Mutationen müssen kein Albtraum sein, und ich war überrascht, wie einfach sich Daten mit SWR mutieren lassen (nachdem ich zuvor schon meinen Spaß mit Apollo hatte). Hier ein Praxisbeispiel:

In diesem Beispiel ist mutate eine aus SWR importierte Funktion, und /users ist der Key, den wir im useUsers‑Hook vergeben haben (muss nicht die Endpoint‑URL sein – Key und URL lassen sich getrennt angeben).
Wenn du ein einzelnes Entity (Objekt) aus einer größeren Collection separat cachen und aktualisieren möchtest, mutierst du es einfach über seinen Key so:

Klingt zu einfach? Es ist einfach. Probier’s aus – du sparst dir damit vermutlich eine Menge umfangreicher Redux‑Logik und Debugging deiner API‑Calls.
SWR‑Integrationen
Wie du siehst, ist die Implementierung von SWR simpel; mit ein paar netten Kniffen lassen sich die obigen Beispiele schnell auf ein höheres, abstrakteres Niveau heben. Natürlich ist SWR nicht darauf beschränkt – es gibt zahlreiche Optionen und Integrationen:
GraphQL‑Integration
Error Handling mit Retry‑Optionen
Auto‑Revalidation
Pagination‑Support (auch für Infinite Loading)
Data Prefetching
und vieles mehr (Dokumentation)
Wir fanden die Arbeit mit SWR super und werden es für künftige Projekte definitiv in Betracht ziehen. Wenn du mehr über diese großartige Library erfahren möchtest, findest du Dokumentation, Configs und Beispiele auf der offiziellen Website hier.
Viel Spaß beim Coden!

Digital Transformation Strategy for Siemens Finance
Cloud-based platform for Siemens Financial Services in Poland


Das könnte Ihnen auch gefallen...

4 Gründe, Chakra UI in deinem nächsten Projekt zu verwenden
Chakra UI ist eine einfache, modulare und barrierefreie Komponentenbibliothek für die schnelle Entwicklung von React-Apps. Dank leichter Anpassbarkeit, Dark-Mode-Unterstützung, responsivem Design und starkem Fokus auf Barrierefreiheit hebt sich Chakra UI von anderen UI-Bibliotheken ab und ist damit eine ausgezeichnete Wahl für React-Entwicklerinnen und -Entwickler.

Mateusz Wójcik
19. Jan. 2021・4 Min. Lesezeit

PDF aus HTML in einer React-/Node.js-App erstellen
PDFs aus HTML zu erstellen kann eine Herausforderung sein, doch mit den richtigen Methoden erreichen Sie die gewünschten Ergebnisse. Entdecken Sie verschiedene Lösungen – von CSS-Druckstilen bis hin zu Bibliotheken wie html2canvas, jsPDF und Puppeteer. Verstehen Sie die Vor- und Nachteile der einzelnen Ansätze, um die beste Lösung für Ihr Projekt zu finden. Kontaktieren Sie uns unter hello@start-up.house für weitere Informationen und Unterstützung. Viel Erfolg bei der PDF-Erstellung!

Eugene Zolotarenko
20. Mai 2021・6 Min. Lesezeit

Outsourcing von Softwareentwicklung
Outsourcing der Softwareentwicklung hat sich vom reinen Kostenhebel zu einer Möglichkeit entwickelt, genau dann spezialisiertes Fachwissen einzubringen, wenn es die Roadmap braucht. Dieser Leitfaden definiert, was Softwareentwicklungs-Outsourcing umfasst, warum sich Startups und Großunternehmen dafür entscheiden und wie sich die wichtigsten Kooperationsmodelle in der Praxis unterscheiden. Er liefert eine Methode zur Bewertung potenzieller Partner und führt durch den Delivery-Prozess – von der Discovery-Phase bis zum Launch. Abschnitte zu Platform Engineering, Risikominimierung, ROI und Zukunftstrends runden die Analyse ab.

Alexander Stasiak
10. Aug. 2026・8 Min. Lesezeit

Autonome Essenslieferung
Lieferroboter für den Gehweg haben den Sprung von experimentellen Pilotprojekten in den Logistikalltag geschafft. Starship Technologies allein hat inzwischen über 9 Millionen Zustellungen in mehr als 270 Städten und auf Campus-Standorten durchgeführt, die Kosten auf der letzten Meile sinken um 30–50 %, und die elektrischen Roboter verbrauchen pro Lieferung etwa so viel Energie wie das Aufkochen einer Tasse Tee. Dieser Leitfaden zeigt, wo die autonome Essenslieferung 2026 wirklich steht – wie die Roboter funktionieren, wer sie nutzt, welcher Software- und KI-Stack im Hintergrund läuft, welche Vorschriften den Rollout prägen und eine stufenweise Roadmap für Restaurants, Lebensmittelhändler und Lieferplattformen, die die Technologie in Pilotprojekten testen wollen.

Alexander Stasiak
27. Apr. 2026・5 Min. Lesezeit

Entwicklung maßgeschneiderter Versicherungssoftware
Die Versicherungsbranche funktioniert nach Regeln, die so spezifisch und so stark vom jeweiligen Rechtsraum abhängen, dass generische Plattformen sie kaum sauber abbilden können. Dieser Leitfaden zeigt, was die Entwicklung maßgeschneiderter Versicherungssoftware umfasst – von Policenverwaltung und Schadenprozessen über Rating Engines bis zu Kundenportalen. Er stellt den Tech-Stack vor, der die von der Branche geforderte Zuverlässigkeit liefert, verfolgt die Umsetzung von der Discovery bis zum Deployment und zeigt, wo KI das Underwriting verändert. Häufige Stolpersteine und die tatsächlichen Kosten des Nichtstuns werden offen benannt.

Alexander Stasiak
11. Aug. 2026・8 Min. Lesezeit

Reisebranche im Wandel: Fallstudien darüber, wie Mobile-Apps die Nutzerbindung erhöhen und den Umsatz steigern
Mobile Apps revolutionieren die Reisebranche, steigern die Kundenbindung und kurbeln den Umsatz an. Dieser Artikel zeigt, wie Airbnb, Hilton und Expedia Mobile-Technologie erfolgreich nutzen, um das Kundenerlebnis zu verbessern und die Erlöse zu steigern. Lernen Sie aus ihren Strategien und Ergebnissen, um Ihr Reiseunternehmen zu optimieren.

Seweryn Olek
11. Juni 2024・6 Min. Lesezeit
Kürzlich hinzugefügt

Wie Startup House die Dauer von Leasinganträgen für Siemens Financial Services auf 2 Minuten verkürzte
Leasing stand früher für Papierkram, manuelle Bonitätsprüfungen und Entscheidungen, die nur zu Bürozeiten getroffen wurden. Bei Siemens Financial Services Poland hat Startup House das durch SimplyLease Online ersetzt: eine Anwendung, die Kunden in etwa 2 Minuten ausfüllen, und eine automatisierte Kreditentscheidung, die in rund 7 Minuten vorliegt – rund um die Uhr. Diese Fallstudie zeigt, wie die Plattform im Rahmen der Sicherheitsstandards der Siemens Group entwickelt wurde, wie sie sich mit Siemens-Systemen und externen Datenanbietern verbindet und welche Ergebnisse die seit 2016 bestehende Partnerschaft erzielt hat. Abschließend gibt es drei Erkenntnisse, die sich auf fast jedes Finanzierungs- oder Kreditprodukt anwenden lassen.

Alexander Stasiak
06. Okt. 2026・5 Min. Lesezeit

Wie eine Cybersecurity-Plattform für Fortune-500-Kunden das Onboarding mit einem von Startup House entwickelten KI-Agenten um 95 % reduzierte
Eine Cyber-Risikoplattform, der Fortune-500-Unternehmen vertrauen, hatte ein bekanntes Problem: Kunden schätzten sie, nutzten sie jedoch nur einmal pro Quartal, und das Onboarding dauerte 45 Minuten mit geführter Einrichtung. Startup House entwickelte Aria, einen direkt im Produkt eingebetteten KI-Agenten mit einer vierstufigen Oberfläche, die Board-Mitglieder, CFOs und CISOs in einem einzigen Dashboard bedient. Die Onboarding-Zeit sank um 95 % auf unter zwei Minuten, die Datenexploration wurde vollständig im Self-Service möglich, und die Plattform wurde zum täglichen Werkzeug der Entscheidungsunterstützung. Diese Fallstudie erläutert die Oberfläche, die Architektur der Mandantenisolierung (Tenant Isolation) und warum das alles ohne Änderungen am Kerncode der Plattform möglich war.

Marek Pałys
05. Okt. 2026・5 Min. Lesezeit

AI- und Digitalprojekte von Startup House: 5 messbare Ergebnisse in Zahlen
Versprechungen sind in der Softwareentwicklung schnell gemacht – deshalb stützt sich dieser Artikel auf belastbare Zahlen. Er führt durch fünf konkrete Ergebnisse aus Kundenprojekten von Startup House: von einer Reduktion der Onboarding-Zeit um 95 % dank eines eingebetteten KI-Agenten bis zu einer Senkung der Entwicklungskosten um 40 % bei Omnipack. Jeder Abschnitt zeigt, welche Art von Arbeit die jeweilige Zahl möglich gemacht hat, und verlinkt auf die zugrunde liegende öffentliche Fallstudie. Zum Schluss nennen wir drei gemeinsame Muster dieser Projekte – wertvolle Ansätze, die sich lohnen, unabhängig davon, ob Sie mit uns zusammenarbeiten oder nicht.

Alexander Stasiak
04. Okt. 2026・5 Min. Lesezeit

Healthtech-Softwareentwicklung bei Startup House: Compliance-orientierte Projekte und Ergebnisse
Bei Software im Gesundheitswesen ist Compliance entweder eine Architekturentscheidung – oder eine Nachrüstung. Dieser Artikel zeigt, wie man sie von Tag eins an einplant, anhand von drei Projekten von Startup House: einer Vertriebsplattform für Siemens Healthineers, im Einsatz in über 60 Ländern; einem Demenzpflege‑MVP, geprägt durch 7 Nutzertests mit Patient:innen und Angehörigen/Pflegekräften; und Doogie, ein HIPAA‑konformes KI‑Showcase, entwickelt in nur 2 Monaten. Außerdem erklären wir, wie RAG klinische KI‑Antworten bis zu verifizierten Quellen nachvollziehbar macht und warum Patientendaten niemals zum Training von Modellen verwendet werden. Für MedTech‑Unternehmen und Health‑SaaS‑Plattformen ist dies ein praxisnaher Blick darauf, was Compliance‑first‑Engineering jenseits des Labels wirklich bedeutet.

Marek Pałys
03. Okt. 2026・5 Min. Lesezeit

EdTech-Entwicklung bei Startup House: Was wir entwickelt haben und was sich dadurch verändert hat
EdTech-Plattformen scheitern häufiger an UX als an Technik: Lernende springen ab, Content skaliert nicht, und der ROI bleibt unsichtbar. Dieser Artikel zeigt, wie Startup House dem mit phasenweiser Umsetzung und echtem User Testing begegnet – belegt durch zwei Projekte: Graspify entwickelte sich von einer kühnen Idee zu einer Microlearning-Plattform, die während einer Firmenveranstaltung Hunderte Mitarbeitende schulte, und LITTLEWINE erhielt dank 10 User-Interviews in 2 Wochen einen investorentauglichen Projektumfang. Außerdem geht es um AI-Lerntools, die ausschließlich auf freigegebenen Inhalten antworten und in nur 2 Wochen live gehen können.

Alexander Stasiak
02. Okt. 2026・5 Min. Lesezeit

KI im Fintech: Projekte, Erkenntnisse und Ergebnisse von Startup House
Fintech-Kundinnen und -Kunden erwarten die Geschwindigkeit moderner Consumer-Apps, während Aufsichtsbehörden Kontrolle auf Bankniveau verlangen. Dieser Artikel zeigt, wie Startup House diese Spannung in drei Projekten ausbalanciert hat: automatisierte 24/7-Kreditentscheidungen für Siemens Financial Services, eine Cyber-Risk-Plattform, die den Umsatz innerhalb eines Jahres um 150 % steigerte, und ein Climate-Fintech-Team für CHOOOSE, das wir in zwei Wochen zusammengestellt haben. Zu jedem Projekt teilen wir die wichtigste Lektion. Den Abschluss bilden fünf Regeln für KI im Finanzwesen – von der Stützung jeder Antwort auf verifizierte Daten bis zur von Anfang an eingeplanten Mandantentrennung in der Architektur.

Marek Pałys
01. Okt. 2026・5 Min. Lesezeit
Bereit, Ihr Know-how mit KI zu zentralisieren?
Beginnen Sie ein neues Kapitel im Wissensmanagement – wo der KI-Assistent zum zentralen Pfeiler Ihrer digitalen Support-Erfahrung wird.
Arbeiten Sie mit einem Team, dem erstklassige Unternehmen vertrauen.
