首先确保在进行 SSR (服务器端渲染)时,Amplify 提供的 withSSR 方法已正确导入。然后,在页面组件中使用 getServerSideProps 方法获取数据并返回,在其中添加必要的参数以在每次刷新页面时重新请求数据并刷新内容。
示例代码如下所示:
import { withSSR } from 'aws-amplify-react';
function MyComponent({ data }) {
return (
{data.title}
{data.description}
);
}
export default withSSR(MyComponent, async () => {
// 从服务器获取数据
const res = await fetch('https://myapi.com/data');
const data = await res.json();
return {
props: {
data,
},
// 控制页面的缓存方式(可选)
revalidate: 60, // 60秒钟后在请求数据并刷新内容
};
});
以上示例代码中,withSSR 方法将确保页面使用 AWS Amplify 实现 SSR。getServerSideProps 方法配置异步请求数据以及控制页面缓存方式。通过这样的方法,在对页面进行刷新时,可以确保每次请求都会重新获取数据并刷新内容。