title: How do I change the URL of the page in Nuxt SSR mode without reloading the whole page?
body: <ul>
  <li>I am trying to build a Master Detail View where list and detail are shown side by side on desktop but on different pages on mobile as shown in the image below</li>
  <li>I may have between 500 to 10000 items on the list to display</li>
  <li>I simulated both approaches with 10000 items, feel free to change the number in server/app.js file</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/cL4Gv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cL4Gv.png" alt="enter image description here"></a></p>
  
  <ul>
  <li>When I click on an item in the list, I want the URL to change so that I click back button I go to the previous button.</li>
  <li>The page should not reload for doing this and it should be in SSR mode</li>
  </ul>
  
  <p><strong>What have I tried?</strong></p>
  
  <p><strong>Approach 1 Dynamic Routes</strong></p>
  
  <ul>
  <li><p>Inside pages folder, I put an articles folder and _id.vue file and added a nuxt-link</p></li>
  <li><p>This setup is VERY VERY slow, takes 20 seconds for the summary to change </p></li>
  <li><p><a href="https://codesandbox.io/s/github/slidenerd/nuxt-dynamic-routes" rel="noreferrer">Here is Approach 1 on CodeSandbox</a></p></li>
  </ul>
  
  <p><strong>Approach 2 Custom @nuxtjs/router module with push</strong></p>
  
  <ul>
  <li><p>Instead of the default router, I tried using the custom @nuxtjs/module</p></li>
  <li><p>Links are selected much much faster in this approach and the URL is also changing</p></li>
  <li><p>However if I click on item 4877, it reloads the page and the scrollbar goes back to the top of the page?</p></li>
  <li><p>How do I keep the scrollbar wherever it is or PREVENT reloading the page?</p></li>
  <li><p><a href="https://codesandbox.io/s/github/slidenerd/nuxt-custom-router" rel="noreferrer">Here is Approach 2 on CodeSandbox with Custom Router</a></p></li>
  </ul>
  
  <p>Simple Question</p>
  
  <ul>
  <li>What do I do in SSR mode to change the URL as I select an item in the list without reloading the page?</li>
  <li>Which approach is better?</li>
  </ul>