如何在服务器上记录一些字符串并使用 Next.js 将其作为道具返回给组件？

Question

我为一个愚蠢的问题道歉，但我是 Next.js 的新手，我的任务是“将"Hello from SSR"字符串添加到服务器日志并将其返回给MyWonderfulComponent ”，关于如何执行此操作的任何想法?

这是代码示例

export default function Page(props) {
    return <MyWonderfulComponent props={props}>I'm text from a component</MyWonderfulComponent>
}

function MyWonderfulComponent({ id, options, children, other }) {

    const [summ, setSumm] = useState(other);

    useEffect(() => {
        if (id && options) {
            setSumm(summ + 1);
        }
    }, [id, options]);

    console.log(summ);

    return (
        <React.Fragment>
            <h1>Hello World!</h1>
            <Grid>
                <Grid xs={12}>{children}</Grid>
            </Grid>
        </React.Fragment>
    );
}

Answer 1

我建议在getStaticProps中创建“Hello from SSR”字符串，这是您可以在组件上设置的函数之一，它将在服务器端调用。

来自Next.js 关于数据获取的文档：

我们将讨论可用于获取数据以进行预渲染的三个独特的 Next.js 函数：

• getStaticProps （静态生成）：在构建时获取数据。
• getStaticPaths （静态生成）：指定动态路由以根据数据进行预渲染。
• getServerSideProps （服务器端渲染）：获取每个请求的数据。 此外，我们将简要讨论如何在客户端获取数据。

未经测试，但你尝试过这样的事情吗？

export async function getStaticProps (context) {
  const str = 'Hello from SSR'
  console.log(str) // log on the server-side
  return {
    props: { str } // will be passed to the page component as props
  }
}