在 Next.js 应用程序的页面上动态加载组件答案

【问题标题】：Dynamically load components on a page in Next.js app在 Next.js 应用程序的页面上动态加载组件
【发布时间】：2022-07-23 15:23:04
【问题描述】：

我有一个 Next.js 服务器端渲染应用程序，我需要在其中动态加载组件。

例如 Homepage，我在 getServerSideProps 中调用 API 来获取主页数据，其中包含有关页面的一些基本信息以及所有组件的名称和每个组件的数据。从这里我需要在页面正文中动态呈现这些组件。并且这些动态组件需要在服务器上进行渲染以进行 SEO。

这是我的简化代码

import Head from 'next/head';
import Header from '../components/Header';
import Banner from '../components/Banner';

import { getDomainFromContext, getParamFromContext } from '../src/utils';
import { fetchPage } from '../src/fetchers';

export async function getServerSideProps(context) {
    const domain = getDomainFromContext(context);
    const locale = getParamFromContext(context, 'locale');
    const uri = '/';

    const page = await fetchPage(domain, uri, locale);

    /*
        page now has names of the components with data for each component. e.g
        {
            ...
            components : {
                {
                    "name" : "Venues",
                    "data" : "..."
                },
                {
                    "name" : "Info",
                    "data" : "..."
                }
            }
            ...
        }
     */


    return {
        props: {
            domain: domain,
            locale: locale,
            page: page
        },
    };
}

function Home(props) {
    
    return (
        <>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <Header>
                <h1>Homepage</h1>
            </Header>

            <main>
                <Banner />
                {/*Load Dynamic components here & it should be server side rendered.*/}
            </main>
        </>
    );
}

export default Home;

【问题讨论】：

nextjs.org/docs/advanced-features/dynamic-import...I 猜你在说这个
谢谢@kazmi066。我认为这会奏效。我忽略了最初认为它仅用于客户端上的延迟加载组件。但我认为它也适用于 SSR。将很快发布完整的代码 sn-p 以及使用动态导入的解决方案。

标签： javascript reactjs next.js

【解决方案1】：

所以我的解决方案基于这个问题的答案：Dynamic Importing of an unknown component - NextJs

我创建了一个接受要加载的组件名称的函数，一旦我从 API 中获得了组件名称，我就会循环访问组件名称以将它们加载并保存在一个数组中，并将数据也保存在一个数组中。后面的组件是从数组中渲染出来的。

import Head from 'next/head';
import Header from '../components/Header';
import { getDomainFromContext, getParamFromContext } from '../src/utils';
import { fetchPage } from '../src/fetchers';
import { Suspense } from 'react';


export function getDynamicComponent(c) {
    return dynamic(() => import(`../components/${c}`), {
        suspense: true,
    });
}

export async function getServerSideProps(context) {
    let domain = getDomainFromContext(context);
    let locale = getParamFromContext(context, 'locale');
    let pageUri = '/'


    const page = await fetchPage(companyId, pageUri);

    return {
        props: {
            domain: domain,
            locale: locale,
            page: page,
        },
    };
}

function Home(props) {
    
    let components = [];
    let componentsData = [];

    props.page.components.forEach((component, i) => {
        components.push(getDynamicComponent(component.name));
        componentsData.push(component.data);
    });

    return (
        <>
            <Head>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <Header>
                <h1>Homepage</h1>
            </Header>

            <main>
                <Suspense fallback={`...`}>
                    {components.map((Component, k) => (
                        <Component key={k} data={componentsData.data[k]} />
                    ))}
                </Suspense>
            </main>
        </>
    );
}

export default Home;

【讨论】：