Caveatshttps://nextjs.org/docs/pages/building-your-applic...
Shallow routing only works for URL changes in the current page. For example, let's assume we have another page calledpages/about.js, and you run this:
router.push('/?counter=10', '/about?counter=10', { shallow: true })
Since that's a new page, it'll unload the current page, load the new one and wait for data fetching even though we asked to do shallow routing.
$locations = [];
$arSelect = Array("ID", "IBLOCK_ID", "NAME", "PREVIEW_TEXT", "PREVIEW_PICTURE", "PROPERTY_*");
$arFilter = Array("IBLOCK_ID"=>1);
$res = CIBlockElement::GetList(Array(), $arFilter, $arSelect);
while ($ob = $res->GetNextElement()) {
$arProps = $ob->GetProperties();
if (!array_key_exists($arProps['REGION']['VALUE'], $regions)) {
$locations[$arProps['REGION']['VALUE']] = [];
}
if (!in_array($arProps['CITY']['VALUE'], $locations[$arProps['REGION']['VALUE']], true)) {
$locations[$arProps['REGION']['VALUE']][] = $arProps['CITY']['VALUE'];
}
}
<? foreach (array_keys($locations) as $region): ?>
<option value="<?=$region?>">
<?=$region?>
</option>
<? endforeach; ?>
<? foreach ($locations as $cities): ?>
<? foreach ($cities as $city): ?>
<option value="<?=$city?>">
<?=$city?>
</option>
<? endforeach; ?>
<? endforeach; ?>
Повторюсь: на этом этапе, не навсегда. Постепенно нужно будет добавлять семантику, но для этого сначала нужно будет набить руку в CSS.