Do not send data inside script tag when page is rendered in SSR mode or add different data source when rendering with SSR. #10451
Description
Problem
When you render a page with SSR, the client will get the filled HTML and its data duplicate in the script tag.
For example:
<template>
<div>
<h1>{{ content.title }}</h1>
<p>{{ content.paragraph }}</p>
</div>
</template>
<script>
export default {
data: ()=>({
content: {title: 'TEST', paragraph: 'TEST'}
}),
async fetch(){
const resp = await getContent()
this.content=resp.data
}
}
</script>Will result in HTML like:
<html>
<head>
... some header data
</head>
<body>
... layout and other stuff
<h1>CONTENT HEAD FROM FETCH</h1>
<p>CONTENT PARAGRAPH FROM FETCH</p>
<script>
window.__NUXT__ = (function(params){
return
... some nuxt data
fetch: {
"0": {content: {title: "CONTENT HEAD FROM FETCH", paragraph: "CONTENT PARAGRAPH FROM FETCH"}}
}
})
</script>
</body>
<html>As you can see, the data has been duplicated in HTML and script tag.
Increased HTML size becomes a more significant issue when you have a large amount of fetch data.
Solution
Do not send duplicates inside the script tag. Maybe add some logic for rendering only data that is not reactive and not sent inside the script tag.