Running MSW in SSR apps

[nareshbhatia]

So far I have run MSW with simple React apps that call APIs from the client-side.

1. Can MSW also be used to mock APIs that are called from the server-side on frameworks such as Next.js and Remix? How does this conceptually work?
2. What if my app makes calls from both client-side and server-side?

[kettanaito]

Hey, @nareshbhatia.

Can MSW also be used to mock APIs that are called from the server-side on frameworks such as Next.js and Remix? How does this conceptually work?

Yes, that's possible. You can see the Next.js usage example where the same mocks are used for the client- and server-side requests.

What if my app makes calls from both client-side and server-side?

Your app can make requests from both sides and still get them intercepted. This is achieved by different interceptors though—you use setupWorker in the client and setupServer in the server process.

Limitations

There are, however, limitations to this approach. As you instantiate interception in different environments, there's no established way to communicate between those environments. You may experience this limitation if you want to mutate some data on the client and expect the server request to respond with the next state of the data. That won't be possible.

We've introduced the concept of a "remote" interceptor for some time now, which should allow facilitating this issue in theory. This hasn't been added to MSW for now. I've tried it on a Next.js project and, for some reason, Next.js doesn't spawn the client process as a child of the server process. Without this parent-child relation, this remote interception won't work. There are really no options if there's no connection between the two processes.

I've asked about this behavior in this discussion but, sadly, nobody has answered me yet.

[nareshbhatia]

Thank you for the detailed response, @kettanaito. I will give this a try.

[alexanderkrust]

Hey @kettanaito!
Maybe i'm doing something wrong in the example. The client-side requests works perfectly. But the server-side one fails.
Nextjs is throwing the following error: FetchError: request to https://my.backend/book failed, reason: getaddrinfo ENOTFOUND my.backend. Could you help me with that? Thanks! :)

[kettanaito]

I highly suggest updating msw, this error should be gone.

[willscott085]

Getting the same error on the latest MSW release. Seems like rolling back to Next.js 12 fixes it, though.

[Lewischarlton93]

Doesn't work using App router (NextJS 13+)

[tehandyb]

Any update on the concept of remote interceptor? I would like to be able to have msw intercept requests from nextjs that is running in another node process.

[kettanaito]

@tehandyb, I hope I've mentioned this somewhere (maybe in the #799) that Next does not have the architecture that'd support that. I don't have any technical details behind it but if you launch a Next app from within your test, that app server's process won't be a child process of your test. This makes for no IPC, so we cannot apply a remote interceptor.

You can investigate whether you'd be successful in establishing an IPC between your test process and the running Next app process. If you succeed, please publish your setup to a repo so I could get a look. Thanks.

[tehandyb]

@kettanaito Thanks I will look into it! Found this library https://www.npmjs.com/package/node-ipc now I just need to see if there's an elegant way to use it without making users wire things up themselves too much