优化从 getServerSideProps 调用外部 Api答案

【问题标题】：Optimize calls to exteral Api from getServerSideProps优化从 getServerSideProps 调用外部 Api
【发布时间】：2020-11-11 11:20:13
【问题描述】：

假设我的 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> 时调用一个函数以请求更新它。但我也想要一个正确的路由、历史等等。

你能帮我解决这个问题吗？谢谢！

【问题讨论】：

标签： next.js server-side-rendering

【解决方案1】：

经过更多研究后，我找到了一个解决方案。 next.js <Link> 组件有一个属性shallow，我可以设置它来阻止getServersideProps 的执行。这样我可以在单击链接时手动查询新数据。初始数据查询仍然由服务器上的getServersideProps 完成，我的初始 SSR 工作正常。

// 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 } };
}

【讨论】：