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

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

<p>import { GetServerSideProps } from 'next';</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11148">
                            <img src="https://img.php.cn/upload/webcode/000/000/004/176511600273314.png" alt="WeWedding婚纱影楼小程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11148">WeWedding婚纱影楼小程序</a>
                            <p>婚纱影楼小程序提供了一个连接用户与影楼的平台，相当于影楼在微信的官网。它能帮助影楼展示拍摄实力，记录访客数据，宣传优惠活动。使用频率高，方便传播，是影楼在微信端宣传营销的得力助手。功能特点：样片页是影楼展示优秀摄影样片提供给用户欣赏并且吸引客户的。套系页是影楼根据市场需求推出的不同套餐，用户可以按照自己的喜好预定套系。个人中心可以查看用户预约的拍摄计划，也可以获取到影楼的联系方式。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="WeWedding婚纱影楼小程序">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11148" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="WeWedding婚纱影楼小程序">
                        </a>
                    </div>
                

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