Next.js 15 并行路由与路由拦截实践概述并行路由用于同时呈现多数据区；拦截路由用于模态/抽屉式导航。本文给出 RSC/PPR 协同与 SEO 配置示例。并行路由目录结构app/ layout.tsx @feed/(list)/page.tsx @sidebar/(summary)/page.tsx @modal/(viewer)/page.tsx // app/layout.tsx（并行插槽） export default function RootLayout({ children, feed, sidebar, modal }: any) { return ( <html lang="zh-CN"> <body> <main>{children}</main> <aside>{sidebar}</aside> <section>{feed}</section> <div id="modal-root">{modal}</div> </body> </html> ) } 路由拦截（模态）// app/@modal/(viewer)/[id]/page.tsx export default function Viewer({ params }: { params: { id: string } }) { return ( <dialog open> <img src={`/images/${params.id}.jpg`} alt="" /> <a href="/" aria-label="close">关闭</a> </dialog> ) } RSC/PPR 协同与 SEO Metadata// app/@feed/(list)/page.tsx export const dynamic = 'force-static' export const revalidate = 600 export default async function Feed() { const data = await fetch('https://api.example.com/feed', { cache: 'force-cache' }).then((r) => r.json()) return <ul>{data.map((x: any) => <li key={x.id}>{x.title}</li>)}</ul> } // app/generateMetadata.ts（或具体页面内） import type { Metadata } from 'next' export function generateMetadata(): Metadata { return { title: '并行路由与拦截路由实践', description: 'Next.js 15 RSC/PPR 与 SEO 协同' } } 技术参数与验证Node.js 20.x；浏览器：Chrome 120+PPR 命中率 > 85%；模态拦截导航耗时 < 50ms；FCP/LCP 保持稳定应用场景资讯门户：左侧摘要 + 主内容 + 模态查看控制台：主区操作 + 辅助区并行渲染注意事项并行插槽命名需与目录一致；拦截路由遵循可访问性Metadata 与站点地图需包含重要入口路径常见问题Q: 并行路由是否影响 SEO？A: 不直接影响，但需保障关键页面有可索引的 URL 与 Metadata。参考资料Next.js Parallel/Intercepting Routes 文档RSC/PPR 指南---发布信息：已发布 · 技术验证 · 阅读 36 分钟 · CC BY-SA 4.0
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复