search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.19k stars 52 forks source link

Using `ssr-only` preven't the element from appearing #39

Closed simplenotezy closed 4 years ago

simplenotezy commented 4 years ago

If I use <LazyHydrate srr-only> around some static component, it is never shown. I tried changing it to when-visible and that works fine. Also I am not quite sure of the difference between the two, despiste having read the documentation and tutorial. Isn't when-visible better?

maoberlehner commented 4 years ago

What does your SSR process look like? If for some reason typeof window !== 'undefined' in your SSR environment, the component does not render.

From the Basic example:

  1. The ArticleContent component is only loaded in SSR mode, which means it never gets hydrated in the browser, which also means it will never be interactive (static content only).
  2. Next we can see the AdSlider beneath the article content, this component will most likely not be visible initially so we can delay hydration until the point it becomes visible.

ssr-only -> the component never gets hydrated on the client. when-visible -> the component gets hydrated when visible.

None of those two is better per se. If you have only static content with no interactivity, ssr-only is the best choice. If your component has functionality (e.g. buttons and other interactive elements) ssr-only is not a choice, because your component will not work when using it.

simplenotezy commented 4 years ago

@maoberlehner Maoberlehner, I just tested in normal yarn dev. I don't have that typecheck on window in my SSR.

Thanks for the clarification in regards to the different options.

simplenotezy commented 4 years ago

Can you do both? E.g.:

<LazyHydrate ssr-only when-visible>
simplenotezy commented 4 years ago

I had some <client-only> within <LazyHydrate> and that caused the block to never show up. I removed it, and then it worked. 😊