Add MSW usage example #13731

kettanaito · 2020-06-03T19:18:55Z

Summary

This example illustrates how to use the Mock Service Worker (MSW) library with Next.

It allows users to kick off a full-scale project with any API mocking strategy they choose: augment an existing API, or design an expected API directly on the client side. MSW grants seamless requests interception at both client- and server-side, so the mock definition users write affect runtime requests and build-time requests, making the DX superb.

I believe that in combination with Next this is a great starting point for any project:

Develop against a mocked API without your app even knowing its mocked;
Extend existing API for new features while backend is not ready;
Mock specific API responses for debugging and tests.

Implementation

Adds public/mockServiceWorker.js file, which is auto-generated by npx msw init ./public.

Client-side

MSW intercepts request on the client side by using Service Worker API. That allows it to capture requests after they leave your app, on the network level. This is the closest experience to speaking with an actual server, without having to have one.

MSW uses the established Service Worker instance for the purpose of requests interception, but executes the mocking logic on the application's side. This allows users to integrate their app's logic into mocks, reuse functionality, and write mock definition as a part of their project (i.e. using TypeScript, or RxJS).

Please see the mocks/handlers.js and mocks/browser.js for the technical side of this implementation.

Server-side

Since there is no Service Worker in Node, MSW provides transparent requests interception by augmenting native request issuing modules (http/https/XMLHttpRequest). A cherry on top is that the mocking on the server can use the same mock definition as on the client.

The key points of this implementation reside in mocks/server.js and next.config.js. It's been a question where to put the logic that's suppose to run once on the server in Next. Your feedback on the changes to Next config is highly appreciated!

Screenshots

The usage example is a single book detail page. It fetches main book information as a part of getServerSideProps, and can query for book reviews on runtime.

I'd appreciate any suggestion regarding styling, I don't know if there are any guidelines to follow. Styling itself is not the focus of the example, so the screenshots use default styles.

Roadmap

Fast reload results into the worker activation being performed twice. Logging of captured requests is also duplicated. Must have something to do with when worker.start() is called during fast reload rebuild.

examples/with-msw/pages/_app.js

ijjk · 2020-06-03T19:45:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	10.8s	10.9s	⚠️ +22ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.004	1.915	-0.09
/ avg req/sec	1247.78	1305.38	⚠️ +57.6
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.27	1.24	-0.03
/error-in-render avg req/sec	1968.97	2016.64	⚠️ +47.67

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	924 B	924 B	✓
link.html gzip	934 B	934 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	11.8s	11.9s	⚠️ +136ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	879 kB	879 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

kettanaito · 2020-06-04T08:12:03Z

Updated msw to 0.18.1 to include the fix to ReferenceError: location is not defined on the
server. Now the remaining issue is the SSR hydration error, since preventing an _app.js to render until the mocks are ready effectively produces null at the initial render, making a SSR mismatch.

It appears that MSW should implement an alternative await mechanism.

The alternative await mechanism is being developed. Proof of concept is successful, should be released soon.

ijjk · 2020-06-04T08:17:39Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	12.3s	12s	-331ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.009	2.018	⚠️ +0.01
/ avg req/sec	1244.32	1239.02	-5.3
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.179	1.105	-0.07
/error-in-render avg req/sec	2119.94	2261.99	⚠️ +142.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	924 B	924 B	✓
link.html gzip	934 B	934 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	12.8s	12.8s	-47ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	879 kB	879 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

ijjk · 2020-06-04T08:23:15Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	10.3s	10.3s	-17ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.788	1.822	⚠️ +0.03
/ avg req/sec	1398.02	1371.95	-26.07
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.015	1.017	0
/error-in-render avg req/sec	2463.3	2458.35	-4.95

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	924 B	924 B	✓
link.html gzip	934 B	934 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	11.6s	11.9s	⚠️ +255ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	879 kB	879 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

