Auswählen zwischen herkömmlichen Webanwendungen und Single-Page-Webanwendungen (SPAs)Choose Between Traditional Web Apps and Single Page Apps (SPAs)

„Atwoods Gesetz: Alle Anwendungen, die in JavaScript geschrieben werden können, werden früher oder später in JavaScript geschrieben.“"Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript."
- Jeff Atwood- Jeff Atwood

Heutzutage gibt es zwei allgemeine Ansätze für das Erstellen von Webanwendungen: herkömmliche Webanwendungen, die einen Großteil der Anwendungslogik auf dem Server ausführen, und Single-Page-Webanwendungen (SPAs), die einen Großteil der Logik der Benutzeroberfläche in einem Webbrowser ausführen und mit dem Webserver überwiegend über Web-APIs kommunizieren.There are two general approaches to building web applications today: traditional web applications that perform most of the application logic on the server, and single-page applications (SPAs) that perform most of the user interface logic in a web browser, communicating with the web server primarily using web APIs. Ein hybrider Ansatz ist ebenfalls möglich. Am einfachsten ist das Hosten von mindestens einer umfangreichen SPA-ähnlichen Unteranwendung in einer größeren herkömmlichen Webanwendung.A hybrid approach is also possible, the simplest being host one or more rich SPA-like subapplications within a larger traditional web application.

Verwenden Sie herkömmliche Webanwendungen in folgenden Szenarien:Use traditional web applications when:

  • Die clientseitigen Anforderungen Ihrer Anwendung sind einfach oder schreibgeschützt.Your application's client-side requirements are simple or even read-only.

  • Ihre Anwendung muss in Browsern ohne Unterstützung für JavaScript funktionieren.Your application needs to function in browsers without JavaScript support.

  • Ihr Team ist nicht mit Entwicklungstechniken mit JavaScript oder TypeScript vertraut.Your team is unfamiliar with JavaScript or TypeScript development techniques.

Verwenden Sie eine Single-Page-Webanwendung in folgenden Szenarien:Use a SPA when:

  • Ihre Anwendung muss eine umfangreiche Benutzeroberfläche mit vielen Features zur Verfügung stellen.Your application must expose a rich user interface with many features.

  • Ihr Team ist mit der Entwicklung mit JavaScript, TypeScript oder Blazor WebAssembly vertrautYour team is familiar with JavaScript, TypeScript, or Blazor WebAssembly development.

  • Ihre Anwendung muss bereits eine API für andere (interne oder öffentliche) Clients zur Verfügung stellen.Your application must already expose an API for other (internal or public) clients.

Darüber hinaus erfordern SPA-Frameworks ausführlichere Kenntnisse zur Architektur und Sicherheit.Additionally, SPA frameworks require greater architectural and security expertise. Aufgrund von regelmäßigen Aktualisierungen und neuen Frameworks erfordern sie einen größeren Änderungsumfang als herkömmliche Webanwendungen.They experience greater churn due to frequent updates and new frameworks than traditional web applications. Das Konfigurieren automatisierter Build- und Bereitstellungsprozesse und das Verwenden von Bereitstellungsoptionen wie Containern ist bei Single-Page-Webanwendungen schwieriger als bei herkömmlichen Webanwendungen.Configuring automated build and deployment processes and utilizing deployment options like containers may be more difficult with SPA applications than traditional web apps.

Die durch den SPA-Ansatz ermöglichte Verbesserung der Benutzererfahrung muss mit diesen Aspekten abgewogen werden.Improvements in user experience made possible by the SPA approach must be weighed against these considerations.

Blazor

