使用 intercepting routes 提升弱网环境下的体验

问题引入

正常环境下，我们如果需要弹窗，通常是：

Modal.open(
  <Dialog>
    <DialogContent />
  </Dialog>
)

这样子有 3 个缺点：

1. 需要等 js 加载完成后才能响应用户交互，弱网环境下无响应时间可能会比较长
2. 刷新页面后弹窗就没了
3. 不支持物理的前进后退（如移动端的右滑返回）

在一些业务场合下，intercepting routes 即可同时解决这 3 个问题。

直接看具体业务

我们看一个常见的业务场景：搜索弹窗。

# 文件结构
app
|-- @search (这个名字对应的是 layout 中的 slot name)
|-- |-- default.tsx
|-- |-- (.)search (这个名字对应的是 app/search 路由名)
|-- |-- |-- page.tsx
|-- search
|-- |-- page.tsx
|-- layout.tsx
|-- page.tsx

app/page.tsx 里面需要打开 search 弹窗，不需要调用 Modal.open, 直接用 <Link href='/search'> 即可。@search/(.)search intercepting routes 会拦截 /search 路由。

我们只需要在 @search/(.)search/page.tsx 中渲染所需内容（这里是搜索弹窗）。然后在 layout.tsx 中添加插槽(slot)就好了，都是格式代码，看 demo 或者官网文档即可。

然后 Next.js 会实现：

• 普通情况（js 加载完全）时正常弹窗，并修改当前 url
• 弱网环境（js 未加载）时，也能响应用户交互（因为我们使用的是 <Link href='/search'>）

优劣

凡事都有优劣，无非取舍。

这样做的坏处是多写了一堆格式代码，我认为整个 @search 目录都是格式代码。

好处是克服了开篇所说的那 3 个缺点，且除了 @search 目录外，调用方式并未增加复杂度

• 原来的打开弹窗使用 Modal.open, 现在使用 <Link>
• 原来的关闭弹窗使用 Modal.close, 现在使用 router.back()（或者也可以使用 <Link>, 那样稍复杂）