What problem are parallel routes solving that components don’t already?
Unanswered
Spot-breasted Oriole posted this in #help-forum
Spot-breasted OrioleOP
Trying to understand when I would opt into using parallel routes.
I’ve read through the docs a few times now, and while they seem neat, I’m not sure what use-case I’d opt into them for that I couldn’t simply use components for?
In other words, can’t you represent the same slotting behavior by just wrapping the content of the pages you want to conditionally render? Is there a DX improvement I’m missing here? Would love to better understand.
So far the only thing I can come up with is that you’d be able to avoid rendering part of the page (or rerendering on soft nav).
I’ve read through the docs a few times now, and while they seem neat, I’m not sure what use-case I’d opt into them for that I couldn’t simply use components for?
In other words, can’t you represent the same slotting behavior by just wrapping the content of the pages you want to conditionally render? Is there a DX improvement I’m missing here? Would love to better understand.
So far the only thing I can come up with is that you’d be able to avoid rendering part of the page (or rerendering on soft nav).
3 Replies
Spot-breasted OrioleOP
(Not to downplay the advantage of not rendering a whole page potentially that doesn’t need to be)
@Spot-breasted Oriole Trying to understand when I would opt into using parallel routes.
I’ve read through the docs a few times now, and while they seem neat, I’m not sure what use-case I’d opt into them for that I couldn’t simply use components for?
In other words, can’t you represent the same slotting behavior by just wrapping the content of the pages you want to conditionally render? Is there a DX improvement I’m missing here? Would love to better understand.
So far the only thing I can come up with is that you’d be able to avoid rendering part of the page (or rerendering on soft nav).
It is used when you need to split the page to several pieces that you can put anywhere in the layout.
For example, see the image. Red boxes are page dependent parts (e.g. article title and article content). Yellow box is not dependent on the page (e.g. list of all articles), so shouldn’t be remounted and should be put in the layout.
This pattern requires pretty complex css spaghetti to achieve with only a single slot in the layout that is page-dependent. But with parallel routes, it’s pretty trivial, you can put the page content in the children slot and the article title in the
For example, see the image. Red boxes are page dependent parts (e.g. article title and article content). Yellow box is not dependent on the page (e.g. list of all articles), so shouldn’t be remounted and should be put in the layout.
This pattern requires pretty complex css spaghetti to achieve with only a single slot in the layout that is page-dependent. But with parallel routes, it’s pretty trivial, you can put the page content in the children slot and the article title in the
title slot for example.Modals are frequently cited as a common purpose of parallel routes but I personally don’t think that use case is much better than a client-side controlled modal, most of the time. But “split a page to several disjointed parts” is a pretty good use case for parallel routes and I’m using this pattern quite extensively at work.