最新文章

目录

使用同步数据获取来加速我的图库页面
2024-01-10前端6 分钟读完 (大约840个字, 4张图片)0次访问

使用同步数据获取来加速我的图库页面

我的博客目录中有一个 图库。使用 vite + react 样板构建。

为什么

在此之前，这个的工作方式如下：

这是一个 SPA，因此运行时文件需要先加载并启动。当页面文档被下载并解析时，浏览器开始加载 <link> 文件，然后下载并执行所需的 JavaScript 文件。

我有这样的数据获取逻辑：

index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const [list, setList] = useState([]);
const [loaded, setLoaded] = useState(false);

const getData = async () => {
  const response = await (
    await fetch("https://api.lynan.cn/gallery-list")
  ).json();
  const data = response.data.list;
  setList(data);
  setLoaded(true);
};

useEffect(() => {
  getData();
}, []);

此过程可能会花费很长时间（因为 CMS 服务可使用的资源非常有限）。

此外，我希望进行最少的调整以使其更快。

怎么做

为了解决这个问题并提高图库页面的性能，我做了以下调整：

  1. 生成一个静态 JSON 数据文件来存储照片数据。每当发生 CRUD 操作时，都会创建或更新此文件。
src/api/photo/content-types/photo/lifecycles.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const generateJSON = async () => {
  try {
    const list = await strapi.db.query("api::photo.photo").findMany({
      orderBy: { id: "desc" },
    });
    fs.writeFileSync(
      "./public/photos.js",
      `var photos = ${JSON.stringify(list)}`
    );
  } catch (error) {}
};

module.exports = {
  afterUpdate(event) {
    generateJSON();
  },
  afterCreate(event) {
    generateJSON();
  },
};
  1. 使用 HTML 头中的 <script> 标签加载 JSON 文件，使得数据可以作为 window 对象上的全局变量轻松访问。
index.html
1
2
3
4
<head>
  ...
  <script src="https://nextcms.lynan.cn/public/photos.js"></script>
</head>

3.更新了React组件中的数据获取逻辑，直接使用引用的JSON数据。

index.jsx
1
const [list, setList] = useState(window.photos || []);

通过实施这些调整，不再需要 getData 函数和 useEffect 钩子，从而显著提高了页面加载速度。此外，图库页面现在仍可由静态文件服务器（如 NGINX）托管，而无需额外的运行时环境（如 Node.js）。

为什么不

使用 JSON-P

JSONP，即 JSON-P（带填充的 JSON），是一种历史悠久的 JavaScript 技术，通过加载 <script> 元素来请求数据，该元素用于加载普通 JavaScript。

要使用 JSON-P，我们需要将数据包装到回调函数中，并在加载数据文件之前声明回调函数。

index.html
1
2
3
4
5
6
<script>
  function fetchDataCallback(data) {
    console.log(data);
  }
</script>
<script src="https://api.lynan.cn/test-jsonp.js"></script>
testjsonp.js
1
2
3
4
5
6
fetchDataCallback([
  {
    id: 182,
    title: null,
  },
]);

在这种情况下，它并不比将数据放入全局变量更好。

使用 SSR

按照 next.js 的指南，我们仍然需要一个 Node.js 环境来运行 next.js 服务。

使用 SSG

我们还可以使用 next.js 进行 SSG（静态站点生成）。使用 getStaticProps 将数据插入页面模板。

我们需要在数据更新时重建静态文件。

使用 SSR 或 SSG 都需要对画廊项目进行一些额外的修改，因此它们不是我的首选。但在不同情况下，SSR/SSG 可能是一个不错的选择。

更多

潜在的危险

值得注意的是，使用全局变量存储数据的方法可能会暴露数据文件并可能导致安全风险。

结论

对图库页面进行的优化调整显著提高了其性能，虽然替代方法对我来说似乎不太好，但当前的解决方案效果很好。

使用同步数据获取来加速我的图库页面

https://cn.thelynan.com/synchronous-data-fetching-practice/

作者

Lynan

发布于

2024-01-10

许可协议

#

评论

×