https://github.com/engineerapart/nextjs-dynamic-split-page-modules
An examplar Next.js project that splits the page bundles dynamically
https://github.com/engineerapart/nextjs-dynamic-split-page-modules
Last synced: 8 months ago
JSON representation
An examplar Next.js project that splits the page bundles dynamically
- Host: GitHub
- URL: https://github.com/engineerapart/nextjs-dynamic-split-page-modules
- Owner: engineerapart
- License: mit
- Created: 2019-06-30T22:58:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:56:28.000Z (over 3 years ago)
- Last Synced: 2025-05-17T13:52:45.753Z (about 1 year ago)
- Language: JavaScript
- Size: 1.13 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nextjs-dynamic-split-page-modules
An examplar Next.js project that splits the page bundles dynamically
Next.js automatically codesplits on the page boundaries (that is, each page's JS bundle is
dynamically imported). However, what if we want to further split the bundles so that each page is 100%
independent of the other pages, for example for independent deployments? In such a scenario,
you can use an externally managed manifest to handle the URLs that the bundles are deployed to,
and use dynamic imports as the glue to bring them together in the app.
The purpose of this project is to demonstrate:
1. Splitting the page bundles deeper than just Next's default page splitting.
2. How to handle the `getInitialProps` calls, which need to be available BEFORE the bundle downloads
3. How to handle loading data in `getInitialProps` while simultaneously downloading the page's JS bundle
The pages already live in separate bundles. This is demonstrating how to FURTHER cut the initial page bundle
size by dynamically importing most of the rendering javascript until later, instead importing what is
minimally necessary to execute `getInitialProps`.
The consequence of this loading model is:
1. The initial page view contains the minimal JS bundle required to deliver the page from server
2. The actual page content bundle gets loaded later
3. During SPA navigation, the page content bundle is being downloaded **AT THE SAME TIME** as the `getInitialProps` API requests. The result of this is that the page renders faster: In a stock Next.js app, the entire bundle has to be downloaded & evaluated before `getInitialProps` can be called. That is still true, we've simply significantly cut the initial bundle size required to call `getInitialProps`.
4. Since the page content and `getInitialProps` are downloading at the same time, the page will render faster.
### Custom server
This example includes a custom server just to provide an example API call.
It is not pertinent to the code splitting - the server.js file can be excluded (in which case you would run `next start`)
## Getting started
``` bash
git clone git@github.com:engineerapart/nextjs-dynamic-split-page-modules.git
cd nextjs-dynamic-split-page-modules
yarn && yarn dev
```
Click on the `View Item` link. Observe the page's behavior both in the browser's dev tools as well as in the browswer itself.