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

Question

I apologize for a silly question, but I'm a newbie in Next.js, and I was given a task to "Add "Hello from SSR" string to a server log and give it back to MyWonderfulComponent ", any ideas on how to do this?

This is the code example

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

I suggest creating the "Hello from SSR" string in getStaticProps , one of the functions you can set on your components which will be called on the server-side.

From the Next.js docs on data-fetching :

We'll talk about the three unique Next.js functions you can use to fetch data for pre-rendering:

• getStaticProps (Static Generation): Fetch data at build time.
• getStaticPaths (Static Generation): Specify dynamic routes to pre-render based on data.
• getServerSideProps (Server-side Rendering): Fetch data on each request. In addition, we'll talk briefly about how to fetch data on the client side.

Untested, but did you try something like this?

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
  }
}