Nuxt.js: Removing Json Data from Html

[OrkanCom]

Hello, I'm new to nuxt.js. I'm not pretty sure how nuxt works but I have only one question for this good framework.

I want use vue.js and server side rendering; So I prepared an example with nuxt-starter-template.
But I have a problem;

I don't want to embed my json data in html(s);

Since this app will be a small newsletter website, I don't want to share the json data ( ofcourse they can crawl the website but embeding data to html(?), it's like I'm making it easy to crawl. ).

So is there any way to delete/hide this json data but still get rendered html ?

Thanks,
Bests regards...

_{This question is available on Nuxt.js community (#c1848)}

[clarkdo]

The data is from Server Data fetching, if you don't want to pre-fetch date in server side, you can put data laoding codes into the lifecycle methods which will not be called in ssr (mounted, beforeMount) or exclude server case in fetch or asyncData.

fetch ({ isClient }) {
  if (isClient) {
    // load data
  }
}

//In next Nuxt.js release
fetch () {
  if (process.client) {
    // load data
  }
}

[DreaMinder]

If that JSON data is required for SSR, you still have to fetch it with asyncData and it should be in your site for client hydration. Inline JSON object saves you extra requests that you have to make on client for hydration. And, as far as I know, in current implementation of nuxt.js, there is no way to get rid of it.
What can we implement to overcome this?
1) When client app inits, we make same API requests as in SSR. Lots of problems here: performance decrease and if API content changes between ssr-made request and client-made request, there will be hydration error.
2) Generate your site statically and cache API requests as payload. It can be already achieved but you will have to generate static files every time API content changes. I didn't use it yet, so I may be wrong.
3) While making SSR, to create two separate resources: html page and payload. Payload may be fetched using server push to make performance even better. But it sounds like hard to implement.

[clarkdo]

As @DreaMinder said, if you skip server side data fetching, it will lead to a hydration error, vue will give a warning.

[KonstantinVlasov]

Hi, guys! Just curious, is it possible to move this JSON to separate js bundle? Then we can greatly reduce HTML size and the page will be loaded much faster.
For example, some of my pages have:
clean HTML: 5kb
CSS: 15kb
JSON: 80kb

The user should download 100kb to see the initial page. If we move JSON to bundle, then it will be 20kb.

I know, that it's can be tricky because this JSON can be unique every time. That's why I'm just curious :)

[Updated] Oh, I see that @DreaMinder already suggested this way.

[DreaMinder]

@KonstantinVlasov Possible but pointless. Bad solution.
JSON payload is different for every dynamic route. If your site is bigger then 2-3 pages, then JSON payloads of different pages will be stored in one file.
B-sides bundle is for code, not for data.
If you want to store JSON separately from html, read my previous comment.

[qm3ster]

@KonstantinVlasov @clarkdo It's already at the end of the html, but if it's an inline script we can't defer it.
Maybe that's a good enough reason to break it out into a separate file?

[DreaMinder]

It would be really nice to implement JSON payload in separate file, at least for nuxt generate.

1. In some cases window.NUXT object is huge. And for some crazy reasons I don't I want search bot to crawl my site with JSON bloat.
2. Moving JSON to separate file will decrease time to first paint.
3. If I use "nuxt generate" to generate static cache of dynamic site, data of SSR-version may become incostistent comparing to SPA-version. Because pre-generated SSR-markup based on data fetched at the time of generation and SPA-verstion always gets fresh data from API. Having payload JSON files behind .html files, would make possible SPA version to always get the same data as pregenerated files (even if it outdated compared to API).
4. If I use Nuxt as a static generator with dynamic routes, I still should run API server? Separated JSON payload file would solve this issue, coz SPA-version could use this file instead of API.

[qm3ster]

Noticed something else here, it's not great that it's JSON encoded. It's a lot of extra symbols such as quoting everything.
And yet it is then parsed inline as JS.
It should either be:

• a string that's JSON.parsed on next frame (better in a custom tag and not a <script>window.obj="stringue"</script> notation to avoid all parsing)
• a JS object without those superfluous symbols
• an external json indeed (possible optimisation is HTTP/2 push)
• a JS module that's import()ed asynchronously :thinking: (HTTP/2 push again)

[DreaMinder]

I made a module that partially solves the issue https://github.com/DreaMinder/nuxt-payload-extractor
It extracts JSON payload to external file.
But it only works for nuxt generate.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.