8

Because of NEXT_DATA element dom size is getting very high and it is affecting to the performance. Can anyone plz help me to remove NEXT_DATA from dom? I am using full server-side rendering with dynamic routes in next Js.

Archana Agivale
  • 317
  • 1
  • 3
  • 14

6 Answers6

9

TLDR: If you would(/could) remove the __NEXT_DATA__ script tag, React wouldn't be able to hydrate. You either hardcode the data in the page or try to reduce your pageProps payload, returned from getServerSideProps.

I came upon this issue also recently, where I asked myself, why would there be a need for the content to be included in the HTML 2 times.

  1. As the content itself - when your NextJS renders the appropriate HTML and sends it to the client
  2. As JSON in <script> tag - This is because of the need for rehydration on the client side.

"Solutions"

  • Returning only necessary data from data-fetching method - I can recommend reading up on this article Reducing HTML payload with NextJS, in which they talk about formatting / aggregating the necessary data and returning only the needed fields.
  • Not using the data-fetching method and hardcoding static content - The idea behind using static data fetching, if not using revalidate option, is that the content shouldn't be changing (maybe ever). So in that case, why couldn't we hardcode the data in the page itself. Althought downside of this of course is, having to write it all out manually / download the required content to some JSON / object and then use it in the page like so.

Reading

  1. Here's a github link with related discussion in next in which you might be interested.
  2. Blog post about reducing the size of __NEXT_DATA__ - by Liran Cohen.
Jan Karnik
  • 175
  • 1
  • 7
  • Why __NEXT_DATA__ can't be dynamically loaded? – Filipe Giusti Mar 16 '22 at 18:27
  • @FilipeGiusti Since `NEXT_DATA` is added by _NextJS_ you'd probably have to mess with _Next's_ internals.. Otherwise, I don't think it's really possible. Also, _Next_ uses this script tag for some of its own data, like whether or not is this page SSG or SSR, etc.., so the page wouldn't have this data at inicialization. – Jan Karnik Mar 17 '22 at 15:12
  • I'm the author of one of the tools mentioned in the Smashing Magazine article. We've been seeing a lot of size issues with embedded JSON, so now we have an HTML Size Analyzer that lets you inspect the JSON as well: https://www.debugbear.com/html-size-analyzer – Matt Zeunert Mar 29 '22 at 14:45
0

You can do this to not show __NEXT_DATA__:

export const config = {
  unstable_runtimeJS: false,
};

But all JavaScript functionality will not work in frontend.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Abhishek rajpoot
  • 1
  • 1
0

If you come across this issue, make sure you don't have any conditional rendering. This is how I solved this issue myself !

Maxime Crtgn
  • 175
  • 2
  • 10
0

Sometimes you might not require some of the __NEXT_DATA__ props during client side rendering.

To drop those props, you can mutate the NextScript.getInlineScriptSource function in the _document.tsx file. Here is an example:

// _document.tsx

const nextInlineScriptSource = NextScript.getInlineScriptSource;
NextScript.getInlineScriptSource = (props) => {
  if (props?.__NEXT_DATA__?.foo) {
    props.__NEXT_DATA__.foo = 'bar';
  }
  return nextInlineScriptSource(props);
};
Neeraj Rajpurohit
  • 1
0

As of Next.js version 13, the new answer appears to be Server Components:

Components in the Server Component module graph are guaranteed to be only rendered on the server.

https://beta.nextjs.org/docs/rendering/server-and-client-components

It's still in beta, but the idea seems to be that if your app only consists of server components, then it can be rendered completely beforehand, with no need for client-side javascript or __NEXT_DATA__.

nyctef
  • 474
  • 6
  • 12
-1

To remove the rehydration data regex: <script id="__NEXT_DATA__((.|n)*)script> from all pages of the static website run the following command after the build has finished:

find out -name '*.html' | xargs perl -0777 -pi -e 's/<script id="__NEXT_DATA__.*?script>//sg;'

elpbatista
  • 1