在Next.js 13中是否必须使用并行路由?

huangapple go评论130阅读模式
英文:

Do I have to use Parallel Routes in Nextjs 13?

问题

Certainly, here's the translation of your text:

大家好,

我最近开始学习Next.js v13,但我有一个简单的问题。
我阅读了文档,它说它用于在相同的布局中显示一个或多个页面。
我们是否可以只是创建一个名为“components”的文件夹,然后在文件夹内创建两个(或更多)组件,并在页面上导入和使用它们,这样我们就可以感觉到页面上显示了两个页面?
而且对于每个组件,我们可以用悬挂(流)包装它,这样无论什么可以先显示,都将在数据完全加载时显示。

在Next.js中使用并行路由的主要优势是什么?

英文:

guys,

I recently started to study Nextjs v13, but I got a simple question.
I read the doc and it says it is used for showing one or more pages in the same layout.
Can we not just make a folder called components and make two (or more) components inside the folder and import and use them on a page, so we can feel like two pages are shown on the page?
and also for each component, we can wrap it with suspense (streaming), so whatever can be shown first, it will be shown first and the rest will be shown when data is completely loaded.

what will be main advantages of using Parallel Routes in nextjs?

答案1

得分: 0

我刚在一个项目中使用它,因为我必须使用 searchParam 属性。

有两个部分:(i)一个更新 URL 中的 searchParam 的表单,(ii)一个结果列表,使用 searchParam 的值,基于它获取数据并显示结果。

没有并行布局时,浏览器 URL 只有在第二个块加载后才更新,我不喜欢,比如用户在加载过程中刷新。

除此之外,我喜欢能够使用 loading.js 和 error.js 模式,即使我可以在没有并行路由的情况下复制它。

有一些问题,但看起来它们正在修复(https://github.com/vercel/next.js/issues/49243 和 https://github.com/vercel/next.js/issues/51951)。

英文:

I just used it on a project because I had to use the searchParam prop.

Had 2 sections: (i) a form that updates the searchParam in the url and (ii) a list of results that uses the searchParam value, fetches data based on it and display results

Without the parallel layout, the browser url was only updating once the second block had loaded, which I didn't like e.g. if the user refreshes during the loading.

Beside that, I like being able to use the loading.js and the error.js pattern, even if I could replicate that without parallel routing.

Had a few issues but looks like they are being fixed (https://github.com/vercel/next.js/issues/49243 and https://github.com/vercel/next.js/issues/51951)

huangapple
  • 本文由 发表于 2023年6月22日 14:35:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76529139.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定