Nextjs app created with Shopify CLI tool, app size is massive?
Firstly, hi everyone, I am new to Shopify development and would like to make my first app soon so I've started playing with all those great development tools created by the Shopify team.
I have a background in the iOS development then when it comes to do any backend work I usually go with PHP and Codeigniter. For any frontend work I mostly used jQuery rather than any of the new approaches of the modern web development technologies. Quite recently I worked for the client who needed a very complicated CMS that would manage the iOS app we build for him and I decided to use reactjs for the very first time. I started simple, I've used CRA and apart from the react-router I did not use any other big libraries or frameworks. I have to say I loved it! It was a great experience and jQuery feels like something from a different era comparing to reactjs.
Well, after seeing tools like Polaris or Shopify CLI tool, I thought it's no brainer and I decided that I would like to build an Embedded Shopify App, using App Bridge with reactjs and nextjs.
I installed the Shopify CLI tool, created a template app, got the ngrok tunnel running, created development store, installed new app that points to my local host and voila after few hours I had a working example in my Shopify admin panel! Super exciting, it wasn't that hard as I thought it will be!
Once I got that bit running I've looked properly into the code generated by the CLI tool and I have to say that after few days my brain was boiling, I thought I know how to build reactjs app now, but I guess I barely scratched the surface 😉 I've been learning about all these libraries/frameworks that are added to the project, nextjs, Koa, Koa Server, Apollo .... that's a lot to handle for someone who never use them before, but I didn't come here to talk about my learning curve.
Thing, that started to worry me, was that the template app that I was running in the admin panel is very slow to start with, it takes almost 8 seconds to see the example "Shopify app with Node and React" label. My first thought was that it's my server's fault as I am running it locally through the ngrok tunnel, I assumed it will be slow due my broadband speed etc. , but then I've looked into the network requests made after the app starts and it looks like my server serves over 6MB of data on the initial load (see the attached image). What the heck? 6MB to display a single label and I haven't even added my code yet?
As I am new to nextjs and server side js development can someone enlighten me please, am I doing something wrong? Is there any way to optimise it? Or I am just experiencing "the madness of modern Javascript" that everyone talks about?
