Problems and Solutions Using Remix Framework, NGINX, and Cloudflare CDN

I've summarized various issues I experienced over the past 20 days into three main phases.

🚩 Initial Phase

I was running my blog on Hashnode.

I felt limited by server-side customization options.

I switched to Next.js to build a blog by myself.

I wasn't satisfied with the growing complexity due to increasing route files.

Discovered the Remix Framework, which seemed to solve this issue.

Quickly completed development using official documentation and AI assistance.

Integrated GA4 and a CDN for better performance and analytics.

⚠️ Mid Phase

Chose Cloudflare for a free CDN solution.

Changed my domain's nameservers to Cloudflare and activated DNS proxy.

Implemented GA4 (Google Analytics) for site analytics.

Suddenly faced a conflict between NGINX configuration and Cloudflare settings, causing site downtime.

Decided to migrate all dependencies to Cloudflare to fix the issue.

This decision turned out to be a major mistake.

Used Cloudflare Workers to handle CSP headers with nonce settings.

Configured Cloudflare Worker to generate nonce → NGINX to accept it → Remix app to receive it.

Still working on nonce settings, as it's my first implementation.

Complexity grew exponentially, leading to further configuration issues.

✅ Current Phase

Simplified Cloudflare usage to only basic HTTPS redirect and DNS proxy, removing all other dependencies.

Aiming to handle all functionalities directly within the Remix app and NGINX server.

📝 Conclusion & Summary

My advice for users of Cloudflare: unless you're highly experienced, stick to basic CDN functionalities and avoid complex dependencies.

While services like GA4 and Cloudflare offer convenience, stacking dependencies often results in difficult-to-manage complexity, leading to unnecessary frustration and issues.