我正在 pages/post/index.js 中使用 getServerSideProps :
import React from "react";
import Layout from "../../components/Layout";
function Post({ post }) {
console.log("in render", post);
return (
<Layout title={post.name}>
<pre>{JSON.stringify(post, undefined, 2)}</pre>
</Layout>
);
}
export async function getServerSideProps({ query }) {
return fetch(
`${process.env.API_URL}/api/post?id=${query.id}`
)
.then(result => result.json())
.then(post => ({ props: { post } }));
}
export default Post;
当我直接加载 /post/2
时,它会按预期工作,但是当我通过单击从 /posts
转到 /post/2
时在链接上:
<Link
as={`/post/${post.id}`}
href={`/post?id=${post.id}`}
>
看起来 2 秒内没有任何反应 ( the api delay ),然后内容显示出来。我可以在网络选项卡中看到 _next/data/development/post/9.json
正在由 fetchNextData 加载.
当我使用 next/Link
从一条路线移动到另一条路线时,我想显示一个加载微调器,但我在 getServerSideProps 上找不到任何允许我执行此操作的文档。
当我直接转到 /post/:id
时,我希望在服务器端获取数据并获得完全渲染的页面(有效),但是当我然后移动到另一条路由时,数据应该从客户端获取(有效)。然而;我希望有一个加载指示器,并且在数据请求期间不让 UI 卡住。
最佳答案
这是一个example使用钩子(Hook)。
pages/_app.js
import Router from "next/router";
export default function App({ Component, pageProps }) {
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
const start = () => {
console.log("start");
setLoading(true);
};
const end = () => {
console.log("finished");
setLoading(false);
};
Router.events.on("routeChangeStart", start);
Router.events.on("routeChangeComplete", end);
Router.events.on("routeChangeError", end);
return () => {
Router.events.off("routeChangeStart", start);
Router.events.off("routeChangeComplete", end);
Router.events.off("routeChangeError", end);
};
}, []);
return (
<>
{loading ? (
<h1>Loading...</h1>
) : (
<Component {...pageProps} />
)}
</>
);
}
关于javascript - Next.js getServerSideProps 显示加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60755316/