ijjk · 2020-06-04T14:00:19Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	10.7s	10.9s	⚠️ +214ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.793	1.958	⚠️ +0.17
/ avg req/sec	1394.54	1276.89	-117.65
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.106	1.207	⚠️ +0.1
/error-in-render avg req/sec	2260.64	2070.57	-190.07

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	924 B	924 B	✓
link.html gzip	934 B	934 B	✓
withRouter.html gzip	922 B	922 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	11.8s	12s	⚠️ +240ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.59 kB	6.59 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.67 kB	5.67 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	879 kB	879 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

kettanaito · 2020-06-04T14:37:29Z

Having a linting (Prettier) errors.

Edit: The Prettier check was fixed, I've formatted the worker file with Prettier, shouldn't be an issue.

ijjk · 2020-06-04T19:11:21Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	12.1s	12.4s	⚠️ +273ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.092	2.05	-0.04
/ avg req/sec	1195.04	1219.24	⚠️ +24.2
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.296	1.223	-0.07
/error-in-render avg req/sec	1928.91	2043.66	⚠️ +114.75

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	925 B	925 B	✓
link.html gzip	935 B	935 B	✓
withRouter.html gzip	923 B	923 B	✓
Overall change	2.78 kB	2.78 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	13.2s	13.2s	⚠️ +16ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..6c2a.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.93 kB	6.93 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	878 kB	878 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

kettanaito · 2020-06-05T19:33:39Z

I'm not including a deployment link, because MSW is not meant for production usage, making this example oriented at development experience. Developers should use actual servers in production.

ijjk · 2020-06-05T19:45:33Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	11.8s	11.6s	-234ms
nodeModulesSize	66 MB	66 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.085	2.13	⚠️ +0.04
/ avg req/sec	1198.88	1173.89	-24.99
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.36	1.295	-0.07
/error-in-render avg req/sec	1838.46	1930.02	⚠️ +91.56

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	927 B	927 B	✓
link.html gzip	936 B	936 B	✓
withRouter.html gzip	924 B	924 B	✓
Overall change	2.79 kB	2.79 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	13.2s	12.8s	-331ms
nodeModulesSize	66 MB	66 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.js gzip	6.61 kB	6.61 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..9545.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	57 kB	57 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
main-HASH.module.js gzip	5.69 kB	5.69 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.92 kB	6.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	52.5 kB	52.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.js gzip	1.26 kB	1.26 kB	✓
_error.js gzip	3.25 kB	3.25 kB	✓
hooks.js gzip	881 B	881 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.05 kB	2.05 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	8.21 kB	8.21 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app.module.js gzip	604 B	604 B	✓
_error.module.js gzip	2.04 kB	2.04 kB	✓
hooks.module.js gzip	383 B	383 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js gzip	1.51 kB	1.51 kB	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	5.32 kB	5.32 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	878 kB	878 kB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.81 kB	3.81 kB	✓
index.js	878 kB	878 kB	✓
link.js	916 kB	916 kB	✓
routerDirect.js	909 kB	909 kB	✓
withRouter.js	909 kB	909 kB	✓
Overall change	4.5 MB	4.5 MB	✓

kettanaito · 2020-06-05T20:18:47Z

I'd appreciate any insights in regards to how debug that fast refresh issue! It appears that _app.js is called twice somewhere during the fast refresh 🤔 Not necessarily an issue, but need to handle that when starting a worker. Perhaps, calling worker.start() outside of the MyApp scope?

kettanaito · 2020-06-09T17:29:05Z

During the Fast Refresh the hot module bubbles to the pages/_app.js, which calls worker.start() again. Although calling that function repetitively doesn't register a new worker, but rather reuses an existing one, it still produces an activation message (the reason why there is an extra message in the console upon hot update).

What I still don't fully understand is why the request logging logic also triggers multiple times. It is as if the previous state of the chunk is left alone, and the new chunk is applied on top of it. I wonder if this should be solved by providing a hot reload mechanism on the msw side.

dpyzo0o · 2020-06-28T06:14:40Z

Any progress on this? When do we expect it to be merged?

