Improve performance by serving __NEXT_DATA__ in a seperat request

Currently I am working on an i18n solution with my nextjs app. In general I don’t want to include all the text strings with the initial page load. Especially with huge pages (think of wikipedia or a terms and condition page). All those text strings are already part of the server side rendered document. Why include it again in __NEXT_DATA__ and add it into the initial page load, when it is not needed for the initial display of the page?

I am not very familiar with all the internals but this goes for a lot of data. Lots of us are using redux. The initial redux store doesn’t have to be part of the first load.

This might not be a huge performance improvement for many websites but for some of them it is. And I don’t see any benefit in serving this data with the first load.

What do you think?

[clintonhalpin]

Hey Ya’ll, I saw this issue so rather than creating a new one I thought I’d tack on my notes on this. Also using Redux.

We are currently rebuilding our website https://quotecatalog.com in Next.js. The issue I’m having is that the document payload is much larger than I’d like.

After some exploration it seems like the root cause is that the app’s props are included in __NEXT_DATA__.props.

Having the smallest possible document payload is critical for getting a good Lighthouse Score and for users on not great mobile Networks.

Benchmarks

• Homepage ( https://quotecatalog.com )
  • Props = ~1MB
  • w/o Props = 204kb
• Permalink ( https://quotecatalog.com/quote/brianna-wiest-she-wants-you-t-lawdZL1/ )
  • Props = 183kb
  • w/o Props = 32kb

(Note these are from our staging server but I included the live URL’s for reference, that app is currently in Angular)

My Workaround

I got the benchmarks above by creating a custom NextScript Component the only difference is that it assigns __NEXT_DATA__.props to an empty object.

With this approach the app will render, but once the client side javascript kicks in the pages break because the props aren’t there to check. I think this happens in client/index.js but I haven’t been able to totally figure it out.

You can see the CustomNextScript component here but the most important part is that in the NextScript render method I do the following:

__NEXT_DATA__.props = {};

Possibly Related issues

1. zeit/next.js#2389

Maybe this visual helps?

Questions

1. Why are props included in the __NEXT_DATA__ payload?
2. How difficult would this be to fix?
3. Would you accept a PR if I could fix this?

[lencioni]

@addyosmani recently published some advice on the v8 blog about parsing JSON, and recommends using JSON.parse with a string literal for optimal speed.

In response, @HenrikJoreteg did some profiling of a few different approaches for reading Redux state from the server into the client, and found good performance improvements for using JSON.parse over even <script type="application/json">.

@timneutkens do you think this approach would have value for next.js?