优化getServerSideProps对外部Api的调用

Question

假设我的next.js react应用程序中有以下页面：

// Filename: [mypath].jsx

export default function MyPage(props) {
    return (
        <>
            <Link href="/siteX">
                <a>Go to siteX</a>
            </Link>

            <Link href="/siteY">
                <a>Go to siteY</a>
            </Link>

            <div>{props.data.text}</div>
        </>
    );
}

export async function getServerSideProps(context) {
    const mypath = context.params.mypath;

    const res = await fetch(`https://external-api/${mypath}`)
    const data = await res.json();

    return { props: { data } };
}

当我在服务器端访问http://localhost:3000/siteX/时，来自url的字符串siteX用于调用外部(!)api在不同的系统上，例如https://external-api/siteX。到目前为止，这还不错，但我看到了以下性能问题：

在浏览器中，当我单击一个<Link>时，会发生两个请求:一个是我自己的服务器更新getServerSideProps的新路径，另一个是从我的服务器到https://external-api/..的请求。来获取新的数据。

你找到优化这个的方法了吗？我想要的是：

• 当单击<Link>时，只有一个直接向https://external-api/..发出的请求。发生并直接更新data (例如，作为MyPage的状态)。现在的
• ，当访问http://localhost:3000/siteX/时，服务器应该获取数据并预先录制站点

。

当然，我可以将data视为<MyPage>的状态，只需调用一个函数，在单击<Link>时使用请求更新它。但我也想要一个正确的路线，历史等等。

你能帮我吗？谢谢!

Answer 1

在更多的研究之后，我找到了一个解决方案。next.js <Link>组件具有一个属性shallow，可以将其设置为阻止getServersideProps的执行。这样，当单击链接时，我可以手动查询新数据。不过，最初的数据查询仍然是由getServersideProps在服务器上完成的，我的基础数据查询仍然像以前一样工作。

// Filename: [mypath].jsx

export default function MyPage(props) {
    const [data, setData] = useState(props.data);

    function updateData(path) {
        const res = await fetch(`https://external-api/${path}`)
        const data = await res.json();
        setData(data);
    }

    return (
        <>
            <!-- Manually query and set data -->
            <div onClick={() => updateData("siteX")}>

                <!-- Trigger routing, but don't execute getServerSideProps (because of shallow={true}) -->
                <Link href="/siteX" shallow={true}>
                    <a>Go to siteX</a>
                </Link>

            </div>

            <div onClick={() => updateData("siteY")}>
                <Link href="/siteY" shallow={true}>
                    <a>Go to siteY</a>
                </Link>
            </div>

            <div>{props.data.text}</div>
        </>
    );
}

// If page is requested directly via url (and not because a <Link> element has been clicked) do SSR as before
export async function getServerSideProps(context) {
    const mypath = context.params.mypath;

    const res = await fetch(`https://external-api/${mypath}`)
    const data = await res.json();

    return { props: { data } };
}