App loads extremely slow due to Next.js

[hedgerh]

Issue summary

When requesting a page, it can take up to 10 seconds to return a rendered page. I experienced this in the past, and it was resolved as soon as I pulled Next.js out of the app. I installed the Shopify CLI on a new MacBook Pro, created a new Node app, and had the same experience.

After installing the app, the auth callback page takes forever to load and redirect back into the admin dashboard. The embedded app can then take anywhere from 5-10 seconds to load. This consistently happens when refreshing the page.

Do other people not have this experience? It is pretty unbearable, and removing Next.js seems to instantly solve it with instant page loads.

Expected behavior

Next.js resolves page requests quickly when navigating the app or performing a fresh page load. When refreshing the app in the admin panel, it should render immediately with no hanging.

Actual behavior

Page loads, such as after reloading the embedded app in the app panel, can take up to 10 seconds to return. Next.js seems to be hanging for some reason.

Here is a hang after refresh:

https://user-images.githubusercontent.com/2524280/111901044-f4f94580-89f2-11eb-8c8b-50d521454aed.mov

Steps to reproduce the problem

1. Install the Shopify CLI
2. Create a new Node app shopify create node
3. Start the app with shopify serve
4. Visit the url under To install and start using your app, open this URL in your browser to install the app.
5. After instlaling, the app should hang on the auth callback page for a few seconds.
6. After redirecting, the embedded app may take a few seconds to render.
7. Refresh the browser.
8. Notice the app can take 5-20 seconds to load.

Reduced test case

This occurs in a freshly created Node app from Shopify CLI.

Specifications

• Browser: Chrome
• Device: Macbook Pro
• Operating System: MacOS 10.15.3 and 10.15.7

[paulomarg]

Hey @hedgerh, thanks for reporting this. We'll look into that and see if we can identify the root cause of the problem!

[zloz]

Hi @paulomarg , any update on this, I am also facing this issue, I have reported this on various channel also. the bare bone app created by shopify cli serve command takes ~40 sec to load for me and is ~40mb in size. Its really a very tiring development experience for me. The _app.js and index.js pages are nearly 10 mb. attaching a screenshot for reference.

most probably there should be a webpack config or nextjs config here at play. could you shed some light?

[mkamalkayani]

The app performs much better with the production build. Therefore, there is something wrong with the development build.

[elkarouani]

I had the same problem, i use Opera as my main navigator, and each time i run the project with the command "shopify serve", and after I copy/paste the url related to ngrok and entered it in my navigator, i see errors on the console of the navigator as this error : Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR while loading the necessary files like "index.js".

[elkarouani]

I had the same problem, i use Opera as my main navigator, and each time i run the project with the command "shopify serve", and after I copy/paste the url related to ngrok and entered it in my navigator, i see errors on the console of the navigator as this error : Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR while loading the necessary files like "index.js".

I searched about solutions of my problem, i found that it was the bad internet connection, ngrok needs good internet connection in order to well establish the communication between my localhost and my app installed on the development store.

[Draccano]

I have a similar problem. The load time of the app is so terrifying. Waiting for 10-15s for full app load. Has anybody found a solution yet?

[mhaddy]

I gave up and used the Admin API for discrete data pulls. The lack of response from the development team for a known issue that's been around for a couple of years was really discouraging.

[alexrsunrise]

Same issue here. I recently moved from Windows to Mac. Same code base. Ngrok runs almost twice as slow on Mac than on Windows.

[Draccano]

They recommend using their custom solution for the next/Shopify App bridge/ngrok, and in reality, it is the worst option than to do it on its own. xDD

[weiwei1248]

Any update with this issue? Even without using Polaris, the speed increased only 1-2 sec.

[wellbranding]

Any updates? Is it only in development, will production version work well?

[Draccano]

This happens only in development mode.

[l-portet]

Got the same issue happening even though I converted the Next code base to Nuxt. Any updates?

[l-portet]

FYI, I fixed it by removing the Ngrok step in my dev workflow.

You'll need to provide a valid HTTPS endpoint for the OAuth flow (which can not be localhost:3000 for example).

To do so:

• Edit your host file to mirror your localhost to a valid domain (ex: mylocal.com)
• Create local HTTPS certificates with mkcert
• With the certs, launch another Koa server (for the HTTPS) when running on dev
• Optional: Use a reverse proxy if you don't want to use your 443 port for the HTTPS server
• Update your Shopify redirection/whitelist URLs and it should now load pretty instantly

