diff --git a/client/utils/hydrateWrapper.tsx b/client/utils/hydrateWrapper.tsx
index 521762d4de..5a07eb30b0 100644
--- a/client/utils/hydrateWrapper.tsx
+++ b/client/utils/hydrateWrapper.tsx
@@ -32,10 +32,10 @@ export const hydrateWrapper = (Component) => {
 		}
 
 		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-		const viewData = JSON.parse(document.getElementById('view-data').getAttribute('data-json'));
+		const viewData = JSON.parse(document.getElementById('view-data')?.innerText);
 		const chunkName = JSON.parse(
 			// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-			document.getElementById('chunk-name').getAttribute('data-json'),
+			document.getElementById('chunk-name').innerText,
 		);
 		if (!isLocalEnv(window)) {
 			setupHeap(initialData);
diff --git a/client/utils/initialData.ts b/client/utils/initialData.ts
index b777f10ae2..9a91e09d23 100644
--- a/client/utils/initialData.ts
+++ b/client/utils/initialData.ts
@@ -5,7 +5,7 @@ let initialData;
 export const getClientInitialData = () => {
 	if (!initialData) {
 		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-		initialData = JSON.parse(document.getElementById('initial-data').getAttribute('data-json'));
+		initialData = JSON.parse(document.getElementById('initial-data').innerText);
 	}
 	return initialData;
 };
diff --git a/server/Html.tsx b/server/Html.tsx
index 91f337878e..23dee69f92 100644
--- a/server/Html.tsx
+++ b/server/Html.tsx
@@ -2,7 +2,7 @@ import path from 'path';
 import React from 'react';
 import classNames from 'classnames';
 import App from 'containers/App/App';
-import { CustomScripts, InitialData } from 'types';
+import type { CustomScripts, InitialData } from 'types';
 
 const manifest = require(path.join(
 	__dirname,
@@ -123,19 +123,20 @@ const Html = (props: Props) => {
 				/>
 				<script
 					id="initial-data"
-					type="text/plain"
-					data-json={JSON.stringify(props.initialData)}
+					type="application/json"
+					dangerouslySetInnerHTML={{ __html: JSON.stringify(props.initialData) }}
 				/>
 				<script
 					id="view-data"
-					type="text/plain"
-					data-json={JSON.stringify(props.viewData)}
+					type="application/json"
+					dangerouslySetInnerHTML={{ __html: JSON.stringify(props.viewData) }}
 				/>
 				<script
 					id="chunk-name"
-					type="text/plain"
-					data-json={JSON.stringify(props.chunkName)}
+					type="application/json"
+					dangerouslySetInnerHTML={{ __html: JSON.stringify(props.chunkName) }}
 				/>
+
 				<script src={getPath('vendor', 'js')} />
 				<script src={getPath('main', 'js')} />
 				{customScripts?.js && (