{"id":18637808,"url":"https://github.com/engineerapart/nextjs-dynamic-split-page-modules","last_synced_at":"2025-10-24T14:03:51.905Z","repository":{"id":44114811,"uuid":"194568943","full_name":"engineerapart/nextjs-dynamic-split-page-modules","owner":"engineerapart","description":"An examplar Next.js project that splits the page bundles dynamically","archived":false,"fork":false,"pushed_at":"2022-12-10T20:56:28.000Z","size":1181,"stargazers_count":0,"open_issues_count":15,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-17T13:52:45.753Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/engineerapart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-30T22:58:26.000Z","updated_at":"2019-07-01T00:15:55.000Z","dependencies_parsed_at":"2022-09-03T13:00:36.891Z","dependency_job_id":null,"html_url":"https://github.com/engineerapart/nextjs-dynamic-split-page-modules","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/engineerapart/nextjs-dynamic-split-page-modules","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engineerapart%2Fnextjs-dynamic-split-page-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engineerapart%2Fnextjs-dynamic-split-page-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engineerapart%2Fnextjs-dynamic-split-page-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engineerapart%2Fnextjs-dynamic-split-page-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/engineerapart","download_url":"https://codeload.github.com/engineerapart/nextjs-dynamic-split-page-modules/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/engineerapart%2Fnextjs-dynamic-split-page-modules/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267306760,"owners_count":24067035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T05:37:55.490Z","updated_at":"2025-10-24T14:03:46.861Z","avatar_url":"https://github.com/engineerapart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nextjs-dynamic-split-page-modules\nAn examplar Next.js project that splits the page bundles dynamically\n\nNext.js automatically codesplits on the page boundaries (that is, each page's JS bundle is \ndynamically imported). However, what if we want to further split the bundles so that each page is 100%\nindependent of the other pages, for example for independent deployments? In such a scenario,\nyou can use an externally managed manifest to handle the URLs that the bundles are deployed to,\nand use dynamic imports as the glue to bring them together in the app.\n\nThe purpose of this project is to demonstrate:\n\n1. Splitting the page bundles deeper than just Next's default page splitting.\n2. How to handle the `getInitialProps` calls, which need to be available BEFORE the bundle downloads\n3. How to handle loading data in `getInitialProps` while simultaneously downloading the page's JS bundle\n\nThe pages already live in separate bundles. This is demonstrating how to FURTHER cut the initial page bundle\nsize by dynamically importing most of the rendering javascript until later, instead importing what is\nminimally necessary to execute `getInitialProps`.\n\nThe consequence of this loading model is:\n1. The initial page view contains the minimal JS bundle required to deliver the page from server\n2. The actual page content bundle gets loaded later\n3. 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 \u0026 evaluated before `getInitialProps` can be called. That is still true, we've simply significantly cut the initial bundle size required to call `getInitialProps`.\n4. Since the page content and `getInitialProps` are downloading at the same time, the page will render faster.\n\n### Custom server\nThis example includes a custom server just to provide an example API call.\n\nIt is not pertinent to the code splitting - the server.js file can be excluded (in which case you would run `next start`)\n\n## Getting started\n``` bash\ngit clone git@github.com:engineerapart/nextjs-dynamic-split-page-modules.git\ncd nextjs-dynamic-split-page-modules\nyarn \u0026\u0026 yarn dev\n```\n\nClick on the `View Item` link. Observe the page's behavior both in the browser's dev tools as well as in the browswer itself.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fengineerapart%2Fnextjs-dynamic-split-page-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fengineerapart%2Fnextjs-dynamic-split-page-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fengineerapart%2Fnextjs-dynamic-split-page-modules/lists"}