Cloudflare Developers•3y ago

CSS is different in pages, vs local environment.

Below are previews for local vs pages renders.

SmultarOP•6/1/23, 7:43 PM

If anyone has a response, please ping me when you reply.

SSmultar If anyone has a response, please ping me when you reply.

Chaika•6/1/23, 7:54 PM

Is this on the custom domain? If so, there are a few zone settings that could be interfering:
https://developers.cloudflare.com/pages/platform/debugging-pages/#differences-between-pagesdev-and-custom-domains, like Auto Minify or Rocket loader

Debugging Pages · Cloudflare Pages docs

When setting up your Pages project, you may encounter various errors that prevent you from successfully deploying your site. This guide gives an …

CChaika Is this on the custom domain? If so, there are a few zone settings that could be...

SmultarOP•6/1/23, 7:54 PM

Yes

Chaika•6/1/23, 7:55 PM

If it shows right on the pages.dev, then def one of those differences above
If it shows wrong on the pages.dev, sounds like an issue with the specific framework you are using, which would need more info

SmultarOP•6/1/23, 7:55 PM

Shows incorrectly on pages domain as well.

CChaika If it shows right on the pages.dev, then def one of those differences above If i...

SmultarOP•6/1/23, 7:56 PM

I'm currently using NextJS 13.4.4 with the

App

App

directory.

Chaika•6/1/23, 7:59 PM

Can you link the site/broken page?
I don't know too much about nextjs, might be something @5927 (a next-on-pages maintainer) could help with if they have a sec.
I would be curious if it works/deploys fine on Vercel but not CF Pages

SmultarOP•6/1/23, 8:00 PM

https://aetherlink.pages.dev > https://preview.aetherlink.app

CChaika Can you link the site/broken page? I don't know too much about nextjs, might be ...

SmultarOP•6/1/23, 8:00 PM

I'll test on vercel really quickly

James•6/1/23, 8:01 PM

This is what I get on your site

SmultarOP•6/1/23, 8:01 PM

what on earth

James•6/1/23, 8:02 PM

Could it be possible that your browser has cached old CSS? Try refreshing your browser cache

Chaika•6/1/23, 8:03 PM

Looks like minification is causing some of the asset hashes not to match on your custom domain as well

SmultarOP•6/1/23, 8:03 PM

I have even tried

SmultarOP•6/1/23, 8:03 PM

SmultarOP•6/1/23, 8:04 PM

Using disable cache

SmultarOP•6/1/23, 8:04 PM

I assume this doesn't affect the html path?

CChaika Looks like minification is causing some of the asset hashes not to match on your...

SmultarOP•6/1/23, 8:06 PM

How would one resolve this issue? Is it a local issue only?

Chaika•6/1/23, 8:06 PM

Disable minification on the custom domain via zone settings:
https://developers.cloudflare.com/pages/platform/debugging-pages/#differences-between-pagesdev-and-custom-domains
(log in to the Cloudflare dashboard

Speed > Optimization > Auto Minify

CChaika Disable minification on the custom domain via zone settings: https://developers...

SmultarOP•6/1/23, 8:09 PM

Alrighty, did that.

SmultarOP•6/1/23, 8:09 PM

Seeing the changes now. Thank you for your time.

SmultarOP•6/1/23, 8:09 PM

Now, our of curiousity, how would one clear the brower's cache for the CSS items?

Chaika•6/1/23, 8:12 PM

Clear? In settings
Bypass? Using that "Disable Cache" switch or Shift+F5
You're probably hitting edge cache though if it's on your Custom Domain, which you can disable via a Page Rule or a Cache Rule

SmultarOP•6/1/23, 8:13 PM

gotcha

SmultarOP•6/1/23, 8:13 PM

So, when I make CSS changes to my website they won't update instantly won't they.. @chaika.me

SmultarOP•6/1/23, 8:14 PM

I have caching enabled on all things, to save me bandith and etc.

Chaika•6/1/23, 8:14 PM

Pages doesn't recommend using edge cache in front of it. Internally it has its own cache, and you get unlimited static requests

SmultarOP•6/1/23, 8:15 PM

THAT NEATS

SmultarOP•6/1/23, 8:15 PM

Alrighty, now I got to figure out how to add it as an exception to the pages domain

James•6/1/23, 8:16 PM

And for the actual static files (/_next/static/_next/static), we add a rule so that the function isn't invoked for them as well, so there should be no worries about them invoking the worker we generate in that department

SmultarOP•6/1/23, 8:17 PM

Why is this community sooo welcoming to nextjs vs the other options....

SSmultar Alrighty, now I got to figure out how to add it as an exception to the pages dom...

Chaika•6/1/23, 8:17 PM

can use Cache Rules pretty easily
Magic Link: https://dash.cloudflare.com/?to=/:account/:zone/caching/cache-rules/new

SmultarOP•6/1/23, 8:17 PM

Would it be these caching options?

SmultarOP•6/1/23, 8:17 PM

James•6/1/23, 8:18 PM

Also fwiw, adding cache rules on top of Pages when using Next.js can also result in RSC payloads being cached instead of the HTML responses at the moment (Next.js are exploring workarounds for this), which is another reason to avoid it