ASP.NET Core enthält ein neues Modell namens Blazor zur Erstellung umfassender, interaktiver und zusammensetzbarer Benutzeroberflächen.ASP.NET Core includes a model for building rich, interactive, and composable user interfaces called Blazor. Blazor auf Serverseite ermöglicht Entwicklern, eine Benutzeroberfläche mit C# und Razor auf dem Server zu erstellen. Die Benutzeroberfläche kann über eine ständige SignalR-Verbindung in Echtzeit interaktiv mit dem Browser verbunden werden.Blazor server-side allows developers to build UI with C# and Razor on the server and for the UI to be interactively connected to the browser in real-time using a persistent SignalR connection. Blazor WebAssembly führt eine weitere Option für Blazor-Apps ein, die es ermöglicht, sie mit WebAssembly im Browser auszuführen.Blazor WebAssembly introduces another option for Blazor apps, allowing them to run in the browser using WebAssembly. Da es sich um echten .NET-Code handelt, der in WebAssembly ausgeführt wird, können Sie Code und Bibliotheken aus serverseitigen Teilen Ihrer Anwendung wiederverwenden.Because it's real .NET running on WebAssembly, you can reuse code and libraries from server-side parts of your application.

Blazor bietet eine neue, dritte Option, die bei der Beurteilung der Frage, ob eine rein auf dem Server gerenderte Webanwendung oder eine SPA entwickelt werden soll, zu berücksichtigen ist.Blazor provides a new, third option to consider when evaluating whether to build a purely server-rendered web application or a SPA. Mit Blazor können Sie komplexe, SPA-ähnliche clientseitige Verhaltensweisen entwickeln, ohne dass eine nennenswerte JavaScript-Entwicklung erforderlich ist.You can build rich, SPA-like client-side behaviors using Blazor, without the need for significant JavaScript development. Blazor-Anwendungen können APIs aufrufen, um Daten anzufordern oder serverseitige Vorgänge auszuführen.Blazor applications can call APIs to request data or perform server-side operations. Sie können bei Bedarf mit JavaScript interagieren, um die Vorteile von JavaScript-Bibliotheken und -Frameworks zu nutzen.They can interoperate with JavaScript where necessary to take advantage of JavaScript libraries and frameworks.

Erwägen Sie die Entwicklung Ihrer Webanwendung mit Blazor in folgenden Fällen:Consider building your web application with Blazor when:

  • Ihre Anwendung muss eine komplexe Benutzeroberfläche zur Verfügung stellen.Your application must expose a rich user interface

  • Ihr Team ist mit der .NET-Entwicklung besser vertraut als mit der JavaScript- oder TypeScript-Entwicklung.Your team is more comfortable with .NET development than JavaScript or TypeScript development

Wenn Sie über eine vorhandene Web Forms-Anwendung verfügen, die Sie zu .NET Core oder zur neuesten Version von .NET migrieren möchten, sollten Sie das kostenlose E-Book Blazor für ASP.NET Web Forms-Entwickler lesen, um herauszufinden, ob eine Migration der Anwendung zu Blazor sinnvoll ist.If you have an existing web forms application you're considering migrating to .NET Core or the latest .NET, you may wish to review the free e-book, Blazor for Web Forms Developers to see whether it makes sense to consider migrating it to Blazor.

Weitere Informationen zu Blazorfinden Sie unter Erste Schritte mit Blazor.For more information about Blazor, see Get started with Blazor.

Fälle für die Verwendung von herkömmlichen WebanwendungenWhen to choose traditional web apps

Im folgenden Abschnitt werden die zuvor genannten Gründe für die Entscheidung zur Auswahl herkömmlicher Webanwendungen ausführlicher erläutert.The following section is a more detailed explanation of the previously stated reasons for picking traditional web applications.

Ihre Anwendung verfügt über einfache, möglicherweise schreibgeschützte, clientseitige AnforderungenYour application has simple, possibly read-only, client-side requirements

