Need a component ServerOnly or any alternative

[milindsingh]

Summary

Need a component ServerOnly or any alternative way to render component only on the server-side and do not re-render in the browser.

Basic example

<ServerOnly>
            <vue-markdown v-bind:external-preview="true" :source="$page.article.content" id="content" />
</ServerOnly>

This will generate HTML only on gridsome build and will not re-render on browser routing.

Motivation

This will optimize the content and speed-up page render. If anyone can direct me to the right direction I am very much willing to add this feature (if missing).

Thank you.

[noxify]

Could https://github.com/maoberlehner/vue-lazy-hydration help in this case?

[noxify]

but it seems your question is a duplicate of #1056 .

[milindsingh]

Thanks @noxify but I am unable to stop vue to re-render the component on client-side using LazyHydrate.

        <LazyHydrate never>
            <vue-markdown v-bind:external-preview="true"
                  v-if="content"
                  :source="content"
                  id="content"/>
      </LazyHydrate>

The page initially renders with server-side content, then on loading complete vue rerenders complete data.

Any suggestion how to stop the rerender ?

[noxify]

@milindsingh - currently not - can you share your repo? Then I can take a look with the same setup as you have.

[milindsingh]

Thanks @noxify I have added to the project it's currently private until complete.

Its a copy of gridsome.org. deployed at https://dev.adapttive.com
https://github.com/adapttive/dev.adapttive.com/blob/b9e1150ed8678db12fc57a0e5fa602e94ce3a7ca/src/templates/Article.vue#L22

https://github.com/adapttive/dev.adapttive.com

[noxify]

Hi,
i have seen your comment at maoberlehner/vue-lazy-hydration#80

I created a simple codesandbox to test it without gridsome :

• V1: https://codesandbox.io/s/vue-lazy-hydration-example-v1-n99ov
• V2: https://codesandbox.io/s/vue-lazy-hydration-example-v2-umbgy

I'm not sure if I did something wrong, but it seems not to work 🤷‍♂️ ( maybe someone could review it, just to make sure :) )

But the positive: It's not a gridsome problem 🙈 and we can reproduce the problem also with a "vanilla vue" setup.

@hjvedvik - Maybe you have a minute to take a look?

Regards,
Marcus

[milindsingh]

I have added the lazy hydration to never and the app is not getting mounted, that is correct.

But it still has the same weird issue, i.e prismjs content is re-rendered and code preview is replaced with normal text.

Open the page directly in the browser with the first link, you'll see not code preview.

1. https://adapttive.com/blog/grumphp-in-magento-2

Then check out the source, prismjs SSR have generated a code preview.
2. view-source:https://adapttive.com/blog/grumphp-in-magento-2

Now, use any page route to go some other page, and then from blog route come back to the same page, you'll see code preview working.

How this is happening?

@AllanChain have you faced anything related to this?

[AllanChain]

@milindsingh Sorry, not yet. To clarify, if you see the word disable hydration in @allanchain/gridsome-plugin-pwa app shell mode, that's about rendering totally on client side.

[milindsingh]

Thanks everyone for your help. It was prismjs import that was messing which code previews on the client-side.

https://github.com/maoberlehner/vue-lazy-hydration works perfectly fine.