有人知道一个维护页面的实现类似于这个的next.js应用程序，不需要改变.env变量和重新部署每次打开和关闭网站？我想使用API响应，例如siteStatus === 'down'或siteStatus === 'up'来设置维护页面。我会很感激任何对此的投入，因为我已经被困在这上面很长一段时间了。
cnwbcb6i1#
考虑到其他方法的缺点，更改环境变量和重新部署应用程序可能并不是一个很高的代价。以下是一些想法及其缺点：1.在_app中实现getInitialProps，但是你会失去静态页面优化。1.在所有页面中实现getStaticProps（您可以添加HOC来简化此过程），并假设每10分钟重新验证一次。但由于不断的重新验证，这将是一个巨大的开销。1.在_app中使用MaintenanceGuard组件 Package 页面，这将延迟在客户端上的呈现，直到它获取维护状态。这种方法通常会对交互时间和用户体验产生负面影响。现在，我可以看到一个可接受的实现选项，如果您可以将应用程序迁移到Next 13 app目录。您需要一个托管在应用外部的外部API端点，该端点将响应维护状态。您可以在应用的根布局中检查维护状态，并按以下方式有条件地显示维护通知。
_app
getInitialProps
getStaticProps
MaintenanceGuard
app
// app/layout.tsx import * as React from "react"; async function fetchMaintenance() { const response = await fetch(`${process.env.MAINTENANCE_ENDPOINT}`, { next: { tags: ["maintenance"] }, }); const data = await response.json(); return data.maintenance; } export default async function RootLayout({ children, }: React.PropsWithChildren) { const maintenance = await fetchMaintenance(); return ( <html lang="en"> <body>{!maintenance ? children : <h1>Scheduled Maintenance</h1>}</body> </html> ); }
要执行按需重新验证，您可以创建一个将触发重新验证的API路由。要触发重新验证，请向YOUR_HOST/API/maintenance端点发送POST请求。
// app/api/maintenance/route.ts import { NextResponse } from "next/server"; import { revalidateTag } from "next/cache"; export async function POST() { // TODO: secure this endpoint with appropriate authentication revalidateTag("maintenance"); return NextResponse.json({ revalidated: true, now: Date.now() }); }
1条答案
按热度按时间cnwbcb6i1#
考虑到其他方法的缺点，更改环境变量和重新部署应用程序可能并不是一个很高的代价。
以下是一些想法及其缺点：
1.在
_app中实现getInitialProps，但是你会失去静态页面优化。1.在所有页面中实现
getStaticProps（您可以添加HOC来简化此过程），并假设每10分钟重新验证一次。但由于不断的重新验证，这将是一个巨大的开销。1.在
_app中使用MaintenanceGuard组件 Package 页面，这将延迟在客户端上的呈现，直到它获取维护状态。这种方法通常会对交互时间和用户体验产生负面影响。现在，我可以看到一个可接受的实现选项，如果您可以将应用程序迁移到Next 13
app目录。您需要一个托管在应用外部的外部API端点，该端点将响应维护状态。
您可以在应用的根布局中检查维护状态，并按以下方式有条件地显示维护通知。
要执行按需重新验证，您可以创建一个将触发重新验证的API路由。要触发重新验证，请向YOUR_HOST/API/maintenance端点发送POST请求。