CSS is different in pages, vs local environment.
Below are previews for local vs pages renders.
52 Replies
If anyone has a response, please ping me when you reply.
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 …
Yes
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
Shows incorrectly on pages domain as well.
I'm currently using NextJS 13.4.4 with the
App directory.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
This is what I get on your site
what on earth
Could it be possible that your browser has cached old CSS? Try refreshing your browser cache
Looks like minification is causing some of the asset hashes not to match on your custom domain as well
I have even tried
Using disable cache
I assume this doesn't affect the html path?
How would one resolve this issue? Is it a local issue only?
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
Alrighty, did that.
Seeing the changes now. Thank you for your time.
Now, our of curiousity, how would one clear the brower's cache for the CSS items?
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
gotcha
So, when I make CSS changes to my website they won't update instantly won't they.. @chaika.me
I have caching enabled on all things, to save me bandith and etc.
Pages doesn't recommend using edge cache in front of it. Internally it has its own cache, and you get unlimited static requests
OH
THAT NEATS
Alrighty, now I got to figure out how to add it as an exception to the pages domain
And for the actual static files (
/_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 departmentWhy is this community sooo welcoming to nextjs vs the other options....
can use Cache Rules pretty easily
Magic Link: https://dash.cloudflare.com/?to=/:account/:zone/caching/cache-rules/new
Would it be these caching options?
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 😅
yea don't add one to force caching, just one to disable it for the default assets css/js/etc
You all are holding my hand
Im not use to this, thank you so 
basically....
I'm rebuilding my website to be more serverless and to work into a different CD/CI pipeline...
basically....
I'm rebuilding my website to be more serverless and to work into a different CD/CI pipeline...the original website is well, https://aetherlink.app
Aether Link
Discover hundreds of mods, with a user curated browsing experience.
This is a first
iteration/mvp...
some people thought it was a final product, because of how functional/visually pleasing it was...Haha nice, wishing you all the best with it - you picked the perfect time since next-on-pages just hit v1 the other week 🙂
Ha!
Do you know where I can read up on environment varibles?
I'm trying to put my git hash in the build on page.
All of my versions always have a hash for reference.
Build configuration · Cloudflare Pages docs
You may tell Cloudflare Pages how your site needs to be built as well as where its output files will be located.
You could try using the
CF_PAGES_COMMIT_SHA env variable at build time perhaps?
Oh and you might be needing to inline the env variable at build time, and Next.js only inlines env variables prefixed by NEXT_ and accessed directly on process.env. So, you would have to reexport the env variable but prefix it with NEXT_ so that you can use process.env.NEXT_... and have it inlined properly so that it can be exposed to the browser.
I would assume the following would allow this at the start of your build command, but I haven't tried it: export NEXT_CF_PAGES_COMMIT_SHA="$CF_PAGES_COMMIT_SHA"
https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browsergotcha
so environemnt varibles work differently here in serverless
Also, i'm looking at the metrics, i'm setting gb/s ""HUH""?
Not really, what I was describing is a Next.js limitation if you want to expose a value from an environment variable to the browser when building your Next.js app
Thats kinda scary, unless i'm misunderstanding what gb/s is?
GB/s is a confusing metric. Are you on bundled? If so, ignore it. You only pay per requests, and you get up to 50ms CPU Time (technically a bit more, you can burst/have a p99 above it)
Only on bundled.
I'm curious, of how DDOS as handled with pages?
My main reason to go full server less, instead of using my routing server, was due to some DDOS issues I faced in the past.
If you're worried about a DDoS Attack, you can use the WAF/Zone security settings, and then use CF Access on your preview URLs and Bulk Redirects on your pages.dev itself to redirect
I currently do use the WAF, so glad about that.
I had issues, were people located my origin server, and attacked that directly.
So, instead of having my VPS load balance and monitor my 48 servers.
I decided I want to shift toward you guys more in that managed aspect.
Especailly since, I will be making an public facing API, for the community i'm building this for.
If you're just asking "what happens", well you get unlimited static asset requests. CF Pages uses KV, which caches on every edge, so (to a degree), your site gets faster/less expensive (to Cloudflare) the more requests you get.
If you're talking in terms of SSR/Functions. If you're on free right now, if you reach over 100k requests/day, you get disabled.
If you're on bundled, pretty cheap anyway at 10 mil requests included + $0.50/per mil extra, and people have got refunded in the past when they got majorly attacked (and it got through protection/they had no protection). You do get the benefits of CF's DDoS Protection as well which runs in front of your website
People are very petty, and will attack me....
and it seems the community is looking to me, to make a better alternative for a content distrubution platform, vs the latter.
CF has a lot of options if you need to protect yourself, WAF, Super Bot Fight mode (although a very nuclear approach/prone to false positives), Under Attack Mode (IUAM) serving JS Challenges to every visitor, etc. CF has its own "always on" DDoS Protection as well, but it samples one every 1,000 requests or so I believe, so you need a fairly large attack for it to see it
I do have a rate limiter on the WAF to stop small scale items.
When using's cloudflares toolsets, I havent had any issues so far.
A good idea. Yea I'd just make sure to protect your pages.dev as well so they can't just walk around your protection
Just wanted to discuss it, incase pages does something different
100%
another question @chaika.me
Analytics was automatic with my previous sub-domain.
It seems manual for pages?
Thank you @5927 and @chaika.me for answering my questions for me today!
After glancing your descriptions, can I tip you fellow students?
Which Analytics? You should be getting zone/website analytics. If you're talking about Web Analytics, in your Pages Project Settings you can enable the integration
You can boost my ego big time with a github follow 😎
bet
Also if you ever need someone to do design stuff for ya, hit me up