kettanaito · 2020-06-28T10:28:01Z

Hey, @dpyzo0o. The NextJS-related implementation shouldn't change at this point. You can use this pull request as a working reference.

There is an issue on the MSW side (mswjs/msw#217) that results into multiple log entries after Fast Refresh (described above). We are working on fixing it, and bumping the msw version in this example. Once that's done, it'll be up to NextJS team to review it. Please stay patient.

dpyzo0o · 2020-06-28T10:34:20Z

@kettanaito Thanks, nice job!

thomasmery · 2020-07-16T12:43:44Z

Hi @kettanaito

thanks for making this possible

I have successfully implemented this in my NextJs app but was wondering how you would go about starting / stopping the mws server for server side calls (like I'd like to be able to tell the app whether or not I want the mocking to happen on the server side)

I know the mws server is started when the app is started (next dev) but was wonderig if it was possible to control this after it's started

for instance from a cypress test suite

maybe I'm looking at this the wrong way

hope you can help

kettanaito · 2020-07-17T10:34:25Z

Hey, @thomasmery. Could you please give me an example of such use case?

You can always have a conditional mocking in your request handlers, which you can hit during your Cypress tests:

rest.get('/user', (req, res, ctx) => {
  if (ANY_CONDITION) {
    // Returning nothing skips this request handler, and performs the request as-is
    return 
  }

  // Return a mocked response otherwise
  return res(...)
})

We encourage embedding such conditional behavior into the mocks, so your routes are predictable and easier to reason about, as opposed to turning the entire mocking on/off in specific tests, which may get confusing when debugging, or reading.

thomasmery · 2020-07-17T10:46:58Z

Hi @kettanaito

thanks for you reply,

the use case is that I usually have an api server running when developing and want to use MSW only when testing

I can do this easily with jest and the node setup by starting the msw server in the beforeAll hook

I wanted to do the same with Cypress but if I launch my nextjs app with msw started then this is not only for Cypress but for all manual interactions with the app too

it feels like modifying every handler to bypass it if I'm not using Cypress could be cumbersome (and how would I tell the handler I'm running Cypress (I know i can check for window.Cypress in the client code but on the server ... ?)

but maybe I'm confused and missing something obvious

kettanaito · 2020-07-17T11:44:29Z

MSW is started conditionally in both client and server side of NextJS runtime. Take a look at next.config.js and its isMockingEnabled variable. It depends on the NODE_ENV. If you launch your app with the environment different than "development", the mocking won't be enabled. Hope this helps.

This is an alternative to: vercel/next.js#13731 I prefer this solution because I can use ES6 modules everywhere so I can share constants, types, etc. between implementation and test

thomasmery · 2020-07-17T12:47:44Z

thanks

I have come up with a solution like this:

const useMocks =
    process.env.USE_MOCKS === 'true' &&
    [PHASE_DEVELOPMENT_SERVER].includes(phase) &&
    process.env.NODE_ENV === 'development';
  if (useMocks) {
    // Enable API mocking when serving our application in development mode.
    // This allows to any traffic issued by `getServerSideProps` and similar
    // to go through the request interception, and potentially being mocked.
    server.listen();
  }

which allows to start the server in mock mode only if I want to
even in dev mode with an npm script like so:

"dev:mocks": "USE_MOCKS=true next dev -p 3001"

thomasmery · 2020-07-17T14:20:12Z

on another matter, and maybe the nextjs team can help here

it seems not possible to use code from a Typescript project inside the handlers since the whole msw setup for the server side of things takes place in the config.next.js file

I have read this thread : #5318

which seems related to this

the use case I had was trying to import some config related variables from some other part of my app to configure the handlers request urls (for dev & staging environments)

I solved this by using regexp path matching

but I thought I would ask here since maybe I did not understand things right and it is possible to import from a ts code base inside those js files

I know you say:

This allows users to integrate their app's logic into mocks, reuse functionality, and write mock definition as a part of their project (i.e. using TypeScript, or RxJS).

but I fail to understand this (unless I turn the handlers.js into a .ts file which could not be used on the server side of things)

but I'm probably confused, feel free to ignore this it is way off base

thanks anyhow

lfades · 2020-07-22T01:53:13Z

@thomasmery Next.js will not transpile/transform any code that's in next.config.js or in a custom server, there are no plans to change that per the reasons explained in the thread you shared.

@kettanaito Ping me when the example is ready for review as I would like to review it 🙏

kettanaito · 2020-07-30T09:17:53Z

We've successfully resolved the Fast Refresh issue on browser runtime 🎉
The fix will be available in the version 0.20.0, which I will bump in this example once it's released.

We are experiencing another issue regarding server-side API mocking (with getServerSideProps).

Server-side updates

The server-side API interception is established in the mocks/server.js which is imported in next.config.js. Whenever I change mocks/handler.js (dependency of mocks/server.js), the changes are never reflected and I need to restart the app to see them.

Technical reason

It appears that NextJS executes next.config.js configuration function at the start of the build. Incremental updates to the modules imported in the configuration are not propagated to the configuration itself. I think this makes sense in terms of having a reproducible config and you don't really want your configuration to change on runtime.

However, how should we deal with the server-side requests interception so it supports changes to the request handlers? It feels like there should be some pages/_server.js special module that would get executed on the "server" side, and that would respect HMR just as any other runtime module.

@lfades, may I please ask for your domain knowledge in this? It seems like next.config.js is not the right place to establish server-side requests interception in the end. Would appreciate a discussion about this. Thank you!

lfades · 2020-07-30T22:23:26Z

@kettanaito Next.js currently doesn't watch for changes made to next.config.js. If you're setting up an external server, that server should take care of setting a watcher for its own modules.

kettanaito · 2020-08-09T08:34:02Z

Thanks for the reply, @lfades!

The issue here is that mocks/server.js is not a server at all (name is only for familiarity). It's a regular module, and I would spawn a watcher of any sort to handle its HMR/FR for it. This is currently the only issue left to merge this example.

That module controls what requests get mocked on the server-side of Next (i.e. getServerSideProps). Changing those methods itself applies HMR, since getServerSideProps lives next to the components/pages, which are reloaded as expected. This doesn't affect the server.js, because it's imported as a part of NextJS config.

Please, what would you recommend for this case? Is there another place to import server.js to execute on the server-side of Next and support fast refresh?

lfades · 2020-08-11T00:38:14Z

@kettanaito I see. I think I get it now after reading this: https://mswjs.io/docs/api/setup-server.

next.config.js is not the place where you would want to init the "server", as it's a place for configs that will never be refreshed unless the server is restarted. Can you try moving it to _app.js similarly to the way you're doing it for the browser webworker?

kettanaito · 2020-08-11T08:07:16Z

@lfades, thanks for the recommendation. Indeed, when I moved the server-side handlers invocation into _app.js and required them conditionally it worked. One would need to refresh the page in order to see the server-side change, which I think makes sense, as requests in getServerSideProps are executed on initial page load, you won't expect them to appear in runtime.

This example is complete from the MSW point of view. Could you please give it a look? Thank you.

I'm curious how do you handle dependency updates? If I release a new version of msw in the future, is it okay if I update this example afterwards?

ijjk · 2020-08-11T08:13:53Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	11.1s	11.4s	⚠️ +311ms
nodeModulesSize	57.2 MB	57.2 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.062	2.058	0
/ avg req/sec	1212.43	1215.04	+2.61
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.141	1.089	-0.05
/error-in-render avg req/sec	2191.72	2294.75	+103.03

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..6aa6.js gzip	10 kB	10 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-9a7a5f4..661e.js gzip	6.71 kB	6.71 kB	✓
polyfills-75..1629.js gzip	31 kB	31 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	87.7 kB	87.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..dule.js gzip	5.92 kB	5.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-d0ac695..dule.js gzip	5.79 kB	5.79 kB	✓
polyfills-75..dule.js gzip	31 kB	31 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	82.6 kB	82.6 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-4c2bd9b..eadd.js gzip	1.29 kB	1.29 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-236a801..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	273 B	273 B	✓
_buildManife..dule.js gzip	279 B	279 B	✓
Overall change	552 B	552 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	945 B	945 B	✓
link.html gzip	954 B	954 B	✓
withRouter.html gzip	939 B	939 B	✓
Overall change	2.84 kB	2.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	13s	12.7s	-333ms
nodeModulesSize	57.2 MB	57.2 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..6aa6.js gzip	10 kB	10 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-9a7a5f4..661e.js gzip	6.71 kB	6.71 kB	✓
polyfills-75..1629.js gzip	31 kB	31 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	87.7 kB	87.7 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..dule.js gzip	5.92 kB	5.92 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-d0ac695..dule.js gzip	5.79 kB	5.79 kB	✓
polyfills-75..dule.js gzip	31 kB	31 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	82.6 kB	82.6 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-4c2bd9b..eadd.js gzip	1.29 kB	1.29 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-236a801..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	273 B	273 B	✓
_buildManife..dule.js gzip	279 B	279 B	✓
Overall change	552 B	552 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.82 kB	3.82 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.07 MB	1.07 MB	✓
routerDirect.js	1.06 MB	1.06 MB	✓
withRouter.js	1.06 MB	1.06 MB	✓
Overall change	5.26 MB	5.26 MB	✓

Commit: 8dae5a7

lfades · 2020-08-13T04:20:19Z

@kettanaito

I'm curious how do you handle dependency updates? If I release a new version of msw in the future, is it okay if I update this example afterwards?

Please do YES THANK YOU! 💌

I will review the PR very soon

ijjk · 2020-08-14T05:42:46Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	13s	12.8s	-200ms
nodeModulesSize	57.3 MB	57.3 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.405	2.42	⚠️ +0.02
/ avg req/sec	1039.66	1032.87	⚠️ -6.79
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.453	1.449	0
/error-in-render avg req/sec	1720.33	1725.64	+5.31

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..c139.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-b57f5ce..0446.js gzip	6.74 kB	6.74 kB	✓
polyfills-75..1629.js gzip	31 kB	31 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	87.9 kB	87.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..dule.js gzip	6.12 kB	6.12 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-65b0875..dule.js gzip	5.82 kB	5.82 kB	✓
polyfills-75..dule.js gzip	31 kB	31 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	82.9 kB	82.9 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-4c2bd9b..eadd.js gzip	1.29 kB	1.29 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-236a801..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	650 B	650 B	✓

Rendered Page Sizes

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
index.html gzip	946 B	946 B	✓
link.html gzip	954 B	954 B	✓
withRouter.html gzip	940 B	940 B	✓
Overall change	2.84 kB	2.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
buildDuration	14.8s	14.6s	-185ms
nodeModulesSize	57.3 MB	57.3 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..c139.js gzip	10.2 kB	10.2 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
main-b57f5ce..0446.js gzip	6.74 kB	6.74 kB	✓
polyfills-75..1629.js gzip	31 kB	31 kB	✓
webpack-ccf5..276a.js gzip	751 B	751 B	✓
Overall change	87.9 kB	87.9 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
677f882d2ed8..dule.js gzip	6.12 kB	6.12 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
main-65b0875..dule.js gzip	5.82 kB	5.82 kB	✓
polyfills-75..dule.js gzip	31 kB	31 kB	✓
webpack-10c7..dule.js gzip	751 B	751 B	✓
Overall change	82.9 kB	82.9 kB	✓

Client Pages

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-874bd8a..0103.js gzip	1.28 kB	1.28 kB	✓
_error-fa39c..ec40.js gzip	3.45 kB	3.45 kB	✓
hooks-585f07..95a3.js gzip	887 B	887 B	✓
index-c7b63f..fc02.js gzip	227 B	227 B	✓
link-4c2bd9b..eadd.js gzip	1.29 kB	1.29 kB	✓
routerDirect..ebc7.js gzip	284 B	284 B	✓
withRouter-2..db68.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_app-97e743e..dule.js gzip	626 B	626 B	✓
_error-b4004..dule.js gzip	2.3 kB	2.3 kB	✓
hooks-696209..dule.js gzip	387 B	387 B	✓
index-a4dd74..dule.js gzip	226 B	226 B	✓
link-236a801..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-1..dule.js gzip	282 B	282 B	✓
Overall change	5.37 kB	5.37 kB	✓

Client Build Manifests

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_buildManifest.js gzip	321 B	321 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	650 B	650 B	✓

Serverless bundles

	vercel/next.js canary	kettanaito/next.js examples/with-msw	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.18 kB	4.18 kB	✓
hooks.html	3.82 kB	3.82 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.07 MB	1.07 MB	✓
routerDirect.js	1.06 MB	1.06 MB	✓
withRouter.js	1.06 MB	1.06 MB	✓
Overall change	5.26 MB	5.26 MB	✓

Commit: e127d7e

…s/with-msw

lfades

@kettanaito Thank you for the example I like it a lot! 💯

I have updated the readme to add a deploy button, and also the environment variable to make sure it works on production for the example (so the deploy button, yarn start and yarn build work) - because there's no API when the mocks are disabled. But of course mentioning that it's intentional only for the sake of the example.

Good work 👏

kettanaito · 2020-08-14T09:42:18Z

@lfades thank you looking at this and for the corrections!

The changes are done from my side, with the only DX drawback is that changes in handlers.js won't trigger any visible update for the server-side request handlers (those affecting getServerSideProps). Refreshing the page triggers those requests on the server, and the changes will apply.

I believe there is no mechanism to tackle this on NextJS side at the moment. If you find this behavior acceptable, please feel free to merge this pull request! I'd love to finally reference it in the docs :)

* Add MSW usage example * Updated example * Added .gitignore * Added .gitignore in the right place lol Co-authored-by: Luis Alvarez <luis@vercel.com>

kettanaito requested review from chibicode, ijjk, lfades, Timer and timneutkens as code owners June 3, 2020 19:18

kettanaito marked this pull request as draft June 3, 2020 19:21

rafaelalmeidatk reviewed Jun 3, 2020

View reviewed changes

examples/with-msw/pages/_app.js Outdated Show resolved Hide resolved

rafaelalmeidatk added the examples Issue/PR related to examples label Jun 3, 2020

kettanaito marked this pull request as ready for review June 4, 2020 13:54

This was referenced Jun 4, 2020

Document mocking best practices with nextjs testing-library/testing-library-docs#491

Open

Adds usage example with NextJS mswjs/examples#8

Closed

Timer assigned lfades Jun 5, 2020

This was referenced Jun 15, 2020

Add NextJS example mswjs/examples#6

Closed

Stopping and starting MSW will cause multiple "instances" mswjs/msw#217

Closed

thomasmery mentioned this pull request Jul 17, 2020

MSW Server seems to prevent Axios timeout errors even when not started mswjs/msw#284

Closed

This was referenced Jul 29, 2020

Erroring in next.js even if .start() called only in browser mswjs/msw#305

Closed

feature: remove listeners on stop mswjs/msw#244

Merged

Add MSW usage example

8dae5a7

Updated example

e127d7e

lfades added 3 commits August 14, 2020 00:57

Added .gitignore

e9760ef

Added .gitignore in the right place lol

25bb636

Merge branch 'canary' of https://github.com/zeit/next.js into example…

872ff08

…s/with-msw

lfades approved these changes Aug 14, 2020

View reviewed changes

lfades merged commit 746000e into vercel:canary Aug 14, 2020

kettanaito deleted the examples/with-msw branch August 14, 2020 16:52

vercel locked as resolved and limited conversation to collaborators Jan 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add MSW usage example #13731

Add MSW usage example #13731

kettanaito commented Jun 3, 2020 •

edited

Loading

ijjk commented Jun 3, 2020

kettanaito commented Jun 4, 2020 •

edited

Loading

ijjk commented Jun 4, 2020

ijjk commented Jun 4, 2020

ijjk commented Jun 4, 2020

kettanaito commented Jun 4, 2020 •

edited

Loading

ijjk commented Jun 4, 2020

kettanaito commented Jun 5, 2020

ijjk commented Jun 5, 2020

kettanaito commented Jun 5, 2020 •

edited

Loading

kettanaito commented Jun 9, 2020

dpyzo0o commented Jun 28, 2020

kettanaito commented Jun 28, 2020

dpyzo0o commented Jun 28, 2020

thomasmery commented Jul 16, 2020

kettanaito commented Jul 17, 2020

thomasmery commented Jul 17, 2020

kettanaito commented Jul 17, 2020

thomasmery commented Jul 17, 2020

thomasmery commented Jul 17, 2020

lfades commented Jul 22, 2020

kettanaito commented Jul 30, 2020 •

edited

Loading

lfades commented Jul 30, 2020

kettanaito commented Aug 9, 2020 •

edited

Loading

lfades commented Aug 11, 2020

kettanaito commented Aug 11, 2020 •

edited

Loading

ijjk commented Aug 11, 2020

lfades commented Aug 13, 2020 •

edited

Loading

ijjk commented Aug 14, 2020

lfades left a comment

kettanaito commented Aug 14, 2020

Add MSW usage example #13731

Add MSW usage example #13731

Conversation

kettanaito commented Jun 3, 2020 • edited Loading

Summary

Implementation

Client-side

Server-side

Screenshots

Roadmap

ijjk commented Jun 3, 2020

Stats from current PR

kettanaito commented Jun 4, 2020 • edited Loading

ijjk commented Jun 4, 2020

Stats from current PR

ijjk commented Jun 4, 2020

Stats from current PR

ijjk commented Jun 4, 2020

Stats from current PR

kettanaito commented Jun 4, 2020 • edited Loading

ijjk commented Jun 4, 2020

Stats from current PR

kettanaito commented Jun 5, 2020

ijjk commented Jun 5, 2020

Stats from current PR

kettanaito commented Jun 5, 2020 • edited Loading

kettanaito commented Jun 9, 2020

dpyzo0o commented Jun 28, 2020

kettanaito commented Jun 28, 2020

dpyzo0o commented Jun 28, 2020

thomasmery commented Jul 16, 2020

kettanaito commented Jul 17, 2020

thomasmery commented Jul 17, 2020

kettanaito commented Jul 17, 2020

thomasmery commented Jul 17, 2020

thomasmery commented Jul 17, 2020

lfades commented Jul 22, 2020

kettanaito commented Jul 30, 2020 • edited Loading

Server-side updates

Technical reason

lfades commented Jul 30, 2020

kettanaito commented Aug 9, 2020 • edited Loading

lfades commented Aug 11, 2020

kettanaito commented Aug 11, 2020 • edited Loading

ijjk commented Aug 11, 2020

Stats from current PR

lfades commented Aug 13, 2020 • edited Loading

ijjk commented Aug 14, 2020

Stats from current PR

lfades left a comment

Choose a reason for hiding this comment

kettanaito commented Aug 14, 2020

kettanaito commented Jun 3, 2020 •

edited

Loading

kettanaito commented Jun 4, 2020 •

edited

Loading

kettanaito commented Jun 4, 2020 •

edited

Loading

kettanaito commented Jun 5, 2020 •

edited

Loading

kettanaito commented Jul 30, 2020 •

edited

Loading

kettanaito commented Aug 9, 2020 •

edited

Loading

kettanaito commented Aug 11, 2020 •

edited

Loading

lfades commented Aug 13, 2020 •

edited

Loading