{"id":1783,"date":"2025-12-23T11:00:38","date_gmt":"2025-12-23T11:00:38","guid":{"rendered":"https:\/\/oussamasaidi.com\/?p=1783"},"modified":"2025-12-23T11:04:04","modified_gmt":"2025-12-23T11:04:04","slug":"react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends","status":"publish","type":"post","link":"https:\/\/oussamasaidi.com\/en\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends\/","title":{"rendered":"React 19 &amp; Vite: Build Fast Frontends for .NET Developers"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Introduction: Why .NET Developers Need Modern Frontend Tools<\/h2>\n\n\n\n<p>For many years, <strong>ASP.NET developers<\/strong> have focused mainly on server-side rendering using technologies like <strong>ASP.NET MVC<\/strong>, <strong>Razor Pages<\/strong>, and <strong>Blazor<\/strong>. While these frameworks remain powerful, the modern web has evolved rapidly. Today, users expect <strong>instant load times<\/strong>, <strong>smooth UI interactions<\/strong>, and <strong>app-like experiences<\/strong>. This is where <strong>React 19 and Vite<\/strong> becomes a game changer.<\/p>\n\n\n\n<p>React 19 introduces major improvements in rendering, concurrency, and server components. Meanwhile, Vite provides an ultra-fast development experience with near-instant startup and lightning-fast Hot Module Replacement (HMR).<\/p>\n\n\n\n<p>If you are a <strong>.NET developer<\/strong>, this guide will help you:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understand React 19 from a backend-first mindset<\/li>\n\n\n\n<li>Learn why Vite is better than older bundlers<\/li>\n\n\n\n<li>Integrate React smoothly with ASP.NET Core APIs<\/li>\n\n\n\n<li>Build scalable, production-ready frontends<\/li>\n<\/ul>\n\n\n\n<p>By the end of this article, you will know exactly how to <strong>build fast frontends with React 19 and Vite<\/strong>, using concepts familiar to every .NET engineer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why React Is the Best Frontend Choice for .NET Developers<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">A Familiar Component-Based Architecture<\/h3>\n\n\n\n<p>React\u2019s component model feels natural to .NET developers. If you have used:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Razor Components<\/li>\n\n\n\n<li>Blazor Components<\/li>\n\n\n\n<li>MVC Partial Views<\/li>\n<\/ul>\n\n\n\n<p>Then React components will feel instantly familiar.<\/p>\n\n\n\n<p>Each React component:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Has a clear responsibility<\/li>\n\n\n\n<li>Accepts inputs (props)<\/li>\n\n\n\n<li>Manages internal state<\/li>\n\n\n\n<li>Renders UI declaratively<\/li>\n<\/ul>\n\n\n\n<p>This mirrors how <strong>clean architecture<\/strong> works in backend development.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React\u2019s Ecosystem Fits Perfectly with ASP.NET Core<\/h3>\n\n\n\n<p>React works exceptionally well with <strong>ASP.NET Core Web APIs<\/strong>. You can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Build REST APIs with ASP.NET<\/li>\n\n\n\n<li>Consume them using React with Fetch or Axios<\/li>\n\n\n\n<li>Secure endpoints using JWT or OAuth<\/li>\n\n\n\n<li>Deploy frontend and backend independently<\/li>\n<\/ul>\n\n\n\n<p>This separation improves scalability and maintainability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What\u2019s New in React 19 (And Why It Matters)<\/h2>\n\n\n\n<p>React 19 is not just an incremental update. It introduces powerful features that significantly improve performance and developer experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. React Compiler (Automatic Memoization)<\/h3>\n\n\n\n<p>One of the biggest challenges in React has always been performance optimization.<\/p>\n\n\n\n<p>Previously, developers had to manually use:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>useMemo<\/code><\/li>\n\n\n\n<li><code>useCallback<\/code><\/li>\n\n\n\n<li><code>React.memo<\/code><\/li>\n<\/ul>\n\n\n\n<p>React 19 introduces a <strong>React Compiler<\/strong> that automatically optimizes rendering.<\/p>\n\n\n\n<p><strong>Why this matters for .NET developers:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Less manual optimization<\/li>\n\n\n\n<li>Cleaner code<\/li>\n\n\n\n<li>Performance similar to compiled frameworks<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Improved Server Components<\/h3>\n\n\n\n<p>React Server Components (RSC) are now more stable and easier to integrate.<\/p>\n\n\n\n<p>They allow you to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Render components on the server<\/li>\n\n\n\n<li>Reduce JavaScript sent to the browser<\/li>\n\n\n\n<li>Improve initial load times<\/li>\n<\/ul>\n\n\n\n<p>This approach aligns perfectly with ASP.NET\u2019s server-side philosophy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Better Concurrent Rendering<\/h3>\n\n\n\n<p>React 19 improves concurrent features such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>useTransition<\/code><\/li>\n\n\n\n<li>Streaming UI updates<\/li>\n\n\n\n<li>Non-blocking rendering<\/li>\n<\/ul>\n\n\n\n<p>As a result, your UI remains responsive even during heavy operations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Vite Is the Best Build Tool for React<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">The Problem with Traditional Bundlers<\/h3>\n\n\n\n<p>Tools like Webpack work well, but they suffer from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Slow startup times<\/li>\n\n\n\n<li>Complex configuration<\/li>\n\n\n\n<li>Long rebuild cycles<\/li>\n<\/ul>\n\n\n\n<p>As projects grow, these problems become more visible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vite Solves These Problems<\/h3>\n\n\n\n<p>Vite uses:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Native ES Modules<\/li>\n\n\n\n<li>Lightning-fast dev server<\/li>\n\n\n\n<li>Optimized production builds using Rollup<\/li>\n<\/ul>\n\n\n\n<p><strong>Key benefits:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instant project startup<\/li>\n\n\n\n<li>Fast HMR<\/li>\n\n\n\n<li>Minimal configuration<\/li>\n<\/ul>\n\n\n\n<p>For .NET developers used to fast <code>dotnet watch<\/code>, Vite feels just right.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up React 19 with Vite (Step-by-Step)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Prerequisites<\/h3>\n\n\n\n<p>Before starting, ensure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js 18+<\/li>\n\n\n\n<li>.NET 8 SDK<\/li>\n\n\n\n<li>Basic JavaScript knowledge<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Create a React 19 and Vite Project<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm create vite@latest react19-vite -- --template react\ncd react19-vite\nnpm install\nnpm run dev\n<\/pre>\n\n\n\n<p>Your development server starts instantly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Project Structure Explained (For .NET Minds)<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/\n \u251c\u2500 components\/\n \u251c\u2500 pages\/\n \u251c\u2500 layouts\/\n \u251c\u2500 hooks\/\n \u251c\u2500 services\/\n \u251c\u2500 utils\/\n \u251c\u2500 assets\/\n \u251c\u2500 App.tsx\n \u2514\u2500 main.tsx\n<\/pre>\n\n\n\n<p>This structure maps well to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Controllers \u2192 Pages<\/li>\n\n\n\n<li>Services \u2192 API calls<\/li>\n\n\n\n<li>Components \u2192 UI building blocks<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Connecting React 19 to ASP.NET Core APIs<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Typical Architecture<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[ React 19 + Vite ]\n        \u2193 HTTP\n[ ASP.NET Core Web API ]\n        \u2193\n[ Database ]\n<\/pre>\n\n\n\n<p>This separation ensures:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Independent deployment<\/li>\n\n\n\n<li>Easier scaling<\/li>\n\n\n\n<li>Cleaner codebase<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Example API Call from React<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">fetch(\"https:\/\/localhost:5001\/api\/products\")\n  .then(res => res.json())\n  .then(data => setProducts(data));\n<\/pre>\n\n\n\n<p>For .NET developers, this mirrors consuming APIs in C#.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">State Management: Simple, Clean, and Predictable<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Local State with Hooks<\/h3>\n\n\n\n<p>React 19 relies heavily on hooks.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const [count, setCount] = useState(0);<\/pre>\n\n\n\n<p>This pattern feels similar to property binding in Blazor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Global State Options<\/h3>\n\n\n\n<p>For larger apps, consider:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Context API<\/li>\n\n\n\n<li>Zustand<\/li>\n\n\n\n<li>Redux Toolkit<\/li>\n<\/ul>\n\n\n\n<p>Most .NET developers prefer <strong>predictable state<\/strong>, which makes Redux Toolkit a solid choice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Routing with React Router<\/h2>\n\n\n\n<p>React Router handles navigation in Single Page Applications.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;Route path=\"\/products\" element={&lt;Products \/>} \/>\n<\/pre>\n\n\n\n<p>Routing concepts are very close to ASP.NET MVC routes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Performance Optimization Best Practices<\/h2>\n\n\n\n<p>Code Splitting with Lazy Loading<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const AdminPage = React.lazy(() => import(\".\/AdminPage\"));\n<\/pre>\n\n\n\n<p>This reduces initial load time significantly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Memoization Without Pain<\/h3>\n\n\n\n<p>Thanks to the React Compiler, React 19 minimizes unnecessary renders automatically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Strategies That Work Well with React &amp; .NET Teams<\/h2>\n\n\n\n<p>Popular options include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS Modules<\/li>\n\n\n\n<li>Tailwind CSS<\/li>\n\n\n\n<li>MUI (Material UI)<\/li>\n<\/ul>\n\n\n\n<p>For enterprise .NET teams, <strong>MUI<\/strong> is often preferred due to its structured design system.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing React 19 Applications<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Recommended Tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vitest (Vite-native testing)<\/li>\n\n\n\n<li><a href=\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png\" target=\"_blank\" rel=\"noopener\" title=\"best-dot-net-8-testing-libraries\">Testing Library<\/a><\/li>\n\n\n\n<li>Playwright for E2E<\/li>\n<\/ul>\n\n\n\n<p>Testing concepts map well to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/oussamasaidi.com\/en\/net-8-testing-libraries-complete-guide-for-developers\/\" target=\"_blank\" rel=\"noopener\" title=\"Best .NET 8 Testing Libraries: The Complete Guide for Developers\">xUnit<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/oussamasaidi.com\/en\/net-8-testing-libraries-complete-guide-for-developers\/\" target=\"_blank\" rel=\"noopener\" title=\"\">NUnit<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/oussamasaidi.com\/en\/net-8-testing-libraries-complete-guide-for-developers\/\" target=\"_blank\" rel=\"noopener\" title=\"\">MSTest<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Deployment Strategies<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Option 1: Separate Deployments (Recommended)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React \u2192 Vercel \/ Netlify<\/li>\n\n\n\n<li>ASP.NET \u2192 Azure App Service<\/li>\n<\/ul>\n\n\n\n<p>This ensures scalability and flexibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">ption 2: Serve React from ASP.NET<\/h3>\n\n\n\n<p>You can build React and serve static files from ASP.NET.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"bash\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm run build\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Common Mistakes .NET Developers Make (And How to Avoid Them)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Thinking React Is MVC<\/h3>\n\n\n\n<p>React is not MVC. It is <strong>UI state management<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Overusing Global State<\/h3>\n\n\n\n<p>Not everything belongs in global state. Prefer local state when possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ignoring Accessibility<\/h3>\n\n\n\n<p>Always:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use proper labels<\/li>\n\n\n\n<li>Follow ARIA guidelines<\/li>\n\n\n\n<li>Test keyboard navigation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why React 19 and Vite Is the Future for .NET Developers<\/h2>\n\n\n\n<p>React 19 combined with Vite offers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Exceptional performance<\/li>\n\n\n\n<li>Modern developer experience<\/li>\n\n\n\n<li>Seamless backend integration<\/li>\n\n\n\n<li>Long-term stability<\/li>\n<\/ul>\n\n\n\n<p>For .NET developers, it provides the perfect balance between <strong>control<\/strong>, <strong>scalability<\/strong>, and <strong>speed<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React 19 and Vite vs Other Stacks<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Stack<\/th><th>Speed<\/th><th>Developer Experience<\/th><th>Scalability<\/th><\/tr><\/thead><tbody><tr><td>React 19 + Vite<\/td><td>&#x2b50;&#x2b50;&#x2b50;&#x2b50;&#x2b50;<\/td><td>&#x2b50;&#x2b50;&#x2b50;&#x2b50;&#x2b50;<\/td><td>&#x2b50;&#x2b50;&#x2b50;&#x2b50;&#x2b50;<\/td><\/tr><tr><td>CRA (Create React App)<\/td><td>&#x2b50;&#x2b50;<\/td><td>&#x2b50;&#x2b50;<\/td><td>&#x2b50;&#x2b50;<\/td><\/tr><tr><td>Webpack + React<\/td><td>&#x2b50;&#x2b50;&#x2b50;<\/td><td>&#x2b50;&#x2b50;&#x2b50;<\/td><td>&#x2b50;&#x2b50;&#x2b50;&#x2b50;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>If you are a <strong>.NET developer<\/strong> looking to build <strong>fast, modern, and scalable frontends<\/strong>, React 19 with Vite is one of the best choices available today.<\/p>\n\n\n\n<p>It respects clean architecture principles, integrates smoothly with ASP.NET Core, and delivers outstanding performance.<\/p>\n\n\n\n<p>By mastering this stack, you future-proof your skills and open the door to modern web development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&#x1f525; Pro Tip<\/h3>\n\n\n\n<p>If you already build APIs with <strong>ASP.NET Core<\/strong>, learning <a href=\"https:\/\/react.dev\/versions\" target=\"_blank\" rel=\"noopener\" title=\"\">React 19 <\/a>+ Vite will multiply your value as a <strong>full-stack developer<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"213\" src=\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-1024x213.png\" alt=\"react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends\" class=\"wp-image-1815\" srcset=\"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-1024x213.png 1024w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-300x63.png 300w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-768x160.png 768w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-1536x320.png 1536w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-2048x427.png 2048w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-18x4.png 18w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-256x53.png 256w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-950x198.png 950w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-1920x400.png 1920w, https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-1320x275.png 1320w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends<\/figcaption><\/figure>\n\n\n\n<div class=\"buy-coffee-container\">\n<p style=\"text-align:center; color:#555; font-size:14px;\">\n  If this article helped you, consider supporting my work.\n<\/p>\n  <a\n    href=\"https:\/\/buymeacoffee.com\/oussamasaii\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    class=\"buy-coffee-button\"\n  >\n    &#x2615; Buy me a coffee\n  <\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Introduction: Why .NET Developers Need Modern Frontend Tools For many years, ASP.NET developers have focused mainly on server-side rendering using&#8230; <\/p>\n<div class=\"art-el-more\"><a href=\"https:\/\/oussamasaidi.com\/en\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends\/\" class=\"art-link art-color-link art-w-chevron\">Read more<\/a><\/div>","protected":false},"author":1,"featured_media":1815,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[170],"tags":[],"ppma_author":[286],"class_list":["post-1783","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classe-fr"],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/react-19-and-vite-for-dotnet-developers-build-fast-modern-frontends-scaled.png","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":981,"url":"https:\/\/oussamasaidi.com\/en\/net-8-testing-libraries-complete-guide-for-developers\/","url_meta":{"origin":1783,"position":0},"title":"Best .NET 8 Testing Libraries: The Complete Guide for Developers","author":"Saidi Oussama","date":"December 15, 2025","format":false,"excerpt":"IntroductionWhy Testing Matters More Than Ever in .NET 8Types of Tests in .NET ApplicationsUnit TestsIntegration TestsEnd-to-End (E2E) Tests1. xUnit \u2013 The Most Popular .NET Testing FrameworkWhy xUnit Is a Top ChoiceInstalling xUnit in .NET 8Writing Your First xUnit TestWhy xUnit Works Well for Professionals2. NUnit \u2013 A Mature and Feature-Rich\u2026","rel":"","context":"In &quot;.Net Core&quot;","block_context":{"text":".Net Core","link":"https:\/\/oussamasaidi.com\/en\/category\/netcore\/"},"img":{"alt_text":"Best .NET 8 Testing Libraries","src":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/best-dot-net-8-testing-libraries.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1406,"url":"https:\/\/oussamasaidi.com\/en\/net-8-test-driven-design-architecture-7-proven-patterns-to-build-robust-maintainable-systems\/","url_meta":{"origin":1783,"position":1},"title":"Net 8 Test Driven Design Architecture 7 Proven Patterns to Build Robust, Maintainable Systems","author":"Saidi Oussama","date":"November 25, 2025","format":false,"excerpt":"Introduction to Test Driven Design \u2014 What this guide covers If you want a battle-tested approach to designing systems that are maintainable, testable, and production-ready, .Net 8 Test Driven Design Architecture combines the stability of .NET 8 with Test Driven Design discipline and modern architecture patterns. This guide gives patterns,\u2026","rel":"","context":"In &quot;.Net Core&quot;","block_context":{"text":".Net Core","link":"https:\/\/oussamasaidi.com\/en\/category\/netcore\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/dot-net-8-tdd-architecture-article-cover.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/dot-net-8-tdd-architecture-article-cover.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/dot-net-8-tdd-architecture-article-cover.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/dot-net-8-tdd-architecture-article-cover.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/dot-net-8-tdd-architecture-article-cover.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/dot-net-8-tdd-architecture-article-cover.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1325,"url":"https:\/\/oussamasaidi.com\/en\/building-professional-modern-api-documentation-in-net-core-with-scalar\/","url_meta":{"origin":1783,"position":2},"title":"Building Professional, Modern API Documentation in .NET Core with Scalar","author":"Saidi Oussama","date":"November 19, 2025","format":false,"excerpt":"Introduction In today\u2019s software ecosystem, APIs are everywhere. Whether you are building a mobile application, a microservices architecture, or an internal company platform, your API is often the backbone of the system. But even the best API becomes useless if developers cannot understand how to consume it. This is why\u2026","rel":"","context":"In &quot;.Net Core&quot;","block_context":{"text":".Net Core","link":"https:\/\/oussamasaidi.com\/en\/category\/netcore\/"},"img":{"alt_text":"Building Professional, Modern API Documentation in .NET Core with Scalar","src":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/Building-Professional-Modern-API-Documentation-in-.NET-Core-with-Scalar.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/Building-Professional-Modern-API-Documentation-in-.NET-Core-with-Scalar.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/Building-Professional-Modern-API-Documentation-in-.NET-Core-with-Scalar.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/Building-Professional-Modern-API-Documentation-in-.NET-Core-with-Scalar.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/Building-Professional-Modern-API-Documentation-in-.NET-Core-with-Scalar.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/11\/Building-Professional-Modern-API-Documentation-in-.NET-Core-with-Scalar.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1639,"url":"https:\/\/oussamasaidi.com\/en\/restful-api-mastery-best-practices-with-asp-net-core\/","url_meta":{"origin":1783,"position":3},"title":"RESTful API Best Practices with ASP.NET Core","author":"Saidi Oussama","date":"December 16, 2025","format":false,"excerpt":"Professional Best Practices, Versioning Strategies & Advanced Serialization (Part 1) In this blog Introduction: Building Enterprise-Grade RESTful APIs with ASP.NET Core1. RESTful APIs in the Modern ASP.NET Core EcosystemWhy REST Still Dominates2. REST Architectural Constraints Every ASP.NET Core API Must EnforceClient\u2013Server SeparationStatelessnessUniform Interface3. Establishing a Clean and Scalable ASP.NET Core\u2026","rel":"","context":"In &quot;.Net Core&quot;","block_context":{"text":".Net Core","link":"https:\/\/oussamasaidi.com\/en\/category\/netcore\/"},"img":{"alt_text":"RESTful API Mastery","src":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-cover-scaled.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-cover-scaled.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-cover-scaled.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-cover-scaled.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-cover-scaled.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-cover-scaled.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1565,"url":"https:\/\/oussamasaidi.com\/en\/securing-sensitive-information-in-net-core\/","url_meta":{"origin":1783,"position":4},"title":"Securing Sensitive Information in .NET Core: A Complete Guide for Developers","author":"Saidi Oussama","date":"December 8, 2025","format":false,"excerpt":"Protecting user data is one of the most critical responsibilities of any software developer. In today\u2019s connected world, even a small leakage of sensitive information \u2014 API keys, passwords, or tokens \u2014 can have devastating consequences. Fortunately, .NET Core (or .NET 9 and later) offers several mechanisms to help you\u2026","rel":"","context":"In &quot;.Net Core&quot;","block_context":{"text":".Net Core","link":"https:\/\/oussamasaidi.com\/en\/category\/netcore\/"},"img":{"alt_text":"Securing sensitive Information in .NET Core","src":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/securing-sensitive-information-in-net-core.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/securing-sensitive-information-in-net-core.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/securing-sensitive-information-in-net-core.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/securing-sensitive-information-in-net-core.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/securing-sensitive-information-in-net-core.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":1714,"url":"https:\/\/oussamasaidi.com\/en\/https-oussamasaidi-com-restful-api-mastery-best-practices-with-asp-net-core-part-2\/","url_meta":{"origin":1783,"position":5},"title":"RESTful API best practices\u00a0with ASP.NET Core Part 2","author":"Saidi Oussama","date":"December 20, 2025","format":false,"excerpt":"Testing, Performance, Security, Microservices & Deployment Introduction: From Solid Foundations to Production Excellence In Part 1 of RESTful API Mastery, we established the architectural and technical foundations required to build reliable, evolvable RESTful APIs with ASP.NET Core. However, a well-designed API only becomes truly valuable when it is tested, observable,\u2026","rel":"","context":"In &quot;.Net Core&quot;","block_context":{"text":".Net Core","link":"https:\/\/oussamasaidi.com\/en\/category\/netcore\/"},"img":{"alt_text":"RESTful API Mastery","src":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-2r.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-2r.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-2r.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-2r.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-2r.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/oussamasaidi.com\/wp-content\/uploads\/2025\/12\/restful-api-mastery-best-practices-with-asp-net-core-2r.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"authors":[{"term_id":286,"user_id":1,"is_guest":0,"slug":"oussama_sa","display_name":"Saidi Oussama","avatar_url":{"url":"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2022\/02\/001_001_cv1.jpg","url2x":"https:\/\/oussamasaidi.com\/wp-content\/uploads\/2022\/02\/001_001_cv1.jpg"},"author_category":"1","first_name":"Oussama","last_name":"SAIDI","user_url":"https:\/\/oussamasaidi.com","job_title":"Senior Fullstack .NET Developer","description":"I\u2019m a Senior Fullstack .NET Developer specializing in building scalable, high-performance web applications with .NET, C#, and modern frontend frameworks like React.js. I\u2019m passionate about clean architecture, automated testing, and sharing knowledge through blogs and tutorials."}],"_links":{"self":[{"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/posts\/1783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/comments?post=1783"}],"version-history":[{"count":38,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/posts\/1783\/revisions"}],"predecessor-version":[{"id":1822,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/posts\/1783\/revisions\/1822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/media\/1815"}],"wp:attachment":[{"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/media?parent=1783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/categories?post=1783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/tags?post=1783"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/oussamasaidi.com\/en\/wp-json\/wp\/v2\/ppma_author?post=1783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}