Where does SvelteKit, Next.js and Nuxt.js code run? And can you write http request handlers in these frameworks?

Question

I have been using SvelteKit casually for a little bit now in my own personal projects. I have used other frameworks like Next.js and Nuxt.js in the past too. It has always confused me when working in these frameworks where the code I am writing is actually run.

For some context in my day job I use the ASP.NET Core platform to create more traditional web applications.

In ASP.NET it is clear to me where the code I write is run. I write frontend markup in Razor pages (just a way to write html but inject C# expressions inside). When the browser requests a page to view from the server, the server grabs the page and any data it needs, generates html from the Razor page markup and sends it back to the browser to render it into a beautiful web page Also within the same application I can write http handlers that can listen out for form submissions and interact with a database via an ORM.

In JavaScript frameworks such as SvelteKit, Next.js or Nuxt.js however this process has always confused me. I know that each of the frameworks use their respective component frameworks (Svelte, React and Vue) under the hood in some way. I also understand that each framework adds the ability to have file based routing so that files in a specific place in the src code map to a specific route in the browser. eg in SvelteKit you can have a svelte file at src/routes/myAmazingPage.svelte that gets rendered in when the browser browses to https://wherevertheappishosted.com/myAmazingPage .

However this is where my understanding becomes a bit clouded. When you browse between pages in SvelteKit it does not cause page reloads in the browser. This tells me that the framework is using some kind of client side routing to handle this behavior as the url at the top of the page and the page contents change without causing a page reload. There are also no network requests being sent to the server to fetch pages at a certain url which tells me that all the data fetching must be being done in JavaScript on component mount or within some other lifecycle hook.

So my question is in that case if there are no http requests being sent out per page request (ie when you navigate to a different page) to a server, then where is the code I write in SvelteKit actually run? Is it the case of all the code I write in SvelteKit is compiled and sent over to the browser on initial page load and then all run in the browser? Including code I write to fetch data within lifecycle methods like onMount() .

Also if that is true then do these frameworks have any kind of http server running in the background to handle any other web requests? For example can I write a http handler in svelte kit to handle a post request from a form submission to save data to a database? That is the way I would go about handling form submissions in ASP.NET and I have always wondered if it is possible to do in SvelteKit, Next.js or Nuxt.js. The only alternative to this that I have used in the past is writing a separate http server written in node.js and express to handle communicating with a database and other operations, that I send all my requests from my SvelteKit apps towards.

May be a bit of an obvious question to more experienced JavaScript framework developers out there, but since working in a more traditional MVC framework like ASP.NET on a daily basis this subject has always confused me.

Thanks for reading my first Stack Overflow Question,it was a long one so appreciate you making it to the end. Have a good day !

Answer 1

SvelteKit applications can be deployed few different ways to production.

• In development mode, the request handler is run by Vite development server
• In static production deployment mode, there is no request handler and nothing is run on the backend - the visitor just downloads HTML, CSS and JS files from the server
• In server-side rendering (SSR) production mode, the requests are run by SvelteKit node adapter (Node.js process) . The adapter allows also to write server-side request handlers that are not available in the static deployment mode.

Next.js and Nuxt.js have their respective own web servers written in JavaScript on the top of Node.js V8 virtual machine.