Viele Webanwendungen werden von einem Großteil ihrer Benutzer hauptsächlich schreibgeschützt verwendet.Many web applications are primarily consumed in a read-only fashion by the vast majority of their users. Schreibgeschützte (oder überwiegend schreibgeschützte) Anwendungen sind tendenziell viel einfacher als Anwendungen, die eine große Menge von Zuständen verwalten und bearbeiten.Read-only (or read-mostly) applications tend to be much simpler than those applications that maintain and manipulate a great deal of state. Eine Suchmaschine kann beispielsweise aus einem einzelnen Einstiegspunkt mit einem Textfeld und einer zweiten Seite für die Anzeige von Suchergebnissen bestehen.For example, a search engine might consist of a single entry point with a textbox and a second page for displaying search results. Anonyme Benutzer können problemlos Anforderungen ausführen, und es besteht kaum Bedarf für clientseitige Logik.Anonymous users can easily make requests, and there is little need for client-side logic. Ebenso bestehen Blogs oder öffentliche Anwendungen von Inhaltsverwaltungssystemen üblicherweise aus Inhalt mit wenig clientseitigem Verhalten.Likewise, a blog or content management system's public-facing application usually consists mainly of content with little client-side behavior. Solche Anwendungen können einfach als herkömmliche serverbasierte Webanwendungen erstellt werden, die Logik auf dem Webserver anwenden und HTML für die Anzeige im Browser rendern.Such applications are easily built as traditional server-based web applications, which perform logic on the web server and render HTML to be displayed in the browser. Die Tatsache, dass jede eindeutige Seite der Website über eine eigene URL verfügt, die mit einem Lesezeichen versehen und von Suchmaschinen indiziert werden kann (standardmäßig ohne der Webanwendung ein separates Feature hinzufügen zu müssen), ist in solchen Szenarios ein weiterer klarer Vorteil.The fact that each unique page of the site has its own URL that can be bookmarked and indexed by search engines (by default, without having to add this functionality as a separate feature of the application) is also a clear benefit in such scenarios.

Ihre Anwendung muss in Browsern ohne Unterstützung für JavaScript funktionierenYour application needs to function in browsers without JavaScript support

Webanwendungen, die in Browsern mit eingeschränkter oder ohne Unterstützung von JavaScript funktionieren müssen, sollten mithilfe von Workflows für herkömmliche Webanwendungen geschrieben werden (oder zumindest dazu fähig sein, auf ein solches Verhalten ausweichen zu können).Web applications that need to function in browsers with limited or no JavaScript support should be written using traditional web app workflows (or at least be able to fall back to such behavior). Single-Page-Webanwendungen erfordern clientseitiges JavaScript, um zu funktionieren. Wenn dies nicht verfügbar ist, sind SPAs nicht empfehlenswert.SPAs require client-side JavaScript in order to function; if it's not available, SPAs are not a good choice.

Ihr Team ist nicht mit Entwicklungstechniken mit JavaScript oder TypeScript vertrautYour team is unfamiliar with JavaScript or TypeScript development techniques

Wenn Ihr Team sich nicht mit JavaScript oder TypeScript auskennt, aber mit der Entwicklung von serverseitigen Webanwendungen vertraut ist, ist es wahrscheinlich, dass Ihr Team eine herkömmliche Webanwendung schneller als eine SPA bereitstellen kann.If your team is unfamiliar with JavaScript or TypeScript, but is familiar with server-side web application development, then they will probably be able to deliver a traditional web app more quickly than a SPA. Sofern es nicht das Ziel ist, das Programmieren von SPAs zu lernen, oder wenn die Benutzerfreundlichkeit einer SPA nicht erforderlich ist, sind herkömmliche Webanwendungen eine produktivere Wahl für Teams, die mit dem Erstellen von diesen vertraut sind.Unless learning to program SPAs is a goal, or the user experience afforded by a SPA is required, traditional web apps are a more productive choice for teams who are already familiar with building them.

Fälle für die Verwendung von Single-Page-WebanwendungenWhen to choose SPAs

Im folgenden Abschnitt finden Sie eine ausführlichere Erläuterung dazu, wann Sie den Entwicklungsstil von Single-Page-Webanwendungen für Ihre Webanwendung verwenden sollten.The following section is a more detailed explanation of when to choose a Single Page Applications style of development for your web app.

