Nextjs：使用 getServerSideProps 预取数据以实现 SEO 优势

<p>// pages/index.tsx</p>

<p>import { GetServerSideProps } from 'next';</p>

<p>type HomeProps = {<br>
  data: string;<br>
};</p>

<p>export default function Home({ data }: HomeProps) {<br>
  return (<br></p><div>
<br><h1>Server-side Rendered Page</h1>
<br><p>{data}</p>
<br>
</div><br>
  );<br>
}

<p>// This function runs on every request<br>
export const getServerSideProps: GetServerSideProps = async (context) =&gt; {<br>
  // Example: Fetch data from an external API or database<br>
  const response = await fetch('https://api.example.com/data');<br>
  const result = await response.json();</p>

<p>// Pass data to the page component via props<br>
  return {<br>
    props: {<br>
      data: result.message, // Assume the API returns { message: "Hello World" }<br>
    },<br>
  };<br>
};</p>