[alexrsunrise]

FYI, I fixed it by removing the Ngrok step in my dev workflow.

You'll need to provide a valid HTTPS endpoint for the OAuth flow (which can not be localhost:3000 for example).

To do so:

• Edit your host file to mirror your localhost to a valid domain (ex: mylocal.com)
• Create local HTTPS certificates with mkcert
• With the certs, launch another Koa server (for the HTTPS) when running on dev
• Optional: Use a reverse proxy if you don't want to use your 443 port for the HTTPS server
• Update your Shopify redirection/whitelist URLs and it should now load pretty instantly

@l-portet Are you opening ports on your local (home/office) router in order to receive calls from Shopify or are you developing on a server?

[l-portet]

Good point. Until now, I did not need to receive calls from Shopify.

I'll probably use a dynamic DNS or launch Ngrok only for that purpose.

[Draccano]

FYI, I fixed it by removing the Ngrok step in my dev workflow.

You'll need to provide a valid HTTPS endpoint for the OAuth flow (which can not be localhost:3000 for example).

To do so:

• Edit your host file to mirror your localhost to a valid domain (ex: mylocal.com)
• Create local HTTPS certificates with mkcert
• With the certs, launch another Koa server (for the HTTPS) when running on dev
• Optional: Use a reverse proxy if you don't want to use your 443 port for the HTTPS server
• Update your Shopify redirection/whitelist URLs and it should now load pretty instantly

Thats great, could you provide more detailed guide?

[mkamalkayani]

I am also able to solve this issue by a different method.

I have added an assetPrefix: http://localhost:8081 in the next.config file. Due to this the application gets the assets directly from the localhost bypassing the tunnel. Also the hmr reloading happens directly form localhost server.

Only the requests directed to the shopify api go through the tunnel.

[Meyenehi]

@mkamalkayani Bless your soul, my dude. I think the main problem is hmr through ngrok, since this doesn't happen on the production build. Bypassing ngrok seems to solve the problem. Issue was bugging me the past couple days. I owe you a beer

[Draccano]

@mkamalkayani, you are awesome and saved me a lot of time. Thank you!

[mkamalkayani]

@Meyenehi @Draccano I am glad it helped. I have been struggling with this for the past 6 months. I tried several workarounds but none of them seem to work satisfactorily.

I always had this thought in my mind that the server is running locally, so why the request has to go through ngrok.

It's encouraging and exciting to see that it's working for you guys too. Wish you a great success with your apps.

[alexrsunrise]

@mkamalkayani Thank you so much! It actually worked for Shopify app as well. It will definitely speed up my development.

By the way, does anyone know how to implement the same solution in Nuxtjs? build: {publicPath: 'http://localhost:3000/_nuxt/} didn't really work.

[mkamalkayani]

@alexrsunrise In Nextjs, the assetPrefix works because the nextjs dev server uses it to serve static assets and the hmr.

For example, here is the code snippet that initiates the websocket connection for the hmr.

https://github.com/vercel/next.js/blob/e3135ccde61c8bed2398962c1a24548a1f774757/packages/next/client/dev/error-overlay/websocket.ts#L25-L57

[alexrsunrise]

@mkamalkayani Thank you so much for the explanation. My question was about Nuxtjs (Vue) though. Nuxtjs and ngrok is also slow for the same reason. I was just wondering if someone tried to implement your solution with Nuxtjs. I tried but failed.

[acrolink]

@alexrsunrise

Any updates on this? Have you found a solution for NuxtJS?

[alexrsunrise]

@alexrsunrise

Any updates on this? Have you found a solution for NuxtJS?

No. I haven't worked with NuxtJS in a little while.

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity. It will be closed if no further action occurs in 14 days.

[github-actions[bot]]

We are closing this issue because it has been inactive for a few months. This probably means that it is not reproducible or it has been fixed in a newer version. If it’s an enhancement and hasn’t been taken on since it was submitted, then it seems other issues have taken priority.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md file for guidelines

Thank you!

[BLamy]

@mkamalkayani In case you forgot you're still awesome.

[mkamalkayani]

@BLamy Thanks. I had in fact forgotten. I am pleased to see my few words saving someone's precious time.