Nextjs app created with Shopify CLI tool, app size is massive?

DamianDev
Tourist
3 0 2

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?

Screenshot 2019-07-31 at 10.01.53.png

Replies 3 (3)

DamianDev
Tourist
3 0 2

Ok, I've been playing around and it looks like I've been serving development build rather then production one. I served production build and the size of the app has been reduced to 2.2 MB (better but still not perfect), but this time browser's caching mechanism kicked in and on the subsequent app's start my browser used cached version and it was instant. 

 

Is there anything else that could be done to optimise reactjs + nextjs app, so it's smaller on the first load?

MadGeniusBlink
Shopify Partner
22 0 3

thats weird... how big is your app and what type of app are you build?

 

from my experience in building ecom stores with Shopify using GatsbyJs it's not slow at all...

 

I came to check your post because I am about to build the same type of store I build with gatsby using their shopify source data plugin but in Nextjs... but it seems a bit different in regards to the setting up the app.

 

I am going to give it a try and build out a boilerplate with Nextjs and shopify and get back to you...

mkamalkayani
Shopify Partner
87 8 15

Hi @, I have recently started developing an app using Nextjs and I am also facing the same problem. The app runs fine locally but it is very slow with shopify serve.

Would you like to share your findings?