面试题：Next.js中getServerSideProps数据获取方法的基本使用场景

适合使用 getServerSideProps 的场景

SEO 需求：当页面内容需要被搜索引擎爬虫有效抓取时，因为 getServerSideProps 在服务器端运行，能确保页面在渲染时就包含实际数据，有利于 SEO。例如博客文章页面，搜索引擎需要获取文章标题、正文等内容进行索引。
个性化内容：根据用户请求的动态数据来渲染页面，比如用户特定的个人资料页面，不同用户访问看到不同内容。根据用户认证信息，在服务器端获取特定用户的数据来渲染页面。
实时数据：数据更新频繁且需要每次请求时都获取最新数据，如股票价格展示页面，每次用户访问都要获取最新股价。

示例

创建 Next.js 项目：

npx create-next-app my - app
cd my - app

在 pages 目录下创建一个页面，比如 data - fetch - page.js：

import React from'react';

const DataFetchPage = ({ data }) => {
    return (
        <div>
            <h1>Data from API</h1>
            <p>{data.message}</p>
        </div>
    );
};

export async function getServerSideProps() {
    const res = await fetch('https://example.com/api/data');
    const data = await res.json();

    return {
        props: {
            data
        }
    };
}

export default DataFetchPage;

在上述示例中，getServerSideProps 函数在服务器端运行，通过 fetch 从指定 API 获取数据，然后将数据作为 props 传递给 DataFetchPage 组件进行渲染。这里假设 API 返回的数据结构中有 message 字段用于展示。

星途面试题库

面试题：Next.js中getServerSideProps数据获取方法的基本使用场景

知识考点

面试题答案

适合使用 getServerSideProps 的场景

示例