前言
Next.js 是一个 React.js 应用程序框架，它能让你使用 React 进行服务端渲染和代码分割，从而优化页面加载性能和用户体验。在 Next.js 中，数据预取和缓存是提高性能和效率的重要手段，本文将详细介绍 Next.js 中的数据预取和缓存技巧，并提供相应的示例代码。
数据预取
在 Next.js 中，可以通过 getServerSideProps 或 getStaticProps 函数来进行数据预取，这两个函数可以直接返回的是包含数据的 JavaScript 对象，也可以是一个 Promise，其中 resolve 的值是包含数据的 JavaScript 对象。这样，你就可以在组件渲染之前得到数据，从而避免不必要的等待。
getServerSideProps
getServerSideProps 用于在服务器端进行数据预取，它在每个请求时被调用，可以返回一个包含数据的 JavaScript 对象，这些数据可以在组件内部使用。使用此函数时，你可以执行服务器端渲染，并确保在渲染 HTML 之前获取到数据。例如，下面的示例代码会获取页面的标题和内容，这些数据可以在组件内部使用：
export async function getServerSideProps({ params }) {
const page = await fetchPage(params.id);
return {
props: {
pageTitle: page.title,
pageContent: page.content
}
};
}
function Page({ pageTitle, pageContent }) {
return (
<div>
<h1>{pageTitle}</h1>
<div>{pageContent}</div>
</div>
);
}
export default Page;getStaticProps
getStaticProps 用于在构建时进行数据预取，它会在构建时执行一次，并将构建结果缓存到磁盘上，这样可以大幅减少请求响应时间，提高整个应用程序的性能。使用此函数时，你可以轻松地预取静态数据，并将其作为 props 传递给组件。例如，下面的示例代码会从数据库中获取页面的标题和内容，这些数据可以在组件内部使用：
export async function getStaticProps({ params }) {
const page = await fetchPage(params.id);
return {
props: {
pageTitle: page.title,
pageContent: page.content
}
};
}
function Page({ pageTitle, pageContent }) {
return (
<div>
<h1>{pageTitle}</h1>
<div>{pageContent}</div>
</div>
);
}
export default Page;数据缓存
在 Next.js 中，也可以通过数据缓存来提高应用程序性能。下面介绍几种常用的数据缓存技术。
Cache-Control
在 HTTP 响应头中设置 Cache-Control 可以控制缓存策略，当我们设置 Cache-Control: max-age=3600 时，意味着浏览器可以在 3600 秒内重用这个资源。
Cache-Control: max-age=3600
在 Next.js 中，我们可以使用 HTTP Headers Middleware 来设置 Cache-Control，例如下面的示例代码：
const express = require("express");
const next = require("next");
const port = process.env.PORT || 3000;
const isDev = process.env.NODE_ENV !== "production";
const app = next({ dev: isDev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.use((req, res, next) => {
res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
next();
});
server.all("*", (req, res) => {
return handle(req, res);
});
server.listen(port, (err) => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});上述代码会在浏览器中设置 Cache-Control: public, max-age=31536000, immutable，意味着资源在 1 年内不会被变更或重载。
Memory Cache
Memory Cache 是内存缓存技术，它可以快速地存储和查询数据，但是缓存的生命周期可能很短，应用程序需要在内存资源有限的情况下合理利用这些资源。Next.js 内置了 lru-cache 模块，可以轻松地实现内存缓存。例如下面的示例代码：
const LRU = require("lru-cache");
const cache = new LRU({
max: 100 * 1000 * 1000, // 存储的最大数据量
maxAge: 1000 * 60 * 60 // 数据在缓存中的有效期，单位为毫秒
});
async function getData() {
const key = "data_key";
const cachedData = cache.get(key); // 先在缓存中查找数据
if (cachedData) {
return cachedData;
} else {
const freshData = await fetchData();
cache.set(key, freshData); // 将新数据放入缓存中
return freshData;
}
}
async function fetchData() {
// ...
}
export default getData;上述代码中，cache 是一个 LRU 实例，max 属性用于设置最大存储容量，maxAge 属性用于设置数据在缓存中的有效期。getData 函数会尝试从缓存中获取数据，如果缓存中没有数据，则调用 fetchData 函数获取新数据，然后将新数据保存到缓存中，下次调用时直接从缓存中返回数据。
External API Cache
Next.js 应用程序可能涉及到一些外部 API，为了避免频繁调用这些 API，可以在应用程序中使用外部 API 缓存。例如下面的示例代码：
const axios = require("axios");
const LRU = require("lru-cache");
const cache = new LRU({
max: 100 * 1000 * 1000, // 存储的最大数据量
maxAge: 1000 * 60 * 60 // 数据在缓存中的有效期，单位为毫秒
});
async function fetchData() {
const key = "data_key";
const cachedData = cache.get(key); // 先在缓存中查找数据
if (cachedData) {
return cachedData;
} else {
const freshData = await axios.get("https://api.example.com/data");
cache.set(key, freshData); // 将新数据放入缓存中
return freshData;
}
}
export default fetchData;上述代码中，cache 是一个 LRU 实例，max 属性用于设置最大存储容量，maxAge 属性用于设置数据在缓存中的有效期。fetchData 函数会尝试从缓存中获取数据，如果缓存中没有数据，则调用 axios.get 函数获取新数据，然后将新数据保存到缓存中，下次调用时直接从缓存中返回数据。
总结
Next.js 是一个强大的 React.js 应用程序框架，其提供了丰富的数据预取和缓存技术，可以极大地提高应用程序的性能和效率。本文详细介绍了 Next.js 中的数据预取和缓存技巧，包括 getServerSideProps、getStaticProps、Cache-Control、Memory Cache 和 External API Cache 等常用技术，同时提供了相应示例代码，希望能够对你的前端开发工作有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65922dc2eb4cecbf2d710d23