Enrutamiento e importación de páginas

Importar páginas federadas en Next.js obliga a trabajar dentro de las limitaciones de cómo hace build Next.

Importar páginas remotas

Next depende del análisis estático para determinar cómo hacer build o renderizar una página.

Como Module Federation funciona en runtime, Next no puede ver en tiempo de build qué exports contiene una página remota.

Esto te obliga a reexportar dentro del host la API de página y el ciclo de vida de datos de la página del remote.

App remote de ejemplo

remote/pages/index.js

remote/pages/other.js

remote/pages/_app.js

import React from 'react';
import Head from 'next/head';

const Shop = (props) => {
  return (
    <div>
      <Head>
        <title>Shop</title>
      </Head>
      <pre>{JSON.stringify(props)}</pre>
    </div>
  );
};
Shop.getInitialProps = async () => {
  const fallback = {
    name: 'Luke Skywalker',
    height: '172',
    mass: '77',
    hair_color: 'blond'
  };
  return Promise.resolve(fallback);
};

export default Shop;

export const getServerSideProps = async () => {
  // Fetch data from external API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Pass data to the page via props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

import App  from 'next/app'

export default function MyApp({
  Component,
  pageProps,
  example,
}) {
  return (
    <>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx }
}

App host de ejemplo

host/pages/index.js

host/pages/other.js

host/pages/_app.js

import Shop from 'remote/pages/index';
const Page = Shop;
Page.getInitialProps = Shop.getInitialProps;
export default Page;

import App  from 'next/app'

export default function MyApp({
  Component,
  pageProps,
  example,
}) {
  return (
    <>
      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (context) => {
  const ctx = await App.getInitialProps(context)

  return { ...ctx }
}

#Enrutamiento e importación de páginas

#Importar páginas remotas

#App remote de ejemplo

#App host de ejemplo

Enrutamiento e importación de páginas

Importar páginas remotas

App remote de ejemplo

App host de ejemplo