from Hacker News

Module Federation with Next.js in a React Shell: Handling Full Page Reloads

by bqc on 7/24/24, 5:36 PM with 1 comments

We are tackling an interesting problem involving module federation. Our setup involves embedding a Next.js application within a React shell. However, we’re encountering a significant issue: when using next/link inside the Next.js app, it triggers a full page reload of the entire application rather than a seamless client-side navigation.

Here’s what we’ve tried so far:

• Customizing the <Link> component to prevent reloads • Leveraging next/router for navigation within the Next.js app

Despite these efforts, we haven’t managed to resolve the issue. We’re considering developing a custom solution to address this, but we’d greatly appreciate any suggestions or insights from the community.

We are specifically interested in:

1. Approaches to prevent full page reloads while using next/link in a module federation setup. 2. Workarounds or alternative strategies to integrate Next.js within a React shell without reloading the entire application. 3. Best practices and known issues related to module federation with Next.js and React.

Any guidance or experiences you can share would be extremely valuable. Thanks for your help!

  • by ancras on 7/30/24, 7:34 AM

    This is a tricky issue! Here's my take on your Module Federation/Next.js reload problem and some potential solutions:

    The Root Cause: Next.js's next/link component is tightly coupled to its internal routing system, which expects to control the entire page. In a microfrontend architecture with Module Federation, you're essentially trying to run two routers (Next.js and your shell) simultaneously, leading to conflicts.

    Possible Solutions: Client-Side Routing Alignment (Ideal): Shared Routing Library: If possible, strive for a unified routing solution between your React shell and Next.js microfrontend. Consider libraries like react-router that both can integrate with. This might require restructuring, but offers the cleanest long-term solution.

    Custom Event Bus: If a shared router isn't feasible, create a lightweight event bus. When next/link triggers navigation within the Next.js app, emit an event. The shell can listen for this event and use its own routing mechanism to update the URL, preventing a full reload.

    Next.js Configuration Tweaks: assetPrefix: If your Next.js app is hosted on a subpath, ensure the assetPrefix in your next.config.js is set correctly to avoid asset loading issues. basePath (Next.js 13+): Similar to assetPrefix, but for routing. This can help isolate the Next.js portion of your URL structure.

    Strategic Link Handling: Conditional Rendering: For links within the Next.js microfrontend, continue using next/link. For links pointing outside to other microfrontends or the shell, use the shell's routing mechanism.

    Also check Module Federation Version Compatibility: Ensure your versions of Next.js, React, and the Module Federation plugin are compatible.