Nuxt•9mo ago

When setting a specific route to `ssr: false`, the page is rendered last in the html

Let's say we have the following layout:

// default.vue

<template>
  <AComponent />
  <AnotherComponent />

  <div class="layout-wrapper">
    <AHeader />
    <slot />
    <AFooter />
    <SomeOtherComponent />
  </div>
</template>

// default.vue

<template>
  <AComponent />
  <AnotherComponent />

  <div class="layout-wrapper">
    <AHeader />
    <slot />
    <AFooter />
    <SomeOtherComponent />
  </div>
</template>

And a /search page.

<template>
  <div class="page-search">...</div>
</template>

<template>
  <div class="page-search">...</div>
</template>

When we navigate from other pages, the /search page is rendered properly:

//...
<body>
  <div id="__nuxt" data-v-app="">
    <div class="layout-wrapper">
      <div class="header"></div>
      <div class="page-search"></div> // The position where slot is
      <div class="footer"></div>
      <div class="some-other-component"></div>
    </div>
  </div>
  // ...
</body>

//...
<body>
  <div id="__nuxt" data-v-app="">
    <div class="layout-wrapper">
      <div class="header"></div>
      <div class="page-search"></div> // The position where slot is
      <div class="footer"></div>
      <div class="some-other-component"></div>
    </div>
  </div>
  // ...
</body>

But, if we access the page directly, as if we pressed enter on the /search URL in the browser:

//...
<body>
  <div id="__nuxt" data-v-app>
    <div class="layout-wrapper">
      <div class="header"></div>
      // The position where the page should be
      <div class="footer"></div>
      <div class="some-other-component"></div>
      <div class="page-search"></div> // The position it is being rendered
    </div>
  </div>
  // ...
</body>

//...
<body>
  <div id="__nuxt" data-v-app>
    <div class="layout-wrapper">
      <div class="header"></div>
      // The position where the page should be
      <div class="footer"></div>
      <div class="some-other-component"></div>
      <div class="page-search"></div> // The position it is being rendered
    </div>
  </div>
  // ...
</body>

Then, if we navigate from this to another page (which is SSR), that page is also rendered in the wrong position.

1 Reply

lkjimyOP•9mo ago

The solution for now is to wrap the <slot /> of the layout, in a div. I assume the page is being inserted with appendChild to the parent of the <slot />, which in this case is <div class="layout-wrapper">, so, if the slot is the last element inside another element, it is going to be rendered correctly, if it is not, we might run into this issue. Corrected layout:

// default.vue

<template>
  <AComponent />
  <AnotherComponent />

  <div class="layout-wrapper">
    <AHeader />
    <div>
      <slot /> // Slot is now the last element of it's parent, div.
    </div>
    <AFooter />
    <SomeOtherComponent />
  </div>
</template>

// default.vue

<template>
  <AComponent />
  <AnotherComponent />

  <div class="layout-wrapper">
    <AHeader />
    <div>
      <slot /> // Slot is now the last element of it's parent, div.
    </div>
    <AFooter />
    <SomeOtherComponent />
  </div>
</template>

Gaming

Programming

When setting a specific route to `ssr: false`, the page is rendered last in the html