高价值：否

标题：
Next.js并行路由：同一布局多页面渲染，灵活构建动态应用

### Next.js并行路由技术详解

#### 开篇：主题与背景
主题是介绍Next.js中的并行路由技术，其背景是在构建具有高度动态内容的应用场景下，并行路由能发挥重要作用，目的是让开发者了解并行路由的相关概念、应用等内容。

#### 核心概念
- **并行渲染**：并行路由能让你在同一视图里同时展示多个页面，不用像传统那样进行页面跳转。这就好比你在一个大窗口里能同时看到多个不同的小窗口内容，提升了用户体验。比如在一些复杂应用中，不同部分能同时加载。
- **插槽（Slots）**：并行路由靠“插槽”实现，你可以把插槽想象成页面布局里预留的“坑位”，用来放不同内容。插槽用`@folder`约定来定义，像`@analytics`和`@team`就是不同的插槽。例如目录结构中，`@user`和`@team`就充当不同内容的容器。
- **目录结构**：插槽通过在文件夹名称前加`@`符号来定义。比如下面这样的目录结构就定义了两个插槽：
```
dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── utilities.js
    └── page.js
```
这里`@user`和`@team`作为不同内容的容器，方便灵活设计网站。
- **Layout文件**：插槽会作为props传递给共享的父级布局（layout.js）。在`app/layout.js`中的组件能接收`@analytics`和`@team`插槽props，还能和`children` prop一起并行渲染，示例代码如下：
```typescript
export default function Layout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  analytics?: React.ReactNode
  team?: React.ReactNode
}) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>    
  )
}
```
- **URL结构**：插槽不是路由段，不会影响最终的URL结构。比如对于`/@analytics/views`，URL还是`/views`，因为`@analytics`只是个插槽而已。
- **动态性**：在同一路由段级别，不能同时既有静态又有多动态插槽。要是一个插槽是动态的话呢，该级别的所有插槽都得是动态的。
- **隐式插槽**：`children` prop算是一个隐式插槽，不需要映射到文件夹。这意味着`app/page.js`等价于`app/@children/page.js`。
- **状态管理**：Next.js默认会跟踪每个插槽的活动状态（或子页面）。插槽中渲染内容取决于导航类型：
    - **软导航**：在客户端导航期间，Next.js会进行部分渲染，改变插槽内的子页面，同时保持其他插槽的活动子页面，就算它们和当前URL不匹配也能保持。
    - **硬导航**：整页加载（浏览器刷新）后，Next.js没法确定和当前URL不匹配的插槽的活动状态。相反，它会给不匹配的插槽渲染`default.js`文件，如果`default.js`不存在，就渲染404页面。
- **default.js**：可以定义一个`default.js`文件，在初始加载或者整页重新加载期间，作为不匹配插槽的后备渲染。
- **useSelectedLayoutSegment(s)**：`useSelectedLayoutSegment`和`useSelectedLayoutSegments`都能接受`parallelRoutesKey`参数，允许读取插槽内的活动路由段。

#### 实际应用
- **条件路由**：能利用并行路由依据某些条件（像用户角色）有条件地渲染路由。例如，为`/admin`或`/user`角色渲染不同的仪表板页面。
- **标签组**：能在插槽内添加一个布局，让用户独立导航该插槽。这对创建选项卡很有用，就像网页上的不同标签能独立切换内容一样。
- **模态框**：并行路由能和拦截路由结合起来创建支持深度链接的模态框。能解决构建模态框时常见的挑战，比如通过URL让模态内容可共享、页面刷新时保留上下文不关闭模态、后退导航时关闭模态而不是转到上一个路由、前进导航时重新打开模态等。
- **加载和错误UI**：并行路由能独立流式传输，允许为每个路由定义独立的错误和加载状态。

#### 总结
并行路由是Next.js里一个强大的功能，它能在同一布局中同时渲染多个页面，为构建复杂且动态的Web应用提供了更大灵活性。通过合理利用插槽和其它相关特性，开发者能创建出用户体验更佳的Web应用。