Nuxt.js: on inspecting the sourcecode the block of window.__NUXT__ is huge

[dohomi]

Hello

I inspect the page source of my demo page and found out, that more content than my actual html is the window.__NUXT__ script block:

<script type="text/javascript">window.__NUXT__={"layout":"pageView","data":[{}],"error":null,"state":{"cmsLoading":false,"locale":"de","authUserId":null,"authUser":null,"authToken":null,"drawer":false,"mainSearch":null,"searchActive":false,"showMediaLibrary":false,"mediaLibraryItem":{"id":null},"mediaOrderBy":"createdAt_DESC","hasJumbotron":true,"filter":{},"loading":true,"error":null,"updating":false,"canSave":false,"dirty":null,"triggerSave":false,"deleting":false,"mediaDeleting":false,"pageTemplates":{},"allArticles":{},"Article":{},"allPages":{},"Page":{"id":"cj8yk94x40y8p01803f0g3u7i","abstract":null,"description":null,"title":"Deutscher Title","subtitle":null,"published":true,"navTitle":null,"keywords":null,"languageKey":"DE","navHide":null,"excludeFromUrl":false,"slug":"DE","urlAliases":[{"id":"cj8yk957b0y9b0180qbtw93sr","path":"DE","isActive":true,"__typename":"UrlAlias"}],"defaultLanguage":null,"additionalLanguages":[],"parent":null,"__typename":"Page","contents":[{"languageKey":"DE","id":"cj8zcc3kepukq0110j9pnmtwe","sorting":0,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zcc3kfpukr01107f2c6xlk","description":"\u003Cp\u003EPowered by Vuetify\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cspan class=\"ql-size-normal-button-primary\"\u003EGET STARTED\u003C\u002Fspan\u003E\u003C\u002Fp\u003E","header":"Parallax Template","headerLayout":"H2","layoutPanel":"Parallax","imageOrient":null,"classNames":["header-display-2","text-xs-center"],"imageColumnSize":null,"fileReferences":[{"id":"cj8zsgdrk6cw00110hl9wvsvx","title":null,"alternative":null,"caption":null,"linkSlug":null,"linkOpenExternal":null,"linkId":null,"linkType":null,"sorting":null,"resize":"x600","crop":null,"file":{"contentType":"image\u002Fjpeg","name":"hero.jpeg","secret":"cj8zsg7y400ac01579a30ar32","url":"https:\u002F\u002Ffiles.graph.cool\u002Fcj8yj66xc01740164lh5bv4fz\u002Fcj8zsg7y400ac01579a30ar32","id":"cj8zsg9e400ad0157zafjyxst","__typename":"File"},"__typename":"FileReference"}],"__typename":"ContentTextImage"},"contentLayout":null,"contentReadMore":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zsu3yy6nky0110o9n441eu","sorting":1,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zsu3yy6nkz0110unyzn6nb","description":"\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003ECras facilisis mi vitae nunc\u003C\u002Fp\u003E","header":"The best way to start developing","headerLayout":"H4","layoutPanel":null,"imageOrient":null,"classNames":["header-display-1","header-text-xs-center","text-xs-center"],"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"contentLayout":null,"contentReadMore":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zsx0q16pw10110x6e3uyzp","sorting":2,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":null,"contentLayout":{"id":"cj8zsx0q26pw20110dxsd9udl","type":"Columns","classNames":["content-boxed","white","pt-3"],"elements":[{"languageKey":"DE","id":"cj8ztljra77rz01390eh738iu","sorting":0,"published":true,"defaultLanguage":null,"layoutColumn":"Column1","layoutIndex":1,"contentDivider":{"id":"cj8ztljrb77s00139r0dwsc2s","classNames":[],"icon":"color_lens","iconSize":"Large","__typename":"ContentDivider"},"contentMedia":null,"contentTextImage":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8ztmt3i78gw0139eulo43vm","sorting":0,"published":true,"defaultLanguage":null,"layoutColumn":"Column2","layoutIndex":2,"contentDivider":{"id":"cj8ztmt3i78gx0139t3cz6fii","classNames":[],"icon":"highlight","iconSize":"Large","__typename":"ContentDivider"},"contentMedia":null,"contentTextImage":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8ztnmc0795c0139vf5gwh30","sorting":0,"published":true,"defaultLanguage":null,"layoutColumn":"Column3","layoutIndex":3,"contentDivider":{"id":"cj8ztnmc0795d01391eb59po0","classNames":[],"icon":"build","iconSize":"Large","__typename":"ContentDivider"},"contentMedia":null,"contentTextImage":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zsxx006pm001393644rhlx","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column1","layoutIndex":1,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zsxx006pm10139dfcwxfuy","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Material Design","headerLayout":"H3","layoutPanel":null,"imageOrient":null,"classNames":["header-text-xs-center"],"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zsykbr6pzz01398bnq56b1","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column2","layoutIndex":2,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zsykbs6q000139ilgp6j4z","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Fast development","headerLayout":"H3","layoutPanel":null,"imageOrient":null,"classNames":["header-text-xs-center"],"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zsz71o6qeh0139kuzo6mht","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column3","layoutIndex":3,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zsz71o6qei01399c50fe6y","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Completely Open Sourced","headerLayout":"H3","layoutPanel":null,"imageOrient":null,"classNames":["header-text-xs-center"],"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"contentHtml":null,"__typename":"Content"}],"__typename":"ContentLayout"},"contentReadMore":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zt2bsx6tk80110u9dzknsq","sorting":3,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zt2bsx6tk90110ozaz1neo","description":"\u003Cp\u003E\u003Cem\u003EKick-start your application today\u003C\u002Fem\u003E\u003C\u002Fp\u003E","header":"Web development has never been easier","headerLayout":"H4","layoutPanel":"Parallax","imageOrient":null,"classNames":["header-display-1"],"imageColumnSize":null,"fileReferences":[{"id":"cj8zt301k6sv60139ykz7eebc","title":null,"alternative":null,"caption":null,"linkSlug":null,"linkOpenExternal":null,"linkId":null,"linkType":null,"sorting":null,"resize":"x300","crop":null,"file":{"contentType":"image\u002Fjpeg","name":"section.jpeg","secret":"cj8zt2uqm00ag0157ttvwm4ko","url":"https:\u002F\u002Ffiles.graph.cool\u002Fcj8yj66xc01740164lh5bv4fz\u002Fcj8zt2uqm00ag0157ttvwm4ko","id":"cj8zt2wk100ah01575lgy1neb","__typename":"File"},"__typename":"FileReference"}],"__typename":"ContentTextImage"},"contentLayout":null,"contentReadMore":null,"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zc959xpt590110dg8bkf97","sorting":7,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":null,"contentLayout":{"id":"cj8zc959xpt5a0110qmh4r027","type":null,"classNames":["content-boxed","mt-5"],"elements":[{"languageKey":"DE","id":"cj8z9hsywn9zt01395v475p88","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":null,"layoutIndex":2,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8z9hsyxn9zu0139w3bqs4s2","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003Ephone777-867-5309\u003C\u002Fli\u003E\u003Cli\u003EplaceChicago, US\u003C\u002Fli\u003E\u003Cli\[email protected]\u003C\u002Fli\u003E\u003C\u002Ful\u003E","header":"Contact Us","headerLayout":"H4","layoutPanel":null,"imageOrient":null,"classNames":[],"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"contentHtml":null,"__typename":"Content"},{"languageKey":"DE","id":"cj8zc9ixoprr50139gi5rxt2k","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column1","layoutIndex":1,"contentDivider":null,"contentMedia":null,"contentTextImage":{"id":"cj8zc9ixpprr60139ehigj2fz","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Company info","headerLayout":"H4","layoutPanel":null,"imageOrient":null,"classNames":null,"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"contentHtml":null,"__typename":"Content"}],"__typename":"ContentLayout"},"contentReadMore":null,"contentHtml":null,"__typename":"Content"}]},"allUrlAliases":{},"toggleUrlAliasRefetch":false,"toggleArticleRefetch":false,"isContentEditMode":false,"contentEditDialogData":{"id":null,"content":{"id":null},"pageProps":null,"dialogType":null},"contentEditLinkDialogActive":false,"contentCutData":{"id":null},"contentPublishData":{"id":null,"published":false},"contentPasteData":{"id":null},"contentMoveData":{"id":null},"contentCopyData":{"id":null},"contentCopyPasteData":{"id":null}},"serverRendered":true,"apollo":{"defaultClient":{"apollo":{"data":{"ROOT_QUERY":{"allPageTemplates":[],"UrlAlias({\"path\":\"DE\"})":{"type":"id","id":"$ROOT_QUERY.UrlAlias({\"path\":\"DE\"})","generated":true}},"cj8yk94x40y8p01803f0g3u7i":{"id":"cj8yk94x40y8p01803f0g3u7i","abstract":null,"description":null,"title":"Deutscher Title","subtitle":null,"published":true,"navTitle":null,"keywords":null,"languageKey":"DE","navHide":null,"excludeFromUrl":false,"slug":"DE","urlAliases":[{"type":"id","id":"cj8yk957b0y9b0180qbtw93sr","generated":false}],"defaultLanguage":null,"additionalLanguages":[],"parent":null,"__typename":"Page","contents({\"orderBy\":\"sorting_ASC\"})":[{"type":"id","id":"cj8zcc3kepukq0110j9pnmtwe","generated":false},{"type":"id","id":"cj8zsu3yy6nky0110o9n441eu","generated":false},{"type":"id","id":"cj8zsx0q16pw10110x6e3uyzp","generated":false},{"type":"id","id":"cj8zt2bsx6tk80110u9dzknsq","generated":false},{"type":"id","id":"cj8zc959xpt590110dg8bkf97","generated":false}]},"cj8yk957b0y9b0180qbtw93sr":{"id":"cj8yk957b0y9b0180qbtw93sr","path":"DE","isActive":true,"__typename":"UrlAlias"},"cj8zcc3kepukq0110j9pnmtwe":{"languageKey":"DE","id":"cj8zcc3kepukq0110j9pnmtwe","sorting":0,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zcc3kfpukr01107f2c6xlk","generated":false},"contentLayout":null,"contentReadMore":null,"contentHtml":null,"__typename":"Content"},"cj8zcc3kfpukr01107f2c6xlk":{"id":"cj8zcc3kfpukr01107f2c6xlk","description":"\u003Cp\u003EPowered by Vuetify\u003C\u002Fp\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cspan class=\"ql-size-normal-button-primary\"\u003EGET STARTED\u003C\u002Fspan\u003E\u003C\u002Fp\u003E","header":"Parallax Template","headerLayout":"H2","layoutPanel":"Parallax","imageOrient":null,"classNames":{"type":"json","json":["header-display-2","text-xs-center"]},"imageColumnSize":null,"fileReferences":[{"type":"id","id":"cj8zsgdrk6cw00110hl9wvsvx","generated":false}],"__typename":"ContentTextImage"},"cj8zsgdrk6cw00110hl9wvsvx":{"id":"cj8zsgdrk6cw00110hl9wvsvx","title":null,"alternative":null,"caption":null,"linkSlug":null,"linkOpenExternal":null,"linkId":null,"linkType":null,"sorting":null,"resize":"x600","crop":null,"file":{"type":"id","id":"cj8zsg9e400ad0157zafjyxst","generated":false},"__typename":"FileReference"},"cj8zsg9e400ad0157zafjyxst":{"contentType":"image\u002Fjpeg","name":"hero.jpeg","secret":"cj8zsg7y400ac01579a30ar32","url":"https:\u002F\u002Ffiles.graph.cool\u002Fcj8yj66xc01740164lh5bv4fz\u002Fcj8zsg7y400ac01579a30ar32","id":"cj8zsg9e400ad0157zafjyxst","__typename":"File"},"cj8zsu3yy6nky0110o9n441eu":{"languageKey":"DE","id":"cj8zsu3yy6nky0110o9n441eu","sorting":1,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zsu3yy6nkz0110unyzn6nb","generated":false},"contentLayout":null,"contentReadMore":null,"contentHtml":null,"__typename":"Content"},"cj8zsu3yy6nkz0110unyzn6nb":{"id":"cj8zsu3yy6nkz0110unyzn6nb","description":"\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003ECras facilisis mi vitae nunc\u003C\u002Fp\u003E","header":"The best way to start developing","headerLayout":"H4","layoutPanel":null,"imageOrient":null,"classNames":{"type":"json","json":["header-display-1","header-text-xs-center","text-xs-center"]},"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"cj8zsx0q16pw10110x6e3uyzp":{"languageKey":"DE","id":"cj8zsx0q16pw10110x6e3uyzp","sorting":2,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":null,"contentLayout":{"type":"id","id":"cj8zsx0q26pw20110dxsd9udl","generated":false},"contentReadMore":null,"contentHtml":null,"__typename":"Content"},"cj8zsx0q26pw20110dxsd9udl":{"id":"cj8zsx0q26pw20110dxsd9udl","type":"Columns","classNames":{"type":"json","json":["content-boxed","white","pt-3"]},"elements({\"orderBy\":\"sorting_ASC\"})":[{"type":"id","id":"cj8ztljra77rz01390eh738iu","generated":false},{"type":"id","id":"cj8ztmt3i78gw0139eulo43vm","generated":false},{"type":"id","id":"cj8ztnmc0795c0139vf5gwh30","generated":false},{"type":"id","id":"cj8zsxx006pm001393644rhlx","generated":false},{"type":"id","id":"cj8zsykbr6pzz01398bnq56b1","generated":false},{"type":"id","id":"cj8zsz71o6qeh0139kuzo6mht","generated":false}],"__typename":"ContentLayout"},"cj8ztljra77rz01390eh738iu":{"languageKey":"DE","id":"cj8ztljra77rz01390eh738iu","sorting":0,"published":true,"defaultLanguage":null,"layoutColumn":"Column1","layoutIndex":1,"contentDivider":{"type":"id","id":"cj8ztljrb77s00139r0dwsc2s","generated":false},"contentMedia":null,"contentTextImage":null,"contentHtml":null,"__typename":"Content"},"cj8ztljrb77s00139r0dwsc2s":{"id":"cj8ztljrb77s00139r0dwsc2s","classNames":{"type":"json","json":[]},"icon":"color_lens","iconSize":"Large","__typename":"ContentDivider"},"cj8ztmt3i78gw0139eulo43vm":{"languageKey":"DE","id":"cj8ztmt3i78gw0139eulo43vm","sorting":0,"published":true,"defaultLanguage":null,"layoutColumn":"Column2","layoutIndex":2,"contentDivider":{"type":"id","id":"cj8ztmt3i78gx0139t3cz6fii","generated":false},"contentMedia":null,"contentTextImage":null,"contentHtml":null,"__typename":"Content"},"cj8ztmt3i78gx0139t3cz6fii":{"id":"cj8ztmt3i78gx0139t3cz6fii","classNames":{"type":"json","json":[]},"icon":"highlight","iconSize":"Large","__typename":"ContentDivider"},"cj8ztnmc0795c0139vf5gwh30":{"languageKey":"DE","id":"cj8ztnmc0795c0139vf5gwh30","sorting":0,"published":true,"defaultLanguage":null,"layoutColumn":"Column3","layoutIndex":3,"contentDivider":{"type":"id","id":"cj8ztnmc0795d01391eb59po0","generated":false},"contentMedia":null,"contentTextImage":null,"contentHtml":null,"__typename":"Content"},"cj8ztnmc0795d01391eb59po0":{"id":"cj8ztnmc0795d01391eb59po0","classNames":{"type":"json","json":[]},"icon":"build","iconSize":"Large","__typename":"ContentDivider"},"cj8zsxx006pm001393644rhlx":{"languageKey":"DE","id":"cj8zsxx006pm001393644rhlx","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column1","layoutIndex":1,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zsxx006pm10139dfcwxfuy","generated":false},"contentHtml":null,"__typename":"Content"},"cj8zsxx006pm10139dfcwxfuy":{"id":"cj8zsxx006pm10139dfcwxfuy","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Material Design","headerLayout":"H3","layoutPanel":null,"imageOrient":null,"classNames":{"type":"json","json":["header-text-xs-center"]},"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"cj8zsykbr6pzz01398bnq56b1":{"languageKey":"DE","id":"cj8zsykbr6pzz01398bnq56b1","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column2","layoutIndex":2,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zsykbs6q000139ilgp6j4z","generated":false},"contentHtml":null,"__typename":"Content"},"cj8zsykbs6q000139ilgp6j4z":{"id":"cj8zsykbs6q000139ilgp6j4z","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Fast development","headerLayout":"H3","layoutPanel":null,"imageOrient":null,"classNames":{"type":"json","json":["header-text-xs-center"]},"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"cj8zsz71o6qeh0139kuzo6mht":{"languageKey":"DE","id":"cj8zsz71o6qeh0139kuzo6mht","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column3","layoutIndex":3,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zsz71o6qei01399c50fe6y","generated":false},"contentHtml":null,"__typename":"Content"},"cj8zsz71o6qei01399c50fe6y":{"id":"cj8zsz71o6qei01399c50fe6y","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Completely Open Sourced","headerLayout":"H3","layoutPanel":null,"imageOrient":null,"classNames":{"type":"json","json":["header-text-xs-center"]},"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"cj8zt2bsx6tk80110u9dzknsq":{"languageKey":"DE","id":"cj8zt2bsx6tk80110u9dzknsq","sorting":3,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zt2bsx6tk90110ozaz1neo","generated":false},"contentLayout":null,"contentReadMore":null,"contentHtml":null,"__typename":"Content"},"cj8zt2bsx6tk90110ozaz1neo":{"id":"cj8zt2bsx6tk90110ozaz1neo","description":"\u003Cp\u003E\u003Cem\u003EKick-start your application today\u003C\u002Fem\u003E\u003C\u002Fp\u003E","header":"Web development has never been easier","headerLayout":"H4","layoutPanel":"Parallax","imageOrient":null,"classNames":{"type":"json","json":["header-display-1"]},"imageColumnSize":null,"fileReferences":[{"type":"id","id":"cj8zt301k6sv60139ykz7eebc","generated":false}],"__typename":"ContentTextImage"},"cj8zt301k6sv60139ykz7eebc":{"id":"cj8zt301k6sv60139ykz7eebc","title":null,"alternative":null,"caption":null,"linkSlug":null,"linkOpenExternal":null,"linkId":null,"linkType":null,"sorting":null,"resize":"x300","crop":null,"file":{"type":"id","id":"cj8zt2wk100ah01575lgy1neb","generated":false},"__typename":"FileReference"},"cj8zt2wk100ah01575lgy1neb":{"contentType":"image\u002Fjpeg","name":"section.jpeg","secret":"cj8zt2uqm00ag0157ttvwm4ko","url":"https:\u002F\u002Ffiles.graph.cool\u002Fcj8yj66xc01740164lh5bv4fz\u002Fcj8zt2uqm00ag0157ttvwm4ko","id":"cj8zt2wk100ah01575lgy1neb","__typename":"File"},"cj8zc959xpt590110dg8bkf97":{"languageKey":"DE","id":"cj8zc959xpt590110dg8bkf97","sorting":7,"published":true,"defaultLanguage":null,"contentDivider":null,"contentMedia":null,"contentTextImage":null,"contentLayout":{"type":"id","id":"cj8zc959xpt5a0110qmh4r027","generated":false},"contentReadMore":null,"contentHtml":null,"__typename":"Content"},"cj8zc959xpt5a0110qmh4r027":{"id":"cj8zc959xpt5a0110qmh4r027","type":null,"classNames":{"type":"json","json":["content-boxed","mt-5"]},"elements({\"orderBy\":\"sorting_ASC\"})":[{"type":"id","id":"cj8z9hsywn9zt01395v475p88","generated":false},{"type":"id","id":"cj8zc9ixoprr50139gi5rxt2k","generated":false}],"__typename":"ContentLayout"},"cj8z9hsywn9zt01395v475p88":{"languageKey":"DE","id":"cj8z9hsywn9zt01395v475p88","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":null,"layoutIndex":2,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8z9hsyxn9zu0139w3bqs4s2","generated":false},"contentHtml":null,"__typename":"Content"},"cj8z9hsyxn9zu0139w3bqs4s2":{"id":"cj8z9hsyxn9zu0139w3bqs4s2","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003Ephone777-867-5309\u003C\u002Fli\u003E\u003Cli\u003EplaceChicago, US\u003C\u002Fli\u003E\u003Cli\[email protected]\u003C\u002Fli\u003E\u003C\u002Ful\u003E","header":"Contact Us","headerLayout":"H4","layoutPanel":null,"imageOrient":null,"classNames":{"type":"json","json":[]},"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"cj8zc9ixoprr50139gi5rxt2k":{"languageKey":"DE","id":"cj8zc9ixoprr50139gi5rxt2k","sorting":1,"published":true,"defaultLanguage":null,"layoutColumn":"Column1","layoutIndex":1,"contentDivider":null,"contentMedia":null,"contentTextImage":{"type":"id","id":"cj8zc9ixpprr60139ehigj2fz","generated":false},"contentHtml":null,"__typename":"Content"},"cj8zc9ixpprr60139ehigj2fz":{"id":"cj8zc9ixpprr60139ehigj2fz","description":"\u003Cp\u003ECras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.\u003C\u002Fp\u003E","header":"Company info","headerLayout":"H4","layoutPanel":null,"imageOrient":null,"classNames":null,"imageColumnSize":null,"fileReferences":[],"__typename":"ContentTextImage"},"$ROOT_QUERY.UrlAlias({\"path\":\"DE\"})":{"page":{"type":"id","id":"cj8yk94x40y8p01803f0g3u7i","generated":false},"__typename":"UrlAlias"}}}}}};</script>

My question is, can it be avoided or is it necessary for the client-server hydration?
Thanks
Dominic

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

[dohomi]

The same is visible on the official https://nuxtjs.org: the window.NUXT block is almost bigger than the actual HTML content render size. Is this a downside of SSR or anyhow avoidable?

[homerjam]

Yup this is necessary for client side hydration. It's effectively the same data you would be making an XHR request for anyway in a non-ssr spa. You might try to reduce the size of it by only storing what you need for the route/page to be rendered. I'm looking to adopt GraphQL to help with this myself.

[mtilhan]

Im agree with @dohomi . Our project has a lot of dynamic content inside in a one page. Because of this our rendered page size getting bigger anytime we add a item and i think reducing size of shown data is not a solid solition for this. (Using Store is a other suggested solition but its working same way)

In addition to this question; is this a accepted working style of Nuxt or it can be change in the future?

[homerjam]

What are you agreeing with exactly?

As far as I can see there are two strategies available:

1. Defer loading and rendering part of the page until after initial page view - no SSR. Pros: faster initial load. Cons: no SSR for SEO, XHR request and client side rendering take longer overall and potentially cause jank.

2. SSR - if you reduce the data to only what's strictly necessary for your page there should be less than or equal data transferred than if A: using a traditional CMS or server side MVC framework ie. sending the entire rendered template or B: the combined initial page request + XHR request for the data. Pros: SSR for SEO, simpler implementation and maintenance. Cons: larger/slower initial page request and render.

Pick one.

[mtilhan]

I know those strategies. I agreeing with because when we have rendered content in our page why we see the data on object if we dont using it? Its maybe necessary for Nuxt SSR but its not lookin good for some situations. But based on what you say that's the only way Nuxt SSR works.

[homerjam]

Ah I see what you mean, that does seem like it's unnecessary duplication. However the reason it's there is for the client side hydration - Nuxt/Vue is comparing the DOM with the virtual DOM and it needs the store data to do this. I'm not 💯 on other approaches to hydration but expect it'd be similar - have you experience of doing it with react/angular at all?

[ghost]

What if you didn't require client side hydration on 99% of your pages? Then this seems to double your DOM in the ttfb content. At least gzip compression I think would make the hit not as painful, but ug, I hate to think all that extra junk on all my pages.

Example: Using bacon lipsum (https://baconipsum.com/api/?type=meat-and-filler&paras=50&format=text`)

40.6k (6.92k gzip) - original - 50 paragraphs
21.2k (6.39k gzip) - extra content removed from js

So as you can see, the duplication is mostly taken care of by compression, but still :P

[ghost]

What's interesting is that is seems only data from asyncData is in the client side js.
Here, blah & blarg show up in the DOM, but only blah is in the JS client-side.

<template>
  <section>
    [{{ blah }}][{{ blarg }}]
  </section>
</template>

<script>
export default
{
  data: function () { return {blarg: 'blarg'} },
  async asyncData ({ params }) {
    return { blah: 'blah123' }
  }
}
</script>

[homerjam]

@hecktarzuli yep only asyncData and the store are sent in the window.__NUXT__ object. The data is sent in the component/rendered template.

Fundamentally this duplication is necessary to transfer state from server to client.

It's interesting that gzip does seem to do a great job on the compression though!

[hecktarzuli]

@homerjam am I the only person that thinks using asyncData within a .vue file seems totally wrong? .vue files made sense when Evan You talked about them all being presentation layer. (and the js was only to help client-side stuff) .. but when you start diving into the pres layer FETCHING data things seem horribly wrong

[homerjam]

@realtruckjoshdeltener I do see where you're coming from, however I haven't seen Evan You talk specifically on this subject and I can't speak on behalf of Nuxt's maintainers as to the design decisions that were made.

My guess is that the goals of Nuxt meant that asyncData / fetch was the simplest option. Consider the alternative (which you are free to use if you so wish), you'd need a plugin to populate the store based on the page/route requested and delay the server side render. This would mean abandoning the single file page components only to ensure the separation of concerns - the asyncData / fetch hooks are a convenient tradeoff.

[yakovyarmo]

Can't you try load window.__NUXT__ asynchronously?
Other wise it is not great for SEO

[javenwang]

It seems all store will be rendered to client-side even though you use no state on this page.
https://github.com/nuxt/nuxt.js/blob/dev/lib/app/server.js#L61-L68

  const beforeRender = async () => {
    // Call beforeNuxtRender() methods
    await Promise.all(ssrContext.beforeRenderFns.map((fn) => promisify(fn, { Components, nuxtState: ssrContext.nuxt })))
    <% if (store) { %>
    // Add the state from the vuex store
    ssrContext.nuxt.state = store.state
    <% } %>
  }

[linda8167]

very very big ...

[hecktarzuli]

@linda8167 http compression makes this a non-issue (see my above test - which is now the ghost user)

[manniL]

See #3639 why de-/encryption of window.__NUXT__ likely leads to a performance loss.

[hecktarzuli]

I'm confused. Who is that comment in reference to? I last commented on http compression, not encryption or encoding

[manniL]

@hecktarzuli This was just an additional explanation why we can't make window.__NUXT__ "smaller" :wink:

[cnhyk9527]

maybe u need 'data' to 'asyncData',for example:

    export default {
        data () {
            return {
                bannerImg: require('assets/images/img_aa.png'),
            }
        }
}

to

    export default {
        asyncData () {
            return {
                bannerImg: require('assets/images/img_aa.png'),
            }
        }
}

[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.