Updated with-shallow-routing to use getServerSideProps

[djanda97]

Related to #11014. Is it worth updating examples that currently use class components to use function components?

[ijjk]

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
buildDuration	12.1s	11.9s	-108ms
nodeModulesSize	47.7 MB	47.7 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
main-HASH.js gzip	6.24 kB	6.24 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..c6c1.js gzip	10.1 kB	10.1 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.2 kB	56.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	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

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
index.html gzip	918 B	918 B	✓
link.html gzip	926 B	926 B	✓
withRouter.html gzip	916 B	916 B	✓
Overall change	2.76 kB	2.76 kB	✓

---

Serverless Mode (Decrease detected ✓)

General

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
buildDuration	12.4s	12.2s	-198ms
nodeModulesSize	47.7 MB	47.7 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
main-HASH.js gzip	6.24 kB	6.24 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
de003c3a9d30..c6c1.js gzip	10.1 kB	10.1 kB	✓
framework.HASH.js gzip	39.1 kB	39.1 kB	✓
Overall change	56.2 kB	56.2 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
main-HASH.module.js gzip	4.78 kB	4.78 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..dule.js gzip	6.71 kB	6.71 kB	✓
framework.HA..dule.js gzip	39.1 kB	39.1 kB	✓
Overall change	51.4 kB	51.4 kB	✓

Legacy Client Bundles (polyfills)

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
polyfills-HASH.js gzip	26.3 kB	26.3 kB	✓
Overall change	26.3 kB	26.3 kB	✓

Client Pages

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
_app.js gzip	1.24 kB	1.24 kB	✓
_error.js gzip	3.15 kB	3.15 kB	✓
hooks.js gzip	664 B	664 B	✓
index.js gzip	222 B	222 B	✓
link.js gzip	2.03 kB	2.03 kB	✓
routerDirect.js gzip	279 B	279 B	✓
withRouter.js gzip	278 B	278 B	✓
Overall change	7.86 kB	7.86 kB	✓

Client Pages Modern

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
_app.module.js gzip	594 B	594 B	✓
_error.module.js gzip	2.08 kB	2.08 kB	✓
hooks.module.js gzip	370 B	370 B	✓
index.module.js gzip	212 B	212 B	✓
link.module.js gzip	1.48 kB	1.48 kB	✓
routerDirect..dule.js gzip	271 B	271 B	✓
withRouter.m..dule.js gzip	270 B	270 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
_buildManifest.js gzip	61 B	61 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	122 B	122 B	✓

Serverless bundles Overall decrease ✓

	zeit/next.js canary	djanda97/next.js ssr-with-shallow-routing	Change
_error.js gzip	232 kB	232 kB	⚠️ +5 B
404.html gzip	1.32 kB	1.32 kB	✓
hooks.html gzip	959 B	959 B	✓
index.js gzip	232 kB	232 kB	-282 B
link.js gzip	242 kB	242 kB	⚠️ +10 B
routerDirect.js gzip	241 kB	240 kB	-228 B
withRouter.js gzip	241 kB	240 kB	-301 B
Overall change	1.19 MB	1.19 MB	-796 B

[lfades]

Yes it's okay to replace class components with functional components 👍

Will review soon once I check the use cases for shallow routing and how can this example be improved

[lfades]

Made some updates, it should be good to go now. Thank you!