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

在 next.js 中，预渲染页面的能力可以极大地提高 seo 和性能。使用 getserversideprops，您可以在请求时获取数据，确保您的页面使用最新数据呈现。

什么时候应该使用 getserversideprops？

• 动态内容：当您需要为每个请求加载动态数据时（例如特定于用户的页面，或经常更改的数据）。
• seo 需求：如果出于 seo 目的需要数据，在服务器端预渲染它比在客户端获取它更好。

示例：使用 getserversideprops 获取数据

<p>// pages/index.tsx</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2127" title="Amazon Nova"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175679969158525.png" alt="Amazon Nova"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2127" title="Amazon Nova">Amazon Nova</a>
                                                                        <p>亚马逊云科技（AWS）推出的一系列生成式AI基础模型</p>
                                                                </div>
                                                                <a href="/ai/2127" title="Amazon Nova" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </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>

主要优点：

1. seo友好：由于数据是在服务器上渲染的，搜索引擎可以抓取完全渲染的html。
2. 最新内容：每次请求页面时都会获取数据，确保内容新鲜。
3. 更好的用户体验：无需加载微调器，因为页面加载时数据可用。

您可以在任何需要动态或用户特定数据的页面中利用此模式！