Next.js 应用路由,指定在服务器端不使用 ‘fetch’ 的函数上重新验证。

huangapple go评论66阅读模式
英文:

Next.js App Router, specify revalidation on server side functions that don't use 'fetch'

问题

我在我的Next.js项目中使用了新的App Router。我的页面都填充了从存储桶中获取的Markdown文件的内容。在我的Vercel托管上,这些页面被永久缓存,所以Markdown文件的更改不会显示出来。

文档 显示了如何在 fetch 参数中指定缓存过期时间。但我的函数不使用 fetch,而是使用Firebase SDK。

我还尝试了添加一个额外的步骤,创建一个内部API路由,返回文件的内容,然后页面路由可以从该API路由中进行fetch,指定适当的重新验证参数。但是Next.js似乎不允许从服务器端内部获取内部API路由。

以下是我其中一个路由的代码,其中 downloadFromStorage 返回存储桶中文件的内容。

import { TextPage } from "@/components";
import { downloadFromStorage } from "@/app/api/file-handling";

export default async function PageTerms(props) {
    const text = await downloadFromStorage('pages/terms.md')
    return (<TextPage text={text.toString()}/>)
}

(downloadFromStorage 函数)

import { storage } from "./firebase";
export async function downloadFromStorage(filename, bucketName = BUCKET) {
    const bucket = storage.bucket(bucketName);
    const file = bucket.file(filename);
    return new Promise((resolve, reject) => {
        file.download((err, contents) => {
            if (err) {
                reject(err);
                return;
            }
            resolve(contents);
        });
    });
}
英文:

I am using the new App Router in my Next.js project.
My pages are filled with content from a Markdown file fetched from a bucket. On my Vercel hosting, these pages are cached forever, so changes to the Markdown file aren't shown.

The documentation shows how to specify cache expiration time, within the fetch parameters. But my functions does not use fetch, it uses the Firebase SDK.

I've also tried adding an extra step of creating an internal api route that returns the file's contents, and then the page route could fetch that api route, specifying the proper revalidation parameters. But Next.js does not seem to allow fetching internal api routes from within server side.


Below is the code for one of my routes, where downloadFromStorage returns the contents from the file in the bucket.

import {TextPage} from &quot;@/components&quot;;
import {downloadFromStorage} from &quot;@/app/api/file-handling&quot;;

export default async function PageTerms(props) {
    const text=await downloadFromStorage(&#39;pages/terms.md&#39;)
    return (&lt;TextPage text={text.toString()}/&gt;)
}

(the downloadFromStorage function)

import {storage} from &quot;./firebase&quot;
export async function downloadFromStorage(filename, bucketName = BUCKET) {
    const bucket = storage.bucket(bucketName);
    const file = bucket.file(filename);
    return new Promise((resolve, reject) =&gt; {
        file.download((err, contents) =&gt; {
            if (err) {
                reject(err);
                return;
            }
            resolve(contents);
        });
    });
}

答案1

得分: 2

你可以使用 revalidate 选项添加路由段配置。然后,将根据导出的整数重新验证整个段。

// 每 60 秒重新验证
export const revalidate = 60;

你可以在 官方文档 中了解更多关于段配置和 revalidate 选项的信息。

英文:

You can add a route segment configuration with the revalidate option. This will then revalidate the entire segment based on the exported integer.

// revalidate every 60 seconds
export const revalidate = 60;

You can learn more about segment configurations and the revalidate option in the official documentation.

huangapple
  • 本文由 发表于 2023年5月24日 17:33:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76322066.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定