企业官网建设流程全解析

wnmp搭建后怎么做网站,台州小型网站建设,wordpress 浏览次数,求个网站你明白的来是想发昨晚写好的 starblog 管理后台重构文章的结果打开 blog 才发现忘记提交了#x1f602;所以写一篇新的吧正好最近正在大量使用 Next.js我发现部署后的首次渲染很慢#xff0c;才意识到「预热」这个问题当然这是后话了这个框架里有大量的官方约定这些在官方文档里都有的…来是想发昨晚写好的 starblog 管理后台重构文章的结果打开 blog 才发现忘记提交了所以写一篇新的吧正好最近正在大量使用 Next.js我发现部署后的首次渲染很慢才意识到「预热」这个问题当然这是后话了这个框架里有大量的官方约定这些在官方文档里都有的就是比较分散本文主要是概括一下这些约定Next.js框架更新得很快不一样的地方以官方文档为主。缓存和渲染相关#// 控制页面重新验证的时间间隔秒export const revalidate 60; // 60秒后重新验证export const revalidate 0; // 禁用缓存export const revalidate false; // 永久缓存// 控制页面的渲染模式export const dynamic auto; // 默认自动选择export const dynamic force-dynamic; // 强制动态渲染export const dynamic force-static; // 强制静态渲染export const dynamic error; // 如果使用动态函数则报错// 控制动态段的行为export const dynamicParams true; // 允许动态参数默认export const dynamicParams false; // 不允许动态参数运行时配置#// 指定运行时环境export const runtime nodejs; // Node.js 运行时默认export const runtime edge; // Edge 运行时// 设置最大执行时间秒export const maxDuration 30; // 最多执行30秒获取数据相关#// 控制 fetch 请求的缓存行为export const fetchCache auto; // 默认缓存行为export const fetchCache default-cache; // 默认缓存export const fetchCache only-cache; // 只使用缓存export const fetchCache force-cache; // 强制缓存export const fetchCache default-no-store; // 默认不缓存export const fetchCache only-no-store; // 只允许不缓存export const fetchCache force-no-store; // 强制不缓存元数据和SEO#元数据#动态生成元数据import type { Metadata } from nextexport async function generateMetadata({ params }: { params: { slug: string } }): PromiseMetadata {// 根据动态参数获取数据const post await getPost(params.slug)return {title: post.title,description: post.description,openGraph: {title: post.title,description: post.description,images: [post.image],},}}定义静态元数据// 静态元数据export const metadata: Metadata {title: My Page,description: This is my page description,keywords: [next.js, react, typescript],openGraph: {title: My Page,description: This is my page description,},}使用场景#静态 Metadata 适用于内容固定的页面如关于我们、联系我们不需要根据路由参数变化的页面简单的静态页面动态 Metadata 适用于博客文章详情页根据文章 slug 获取标题、描述产品详情页根据产品 ID 获取信息用户个人资料页根据用户 ID 获取信息任何需要根据路由参数或外部数据动态生成 metadata 的页面静态参数#// 生成静态参数用于动态路由export async function generateStaticParams() {return [{ slug: post-1 },{ slug: post-2 },];}常用组合示例#完全静态页面#export const dynamic force-static;export const revalidate false;实时动态页面#export const dynamic force-dynamic;export const revalidate 0;定时更新页面#export const revalidate 3600; // 每小时更新一次Edge 运行时优化#export const runtime edge;export const dynamic force-dynamic;API 路由配置#// 在 API 路由中也可以使用export const runtime edge;export const maxDuration 10;使用场景建议#配置 适用场景revalidate 0 实时数据展示如股票价格、聊天应用revalidate 60 定期更新的内容如新闻、博客dynamic force-static 完全静态的页面如关于我们dynamic force-dynamic 个性化内容如用户仪表板runtime edge 需要低延迟的全球分发fetchCache force-no-store 敏感数据不允许缓存注意事项#只能在页面或布局文件中使用 这些配置只在 page.tsx 、 layout.tsx 或 route.ts 文件中有效这些配置选项只能在 Server Component Pages、Layouts 或 Route Handlers 中使用必须是具名导出 必须使用 export const 语法配置值必须是 静态可分析的 例如 revalidate 600 有效但 revalidate 60 * 10 无效类型安全 TypeScript 会检查这些配置的类型优先级 子路由的配置会覆盖父路由的配置这些配置选项让 Next.js 能够精确控制每个页面的渲染和缓存行为是 App Router 架构的核心特性之一官方文档#