Ihre Anwendung muss eine umfangreiche Benutzeroberfläche mit vielen Features zur Verfügung stellenYour application must expose a rich user interface with many features

SPAs können umfangreiche clientseitige Funktionalitäten unterstützen, die das erneute Laden der Seite nicht erfordern, wenn Benutzer Aktionen ausführen oder zwischen Bereichen der App navigieren.SPAs can support rich client-side functionality that doesn't require reloading the page as users take actions or navigate between areas of the app. SPAs können schneller geladen werden, und individuelle Benutzeraktionen reagieren besser, da das erneute Laden von vollständigen Seiten selten ist und Daten im Hintergrund abgerufen werden.SPAs can load more quickly, fetching data in the background, and individual user actions are more responsive since full page reloads are rare. SPAs können inkrementelle Updates unterstützen, wodurch teilweise abgeschlossene Formulare oder Dokumente gespeichert werden, ohne dass der Benutzer auf eine Schaltfläche zum Senden eines Formulars klicken muss.SPAs can support incremental updates, saving partially completed forms or documents without the user having to click a button to submit a form. SPAs können umfangreiches clientseitiges Verhalten (z.B. Drag & Drop) viel schneller unterstützen als herkömmliche Anwendungen.SPAs can support rich client-side behaviors, such as drag-and-drop, much more readily than traditional applications. SPAs können dafür entworfen sein, in einem getrennten Modus ausgeführt zu werden, dabei werden Updates an einem clientseitigen Modell vorgenommen, die schließlich mit dem Server synchronisiert werden, sobald die Verbindung wiederhergestellt wurde.SPAs can be designed to run in a disconnected mode, making updates to a client-side model that are eventually synchronized back to the server once a connection is re-established. Entscheiden Sie sich für eine Single-Page-Webanwendung, wenn die Anforderungen Ihrer App komplexe Funktionalität umfassen, die die Grenzen von gewöhnlichen HTML-Formularen übersteigt.Choose a SPA-style application if your app's requirements include rich functionality that goes beyond what typical HTML forms offer.

Für SPAs müssen regelmäßig Features implementiert werden, die in herkömmlichen Webanwendungen integriert sind, z. B. das Anzeigen einer aussagekräftigen URL in der Adressleiste, die den aktuellen Vorgang angibt (und Benutzern erlaubt, ein Lesezeichen zu setzen oder einen Deep-Link zu dieser URL zu erstellen, um zu einem späteren Zeitpunkt zurückzukehren).Frequently, SPAs need to implement features that are built into traditional web apps, such as displaying a meaningful URL in the address bar reflecting the current operation (and allowing users to bookmark or deep link to this URL to return to it). SPAs sollten Benutzern ebenfalls ermöglichen, die Schaltflächen „Zurück“ und „Weiter“ des Browsers zu verwenden, ohne dabei auf überraschende Ergebnisse zu stoßen.SPAs also should allow users to use the browser's back and forward buttons with results that won't surprise them.

Ihr Team ist mit der Entwicklung mit JavaScript und bzw. oder TypeScript vertrautYour team is familiar with JavaScript and/or TypeScript development

Das Schreiben von SPAs erfordert Erfahrung mit JavaScript und bzw. oder TypeScript und clientseitigen Programmiertechniken sowie Bibliotheken.Writing SPAs requires familiarity with JavaScript and/or TypeScript and client-side programming techniques and libraries. Ihr Team sollte dazu in der Lage sein, modernes JavaScript mit einem SPA-Framework wie „Angular“ zu schreiben.Your team should be competent in writing modern JavaScript using a SPA framework like Angular.

Ressourcen: SPA-FrameworksReferences – SPA Frameworks

Ihre Anwendung muss bereits eine API für andere (interne oder öffentliche) Clients zur Verfügung stellenYour application must already expose an API for other (internal or public) clients

