Integration with Angular 20+ SSR & Fastify

[spawnrider]

Hi everyone,

I’m working on a Headless Rendering Engine application based on Angular 20+ with SSR/CSR. Most pages are rendered server-side for performance and SEO purposes.

Recently, I replaced the Express server with Fastify, and everything works smoothly so far.

Now, I need to mock server-side calls to my Headless CMS instance. I tried initializing an MSW (Mock Service Worker) server on the server side using a function like this:

async function enableMocking() {
  // Enable MSW server-side in dev mode
  if (environment.useMocks.msw) {
    console.log('[MSW] Starting mock service worker for server-side...');

    const { server } = await import('./shared/testing/msw/server');

    server.listen({ onUnhandledRequest: 'bypass' });
    process.on('SIGINT', () => server.close());
    process.on('SIGTERM', () => server.close());
  }
}

However, the behavior in dev mode (using ng serve) is strange:

The mock server seems to start and stop unexpectedly.
After a source file modification and server reload, it works perfectly.

Could this be related to the Vite dev server or Angular’s HMR?
Do you have any recommendations or best practices for configuring MSW in this kind of SSR/CSR setup with Fastify?

Thanks in advance!

[kettanaito]

Hi, @spawnrider.

That sounds like the underlying bundler/framework issue. You aren't wrong to suspect HMR since every framework has its own rules and the way they reevaluate modules in development. Using Vite does help since that trims down those behaviors to a particular tool.

I don't have any direct examples to give you here, unfortunately. I recommend raising this as a question in the Vite community and see what the team would advise there. From MSW's standpoint, there's nothing we are doing that would warrant this behavior. I've also used MSW for development in Vite projects quite a few times and never encountered this issue. Some of the Examples we have also use Vite, see if they can help you in any way.