NEXTJS：getServerSideProps 不适用于组件

Question

下面是位于“Pages/home.js”的代码。// 本地主机:3000/家

import axios from 'axios';
import Section1 from '../components/home-sections/section-1';

const Homepage = ({ show }) => {
    const Html = JSON.parse(show.response.DesktopHTML);
    const renderSection = () => {
        return Html.map((itemData,index)=>{
            return(<div key={index}>{itemData.DisplayName}</div>)
        })
    }

    return(
        <div>
            { renderSection()}
            <Section1 />
        </div>
    )
}

export const getServerSideProps = async ({ query }) => {
 
  try {
    const response = await axios.get(
      `https://api.example.com/getHomeSection?title=Section 1`
    );
    
    return {
      props: {
        show: response.data,
      },
    };
  } catch (error) {
    return {
      props: {
        error: error.error,
      },
    };
  }
};

export default Homepage;

现在我添加到 section-1.js 中的相同代码，这个文件位于“ components/home-sections/section-1.js”

现在getServerSideProps在 home.js 中工作正常，但在 section-1.js 中它不起作用。

Error: TypeError: show is undefined in section-1.js

Answer 1

对于 Next.js 12 及更低版本：

在版本 12 及更早版本中，getServerSideProps 只能从页面组件导出。它不会在导入页面的组件上运行。但是，您可以通过从返回 props 的组件导出一个函数并从页面的 getServerSideProps 函数调用该函数来解决此问题。

1. 在组件中创建 getServerSideProps 函数：

// @components/MyComponent.tsx
import { GetServerSidePropsContext } from 'next';

function MyComponent(props: IMyComponentProps) {
    return (<div>MyComponent</div>);
}

MyComponent.getServerSideProps = async (context: GetServerSidePropsContext): Promise<{ props: IMyComponentProps }> => {
    return { props: { /* your props here */ } };
}

export default MyComponent;

2. 在您页面的 中getServerSideProps，调用组件的getServerSideProps函数并合并 props：

// pages/mypage.tsx
import MyComponent from '@components/MyComponent';

const Page: NextPageWithLayout = (props: IIndexPageProps) => {
    return <MyComponent />;
}

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<{ props: IIndexPageProps }> {
    let componentServerSideProps = await MyComponent.getServerSideProps(context);
    let otherServerSideProps = { props: { /* your page props here */ } };

    return {
        props: {
            ...componentServerSideProps.props,
            ...otherServerSideProps.props
        }
    };
}

对于 Next.js 13 及更高版本：

随着 Next.js 13 的推出，处理服务器端逻辑的方法发生了变化，尤其是新的 App Router。直接从组件导出的概念getServerSideProps不再适用。相反，您应该在目录中利用新的基于文件的路由系统app来处理服务器端逻辑。

1. 将页面和组件迁移到新的app目录结构。服务器端逻辑可以使用加载器或操作直接在页面文件中处理。

2. 使用加载器在目录中获取服务器端数据app：

例如，如果您以前getServerSideProps在组件中使用过，请考虑在app目录内相应的页面文件中使用加载器。

// app/mypage.tsx
import { loader } from 'next/app';

export const loader = async ({ params, request }) => {
    // Perform server-side operations
    const data = await fetchData();
    return data;
};

export default function Page({ data }) {
    return <MyComponent data={data} />;
}

这种方法与 Next.js 13 中引入的新约定和功能保持一致，重点关注app用于组织应用程序结构和逻辑的目录。

请记住，过渡到 Next.js 13 的新路由和数据获取范例是与以前版本相比的重大转变。建议查看官方 Next.js 文档，以获取有关有效迁移和利用新功能的详细指南。

Answer 2

您不能getServerSideProps在非页面组件中使用。您可以将道具从Hometo传递HomeSection或创建上下文，以便可以从组件树全局获得该值

getServerSideProps 只能从页面导出。您不能从非页面文件中导出它。

https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2

Answer 3

getServerSideProps 在组件中不起作用，它只需要在页面上实现，如果您使用的是 next.js-13 应用程序目录，它也不会在那里工作，您需要使用页面目录

在app目录中，您只需use client在第一行写入客户端组件，并将其保留为空以用于服务器组件