Wenn Sie bereits eine Web-API für die Verwendung durch andere Clients unterstützen, erfordert es möglicherweise weniger Aufwand, eine SPA-Implementierung zu erstellen, die diese APIs nutzt, anstatt die Logik im serverseitigen Format zu reproduzieren.If you're already supporting a web API for use by other clients, it may require less effort to create a SPA implementation that leverages these APIs rather than reproducing the logic in server-side form. SPAs machen umfangreichen Gebrauch von Web-APIs, um Daten abzufragen und zu aktualisieren, während Benutzer mit der Anwendung interagieren.SPAs make extensive use of web APIs to query and update data as users interact with the application.

Fälle für die Verwendung von BlazorWhen to choose Blazor

Im folgenden Abschnitt finden Sie eine ausführlichere Erläuterung der Vorteile von Blazor für Ihre Webanwendung.The following section is a more detailed explanation of when to choose Blazor for your web app.

Ihre Anwendung muss eine komplexe Benutzeroberfläche zur Verfügung stellenYour application must expose a rich user interface

Wie JavaScript-basierte SPAs können Blazor-Anwendungen Rich-Client-Verhalten unterstützen, ohne dass Seiten neu geladen werden müssen.Like JavaScript-based SPAs, Blazor applications can support rich client behavior without page reloads. Diese Anwendungen reagieren besser auf Benutzer, indem sie nur die Daten (oder HTML) abrufen, die für die Reaktion auf eine bestimmte Benutzerinteraktion erforderlich sind.These applications are more responsive to users, fetching only the data (or HTML) required to respond to a given user interaction. Bei entsprechendem Entwurf können serverseitige Blazor-Apps so konfiguriert werden, dass sie mit minimalen Änderungen als clientseitige Blazor-Apps ausgeführt werden können, sobald dieses Feature unterstützt wird.Designed properly, server-side Blazor apps can be configured to run as client-side Blazor apps with minimal changes once this feature is supported.

Ihr Team ist mit der .NET-Entwicklung besser vertraut als mit der JavaScript- oder TypeScript-EntwicklungYour team is more comfortable with .NET development than JavaScript or TypeScript development

Viele Entwickler sind mit .NET und Razor produktiver als mit clientseitigen Sprachen wie JavaScript oder TypeScript.Many developers are more productive with .NET and Razor than with client-side languages like JavaScript or TypeScript. Da die Serverseite der Anwendung bereits mit .NET entwickelt wird, stellt die Verwendung von Blazor sicher, dass jeder .NET-Entwickler im Team das Verhalten des Front-Ends der Anwendung verstehen und möglicherweise entwickeln kann.Since the server-side of the application is already being developed with .NET, using Blazor ensures every .NET developer on the team can understand and potentially build the behavior of the front end of the application.

EntscheidungstabelleDecision table

In der folgenden Entscheidungstabelle werden einige der grundlegenden Faktoren zusammengefasst, die bei der Wahl zwischen einer herkömmlichen Webanwendung, einer SPA und einer Blazor-App beachtet werden sollten.The following decision table summarizes some of the basic factors to consider when choosing between a traditional web application, a SPA, or a Blazor app.

AspektFactor Herkömmliche WebanwendungTraditional Web App EinzelseitenanwendungSingle Page Application Blazor-AppBlazor App
Erforderliche Vertrautheit des Teams mit JavaScript oder TypeScriptRequired Team Familiarity with JavaScript/TypeScript MinimalMinimal ErforderlichRequired MinimalMinimal
Unterstützt Browser ohne SkriptSupport Browsers without Scripting UnterstütztSupported Nicht unterstütztNot Supported UnterstütztSupported
Minimales clientseitiges AnwendungsverhaltenMinimal Client-Side Application Behavior Gut geeignetWell-Suited Zu viel AufwandOverkill ViableViable
Umfangreiche und komplexe Anforderungen für die BenutzeroberflächeRich, Complex User Interface Requirements EingeschränktLimited Gut geeignetWell-Suited Gut geeignetWell-Suited