Does single-spa support nextjs?
xmkan opened this issue · comments
Just wish to know if single-spa support nextjs and is there any sample codes for integration with nextjs?
Not yet. I've been working on improving the server rendering story for single-spa, but right now it's not great. You can check out https://github.com/namecheap/ilc to see a community maintained set of projects that help with server rendered react microfrontends that use single-spa, but they don't use nextjs.
oh okok, thank you very much!
Is this still the status for next.js support?
Single-spa server rendering has improved some since my last post - see https://single-spa.js.org/docs/ssr-overview for the recommendations.
NextJS isn't officially supported yet, unfortunately, since NextJS doesn't allow you to control where it mounts itself to the DOM. There are a couple of other challenges with NextJS and microfrontends, as well, that will need to be ironed out. I would like to work on improving support for NextJS, but do not have a timeline for when I'll get to it.
In your https://github.com/isomorphic-microfrontends/trainers project, I see its based on nextjs. Does this mean single spa can load SSR rendered MF from nextjs?
Data Camp has sponsored me to support NextJS with single-spa, so I've been working on it in the last couple of weeks.
Hi @joeldenning, Any luck on your work to support NextJS?
Yes I've made some progress, but it's not finished yet. I'll share here when I have updates. I don't have a specific timeline for it.
Hi @joeldenning, Did you get a chance to make it to support NextJS? I have the same requirement. I am trying out https://github.com/isomorphic-microfrontends/trainers. But, I am getting errors.
Here is what I am getting when I try to register Next JS application in Single SPA.
vendor.js:43 Uncaught ReferenceError: application 'sample-next' died in status LOADING_SOURCE_CODE: __dirname is not defined
at index.js:formatted:1
at Object.../../../node_modules/next/dist/compiled/web-vitals/web-vitals.es5.umd.min.js (index.js:formatted:1)
at webpack_require (bootstrap:84)
at Object.../../../node_modules/next/dist/client/performance-relayer.js (index.js:formatted:1)
at webpack_require (bootstrap:84)
at Object.../../../node_modules/next/dist/client/index.js (index.js:formatted:1)
at webpack_require (bootstrap:84)
at Module.../../sample-next/single-spa/single-spa-next.js (index.js:formatted:1)
at webpack_require (bootstrap:84)
at Module.../../sample-next/single-spa/main.js (index.js:formatted:1)
NextJS support is closer, but not finalized. Here’s an update I shared with Data Camp:
The main update is that I have NextJS properly mounting in the browser both when it’s part of the server-rendered content and when it is only mounted due to client side navigation (without having been part of the initial server rendered content.)
Along with that, I am now properly communicating the metadata from NextJS ( <script> etc) between the NextJS server and the root config / orchestrator server. Previously I was embedding the full NextJS document within the existing document for the other microfrontends. Now it’s only embedding bits and pieces of NextJS’ overall document, as needed, rather than the whole thing.
I’ve only worked 8 hours on it, still, unfortunately - the past two months have been perhaps the busiest of my entire career and I bit off a bit more than I could chew. However, things have been calming down more and I will work some more on it this week and in the coming weeks. The good news is that I’ve made some good progress with the little time that I’ve been able to dedicate to it. Much of what I’ve done so far needs polish before it could be used in a production system, but much of the functionality is there
❔= haven’t investigated it yet
:deep_work: = currently investigating
🏗️ = Started implementation, but not yet working
🏠 = It’s working! Further polish maybe needed, but it’s mostly there.
:done: = completely finished, polished. Highest level of doneness
:nextjs: = Pull Request to NextJS required
😔 = not finished investigating, but looking difficult
😵 = highest level of concern - I am stuck and don’t know how to proceed.
:done: Share dependencies in-browser (react, react-dom, etc) for perf boost and cross microfrontend import support of React components.
:done: Load NextJS webpack bundle as a SystemJS module in the browser
:done: Verify client-rendered MFEs can blend well with server-rendered NextJS MFEs.
🏠 Have root config server make outbound request to nextjs server. Embed HTML into the correct slot in the DOM.
🏠 Create single-spa-main.js file in NextJS MFE, which serves as the public interface for SystemJS.
:nextjs: Allow fully qualified basePath in next.config.js, so browser assets come from correct URL. I think I’ll try to put together a pull request to Next for this. I am currently working around this (partially) via root config server redirects whenever it sees _next in the request, but only with exactly one NextJS MFE (not more). See https://nextjs.org/docs/api-reference/next.config.js/basepath
🏠 Change SSR hydration to originate from single-spa-main.js rather than node_modules/next/dist/client/index.js.
🏠 Have NextJS communicate its required and <script> tags in a different way than just embedding in HTML. See https://single-spa.js.org/docs/layout-definition#assets for starting point, but there’s more to this - probably pass them via HTTP response headers.
❔ Verify client-side navigation between NextJS pages works properly.
🏠 Verify NextJS app can be fully unmounted client-side (when other MFEs take over for other routes).
🏠 Verify remount works.
🏠 verify NextJS app can mount on page where it’s only client rendered - was not part of initial SSR
❔ Production builds
❔ CI/CD for deployments
❔ NextJS head manager is not encapsulated and interfering with other microfrontends.
Thanks for sharing @joeldenning
Will there be support for static builds via next export as well?
In the initial support, I've been focused on incorporating dynamic NextJS servers, not on static builds.
HI @joeldenning do you have the latest status on this request?
I haven't worked on it in a while.
Hi @joeldenning,
would you accept collaborations in order to deliver next.js support faster?
Explaining the code to new collaborators would probably take more effort and time than just doing it myself. In the past when I've worked on difficult projects like this with new contributors they end up asking for a lot of my time to help them and then getting disappointed when I do not have that time to give.
A main reason that I haven't worked much on NextJS support is that I don't think the approach I've taken will be very stable or performant, nor do I have much experience with NextJS. The truth is that NextJS isn't very well suited for microfrontends since it has several very hard assumptions built into it that have made things pretty difficult. For example, it is hard coded to mount to <div id="__next"> and that cannot be configured for multiple microfrontends sharing the page. Additionally, it does not allow for fully qualified urls as the base path for loading frontend assets, which is problematic if you want NextJS to be one of many microfrontends.
I'm the kind of person who gets stressed by dozens / hundreds of people wanting me to work on something. And that stress increases when the project I'm working on isn't one with a good solution and the work I produce will likely only result in their disappointment since it will have lots of limitations and problems. I think that stress I feel is the main reason i've paused working on NextJS support. I may continue it at some point.
If someone would like to try to help out with it, you can try cloning the repos I shared above. However, I am not available to mentor anyone on it and will not help you diagnose or fix things or get them running. I would be open to reviewing pull requests
I understand your frustration @joeldenning, I didn't meant to push you.
We're currently adopting single-spa for a big project and we're evaluating next.js caching capabilities, that's why I would have been happy to give you an helping-hand . We'll try to clone the repo to figure out how to solve some of the known issues.
Hi @joeldenning what is the status on support for nextjs in single-spa, did you find time to complete this story ?
No I haven't worked on NextJS support since my last comment.
Any update ?
Any update?
Cough
i'd like to know if this is going to happen, of it anyone knows another microfrontend framework that is compatible with both nextjs and vuejs ❓ 😄
@sebolio have you tried module federation?
Looking for the same
Hello, is this a reality today? Anyone?
Hi, Next.js is currently not supported.
@joeldenning hi, any update for nextjs support ?
Next.js is still not supported.