Next.js: Response size of HTML file is too large

[narikei]

I think next.js is a very good concept.
but, I tried running the todo application using next.js.

The size of this application is greater than 500KB.
Even though gzip is considered, it is difficult to use it for Production.
__NEXT_DATA__ seems to be bloated.

example:
https://zeit.co/ 1.6 MB

[arunoda]

First of all https://zeit.co uses an older unpublished version of Next.js.

We have few things takes the size of the:

• commons.js - All of the common modules used in all your pages
• main.js - Runtime of Next.js
• __NEXT_DATA__
  
  
  
  • source code of the current viewing page
  
  
  • data you sent via getInitialProps
  
  

So one thing to look at the data you passed in the getInitialProps. That's something you can configure easily.

We've done a lot of optimization to the current master. (It's not available in NPM yet). So, the size you get is pretty decent. (I am not saying it's the smallest).

Here's a screenshot of current master and it's file sizes. (not gzipped)
(Make sure to run it in the production mode)

[narikei]

Thank you @arunoda. I'm looking forward!

[rauchg]

It's tradeoffs. If you want the React programming model, we have to ship the source of the component alongside the HTML. Otherwise, you can print out some HTML and ship code that doesn't know how to re-render completely, but only knows how to modify it (e.g.: the jQuery way). It's up to you to decide what model you prefer.

[rauchg]

That said, we're always looking for ways to ship lightweight stuff. The focus after 2.0 stable is not to add more features but to make everything faster and speedier 😉

[rauchg]

The really cool thing is that for many applications where the user is interesting in consuming some data first (then acting on it), the server-rendered HTML+CSS does a great job _while_ the JS loads.

[pesho]

It's tradeoffs. If you want the React programming model, we have to ship the source of the component alongside the HTML.

You don't have to ship it inline in the HTML. This is quite off-putting honestly. Include it as a static bundled .js file, yes. Don't serve it as part of __NEXT_DATA__ which is generated/rendered dynamically by the server on each page load.

[jhurliman]

Should a separate issue be opened regarding shipping JS as a separate bundled.js file?

[plxel]

have same issue too
I got big js script in html source when using custom express server
Without custom server, looks like there is no "component" property in __NEXT_DATA__

I think @pesho is right, there is no need to inline it in the HTML

[mrdulin]

same issue.

The html from server contains __NEXT_DATA__, it's not good for performance and seo!!