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

<p>// pages/index.tsx</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1101">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c6af75d71275.png" alt="腾讯智影-AI数字人">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1101">腾讯智影-AI数字人</a>
                            <p>基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="腾讯智影-AI数字人">
                                <span>73</span>
                            </div>
                        </div>
                        <a href="/ai/1101" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="腾讯智影-AI数字人">
                        </a>
                    </div>
                

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

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

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

<p>// This function runs on every request<br>
export const getServerSideProps: GetServerSideProps = async (context) => {<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>