I have merged an ASP.NET Core 6 Web API and a React.js frontend into a single project using ASP.NET Core with React. However, when I run the application for the first time, it takes an unusually long time to load.

Issue

• The React app's JavaScript and CSS files take too much time to build and load initially.
• The issue occurs only on the first load; subsequent loads are faster.

Project Setup

• Backend: ASP.NET Core 6 Web API
• Frontend: React.js (integrated inside ASP.NET Core)

What I've Tried

• Checked startup performance – backend APIs responds fast after the first load.
• Analyzed network requests – large JavaScript and CSS files are taking time.
• Tried preloading & caching – no major improvement on the first load.

Questions

• Why does the JavaScript and CSS take too much time to load on the first request?
• Are there optimizations in React (Webpack, Babel, etc.) or ASP.NET Core static file handling that can reduce the first load time?
• Would SSR, prerendering, or lazy loading help in this case?

Any guidance on improving the first-load performance would be appreciated!

I have merged an ASP.NET Core 6 Web API and a React.js frontend into a single project using ASP.NET Core with React. However, when I run the application for the first time, it takes an unusually long time to load.

Issue

• The React app's JavaScript and CSS files take too much time to build and load initially.
• The issue occurs only on the first load; subsequent loads are faster.

Project Setup

• Backend: ASP.NET Core 6 Web API
• Frontend: React.js (integrated inside ASP.NET Core)

What I've Tried

• Checked startup performance – backend APIs responds fast after the first load.
• Analyzed network requests – large JavaScript and CSS files are taking time.
• Tried preloading & caching – no major improvement on the first load.

Questions

• Why does the JavaScript and CSS take too much time to load on the first request?
• Are there optimizations in React (Webpack, Babel, etc.) or ASP.NET Core static file handling that can reduce the first load time?
• Would SSR, prerendering, or lazy loading help in this case?

Any guidance on improving the first-load performance would be appreciated!

• reactjs
• asp-core-webapi
• -6.0

Share Improve this question Follow edited Mar 17 at 10:29 Deep Ponkiya asked Mar 17 at 6:12 Deep PonkiyaDeep Ponkiya 3199 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

1. Separate Build Processes

   • ASP.NET Core and React have independent build processes. When you start the ASP.NET Core app, it doesn’t mean the React app is instantly ready. React’s JavaScript needs to be compiled and bundled before it can be served.

2. SSR (Server-Side Rendering) Won't Fix This

   • If the issue is due to bundling and building React, SSR won't directly help because React still needs to be built before it can be rendered on the server.
   • However, if you’re considering SSR, integrating Next.js with ASP.NET Core is an option.
   • Blazor or Razor Pages are C# frontend alternatives, that come with SSR.

Optimizations to Speed Up First Load

• Pre-build the React App before running ASP.NET Core (npm run build and serve static files).
• Use Webpack optimizations like code splitting and tree shaking.
• Enable gzip or Brotli compression in ASP.NET Core to serve minimized assets faster.

Why you should not worry too much

When you deploy the app, JS (frontend) assets will be built, so the delay on first load should not happen in deployed app.