Subscribe on changes!

[SSR] Ignore mismatch error when mismatch is expected.

avatar
Oct 27th 2022

What problem does this feature solve?

Scenario

Imaging we are rendering some cards on our website. Every single time, The number of cards been rendered is determined by clientWidth and cligntHeight. Here are some thoughts:

  • I don't want to render nothing at first time. So it needs to be SSR.
  • In server, i don't know users clientWidth and cligntHeight. So i make some guess
  • In browser, i get clientWidth and cligntHeight and known how many cards should be rendered. So i update the number of cards.
  • In browser, it throws a mismatch warning which is expected.

What is the best practice at such scenario? Or can i remove this warn when what's happening is expected?

What does the proposed API look like?

v-mismatchWarning="false"

avatar
Oct 27th 2022

Got a solution. update number of cards in onmounted lifecycle.