Yeah, one of my "How Web Apps Work" posts covers much of this question:
https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-...
Quick sequence walkthrough, for the typical "Client-Side Rendering (CSR)" scenario:
- Ahead of time, on a developer build system: the original app source code is run through a full compilation process, including stripping out types, processing assets like images and CSS, bundling the hundreds/thousands of original source files into a handful of merged files to minimize downloads, and minifying it to shrink download size. (Once upon a time this was done with Browserify. Today, it's typically a build toolchain based around Webpack, such as Create-React-App, Next.js, or the Angular CLI, or a similar toolchain using tools like newer / faster tools ESBuild or SWC.)
- These "static files" are deployed to some web server system, and the server software waits for a user to request that page.
- Browser requests a site for the first time. Server returns a small HTML page that has links to the primary page CSS, and the pre-built JS app bundle files.
- Browser loads the JS, and the client-side app code bootstraps itself. It attaches itself to a given DOM node (usually an empty div that just acts as a placeholder), and does an initial render, generating all of the initial DOM content as it works through the component tree
- Now that the UI is initialized, the UI framework waits for user interactions, at which point it applies state updates, checks to see what the UI should look like _now_ based on the component tree, and efficiently updates the DOM to match the desired results.
There's also "Static Site Generation (SSG)", where the same React/Vue/Angular/Svelte UI components can be used to generate plain HTML files ahead of time, and "Server-Side Rendering (SSR)", where those same UI components can be used to render HTML as a string on the server on demand in response to a page request.