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
Top 10 Innovationstrends der Reisebranche, die 2025 prägen werden
Von KI-generierten Reiseplänen über immersive virtuelle Reiseziele bis hin zu nachhaltigen Luxusreisen – das Reisen im Jahr 2025 wandelt sich rasant. In diesem Artikel stellen wir 10 bahnbrechende Reiseinnovationen vor, die neu definieren, wie wir die Welt entdecken, Erlebnisse buchen und unterwegs mit Technologie interagieren.
Alexander Stasiak
23. Juni 2025・12 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
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
Kürzlich hinzugefügt
Die besten KI-Unternehmen in Mittel- und Osteuropa für Enterprise-Kunden
Die Wahl des Technologiepartners für die Einführung von Künstlicher Intelligenz (KI) im Enterprise-Segment erfordert, über die gängigen Kriterien eines Softwarehauses hinauszugehen. In der CEE-Region (Mittel- und Osteuropa) agieren Anbieter, die globale Skalierung mit tiefgreifender Engineering-Expertise verbinden und Agentensysteme sowie RAG-Wissensbasen anbieten – konform mit dem AI Act und DORA. Dieser Artikel präsentiert eine Übersicht verifizierter Unternehmen mit dokumentierten KI-Implementierungen für den Corporate-Sektor.
Alexander Stasiak
04. Nov. 2026・10 Min. Lesezeit
Die besten KI-Unternehmen für die Fintech- und Versicherungsbranche (2027)
Die Wahl des Technologiepartners in regulierten Branchen ist eine Entscheidung von großer Tragweite. Wenn Sie wissen möchten, welche der besten KI-Unternehmen für Fintech und Versicherungen in Polen aktiv sind, vergleicht dieser Beitrag Softwarehäuser, Systemintegratoren und Softwarehersteller, die KI-Agenten, RAG-Wissensdatenbanken und Datenanalyse in Banken, Fintechs und bei Versicherern implementieren. Sie finden hier eine Vergleichstabelle, Firmenprofile, die Anforderungen von DORA, der DSGVO und dem AI Act, den Implementierungsprozess sowie eine Startup House Case Study mit Zahlen.
Alexander Stasiak
03. Nov. 2026・12 Min. Lesezeit
KI in der Lebensmittelproduktion: Praxisbeispiele und Implementierungspartner (2027)
Lebensmittelhersteller stehen vor der Herausforderung begrenzter Haltbarkeit, volatiler Rohstoffpreise und steigender Anforderungen der Handelsketten, weshalb die Nachfrageprognose und die Produktionsplanung immer häufiger von KI (AI) unterstützt werden. In diesem Überblick zeigen wir, wie KI (AI) 2026 und 2027 in der Lebensmittelproduktion eingesetzt wird: Praxisbeispiele und Implementierungspartner in Polen. Hier finden Sie einen Vergleich von Implementierungsdienstleistern (Startup House, Comarch, Sii Polska, TTMS) und Tools (RELEX, o9 Solutions, Kinaxis) sowie Informationen zum Implementierungsprozess, zu Risiken und Antworten auf häufig gestellte Fragen.
Alexander Stasiak
02. Nov. 2026・11 Min. Lesezeit
KI-Integration in ERP- und CRM-Systeme (SAP, Comarch, Dynamics): so funktioniert es in der Praxis (2027)
Die Integration von KI in ERP- und CRM-Systeme (SAP, Comarch, Dynamics) bedeutet in der Praxis die Wahl zwischen drei Modellen: ein vom Hersteller eingebauter Assistent, eine eigene KI-Schicht mit API-Anbindung oder KI-Agenten, die über MCP auf den Systemen arbeiten. Der Text richtet sich an mittelständische und große Unternehmen in Polen, die Sprachmodelle mit ihrem bestehenden ERP oder CRM – auch mit Legacy-Systemen – verbinden wollen. Sie finden hier einen Vergleich der Hersteller-Tools (SAP Joule, Microsoft Dynamics 365, Comarch ERP, Salesforce Agentforce, Oracle NetSuite), der Implementierungspartner, den Einführungsprozess, Risiken sowie eine Fallstudie mit konkreten Zahlen.
Alexander Stasiak
01. Nov. 2026・13 Min. Lesezeit
Automatisierung von Geschäftsprozessen mit KI-Agenten: vom Workflow zum Agenten
Automatisierung von Geschäftsprozessen mit KI-Agenten: Vom Workflow zum Agenten ist ein Leitfaden für mittelständische und große Unternehmen, die einen Dienstleister oder ein Tool zur Automatisierung ihrer Abläufe suchen. Wir zeigen, worin sich ein deterministischer Workflow von einem entscheidungsfähigen KI-Agenten unterscheidet, vergleichen Implementierungspartner (Startup House, Comarch, WeAreFuture, TTMS) sowie Plattformen (n8n, Make, Zapier, Power Automate, Copilot Studio, UiPath, LangGraph, OpenAI Agents SDK). Zum Schluss beschreiben wir den Implementierungsprozess, eine Fallstudie von Startup House und die Risiken.
Alexander Stasiak
31. Okt. 2026・11 Min. Lesezeit
KI-Assistent für Vertrieb und Kundenservice: Eigenentwicklung oder Copilot
KI-Assistent für Vertrieb und Kundenservice: Eigenentwicklung oder Copilot? Vor dieser wichtigen Entscheidung stehen heute Vertriebs-, Service- und IT-Teams in mittelständischen und großen Unternehmen. Die Wahl zwischen einem fertigen Produkt wie Microsoft 365 Copilot und dem Aufbau eines eigenen KI-Assistenten beeinflusst Einführungsgeschwindigkeit, Datenhoheit und die Passung zu den Prozessen deines Unternehmens. In diesem Beitrag findest du einen Vergleich der Tools (Salesforce Agentforce, Microsoft 365 Copilot for Sales und for Service, HubSpot, Zendesk, Intercom Fin) und der Implementierungspartner, Auswahlkriterien, den Implementierungsprozess sowie eine Fallstudie von Startup House.
Alexander Stasiak
30. Okt. 2026・13 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.
