CDN configuration in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Architecture

intermediate

Identify the correct CDN architecture for Remix app static assets

You have a Remix app serving dynamic pages and static assets. Which CDN architecture best improves static asset delivery without affecting dynamic content?

A Use a CDN only for static assets like images, CSS, and JS, while dynamic pages are served directly from the origin server.

B Route all requests, including dynamic pages, through the CDN to cache everything aggressively.

C Do not use a CDN; serve all content directly from the origin server to avoid caching issues.

D Use the CDN only for dynamic pages and serve static assets directly from the origin.

💡 Hint

Think about which content benefits most from caching and which should remain fresh.

Static assets benefit from CDN caching to reduce latency and load on the origin. Dynamic pages often require fresh data and should be served directly or with careful caching.

❓ scaling

intermediate

Estimate CDN bandwidth savings for a Remix app

Your Remix app serves 1 million static asset requests daily, each averaging 500 KB. If a CDN caches 80% of these requests, how much bandwidth is saved on the origin server per day?

A 200 GB

B 800 GB

C 500 GB

D 400 GB

💡 Hint

Calculate total data served, then multiply by cache hit ratio.

Total data = 1,000,000 * 500 KB = 500,000,000 KB = 500 GB. CDN caches 80%, so origin saves 80% of 500 GB = 400 GB.

❓ tradeoff

advanced

Choose the best cache invalidation strategy for Remix app updates

Your Remix app updates static assets frequently. Which cache invalidation strategy balances freshness and performance best?

A Set a very short TTL (time-to-live) so CDN caches expire quickly, ensuring fresh content but increasing origin load.

B Manually purge CDN cache after every deployment, keeping TTL long for performance.

C Use versioned URLs for static assets so new versions bypass CDN cache automatically.

D Disable CDN caching entirely to avoid stale content.

💡 Hint

Consider how to avoid stale content without hurting performance.

Versioned URLs let CDNs cache assets indefinitely while ensuring new versions load fresh content without manual purging or short TTLs.

🧠 Conceptual

advanced

Understand CDN edge server behavior for dynamic Remix routes

How do CDN edge servers typically handle dynamic routes in a Remix app that require user-specific data?

A Bypass cache for dynamic routes, forwarding requests to origin for fresh user-specific content.

B Cache dynamic routes aggressively to reduce origin load, serving same content to all users.

C Cache dynamic routes but vary cache by user cookies automatically without configuration.

D Serve dynamic routes from CDN edge servers without contacting origin or cache.

💡 Hint

Think about user-specific content and caching risks.

Dynamic routes with user data should bypass cache to avoid serving wrong content. CDNs forward these requests to origin.

❓ component

expert

Design a CDN configuration for global Remix app with multi-region origin failover

You must design a CDN setup for a Remix app deployed in multiple regions with automatic failover if one origin region fails. Which component setup ensures high availability and low latency?

A Use a single origin endpoint and rely on CDN caching to handle failover without origin switching.

B Configure CDN with multiple origin endpoints and health checks to route traffic to the nearest healthy origin region automatically.

C Deploy CDN only in one region and manually switch origin endpoints on failure.

D Disable CDN caching and use DNS round-robin to distribute traffic across origin regions.

💡 Hint

Consider automatic failover and latency optimization.

CDNs with multi-origin support and health checks can route requests to the nearest healthy origin, ensuring availability and performance.

Practice

1. What is the main purpose of using a CDN (Content Delivery Network) with a Remix app?

easy

A. To increase the size of the application bundle

B. To cache content closer to users and improve load speed

C. To replace the backend database with faster storage

D. To store user data securely on the server

Solution

1. Step 1: Understand CDN function

   A CDN stores copies of static content in servers near users to reduce latency.

2. Step 2: Match CDN purpose with options

   Only To cache content closer to users and improve load speed describes caching content near users to improve speed, which is the CDN's main role.

3. Final Answer:

   To cache content closer to users and improve load speed -> Option B

4. Quick Check:

   CDN purpose = cache content near users [OK]

Hint: CDN = faster content delivery by caching near users [OK]

Common Mistakes:

• Confusing CDN with database storage
• Thinking CDN increases app bundle size
• Assuming CDN stores user data

2. Which DNS record type should you configure to point your domain to a CDN provider in a Remix app setup?

easy

A. CNAME record

B. TXT record

C. MX record

D. NS record

Solution

1. Step 1: Identify DNS record for CDN pointing

   CNAME records map a domain or subdomain to another domain, commonly used to point to CDN URLs.

2. Step 2: Eliminate other DNS record types

   MX is for mail servers, TXT for text info, NS for name servers, so only CNAME fits CDN pointing.

3. Final Answer:

   CNAME record -> Option A

4. Quick Check:

   CDN domain pointing uses CNAME [OK]

Hint: Use CNAME to point domain to CDN provider [OK]

Common Mistakes:

• Using MX record which is for email
• Confusing TXT record with CDN setup
• Changing NS records unnecessarily

3. Given this Remix asset URL configuration snippet, what will be the full URL served to users if CDN_URL is set to https://cdn.example.com?

const assetUrl = `${CDN_URL}/build/_assets/logo.png`;

medium

A. /build/_assets/logo.png

B. https://example.com/build/_assets/logo.png

C. https://cdn.example.com/build/_assets/logo.png

D. cdn.example.com/build/_assets/logo.png

Solution

1. Step 1: Understand template literal usage

   The code uses a template string combining CDN_URL and the asset path.

2. Step 2: Substitute CDN_URL value

   Replacing CDN_URL with 'https://cdn.example.com' results in 'https://cdn.example.com/build/_assets/logo.png'.

3. Final Answer:

   https://cdn.example.com/build/_assets/logo.png -> Option C

4. Quick Check:

   Template string + CDN_URL = full CDN asset URL [OK]

Hint: Replace variable with value inside template string [OK]

Common Mistakes:

• Ignoring protocol https:// in URL
• Using relative path instead of full CDN URL
• Omitting the slash between CDN_URL and path

4. You configured your Remix app to serve assets through a CDN, but users report stale images. What is the most likely cause?

medium

A. CDN cache rules are not set to refresh on asset updates

B. DNS records are pointing to the wrong IP address

C. Remix app is not running on the server

D. Assets are missing from the Remix build folder

Solution

1. Step 1: Analyze stale content cause

   Stale images usually mean CDN cached old versions and did not refresh after updates.

2. Step 2: Check other options

   Wrong DNS or missing assets cause errors, not stale content; app not running causes downtime, not stale cache.

3. Final Answer:

   CDN cache rules are not set to refresh on asset updates -> Option A

4. Quick Check:

   Stale content = CDN cache refresh issue [OK]

Hint: Stale assets? Check CDN cache refresh settings [OK]

Common Mistakes:

• Blaming DNS for stale cache
• Assuming app downtime causes stale images
• Ignoring cache invalidation rules

5. You want to configure your Remix app to serve static assets via a CDN while ensuring cache busting on asset updates. Which approach is best?

hard

A. Use a fixed asset URL and rely on browser cache only

B. Set CDN cache to never expire and manually clear cache on updates

C. Serve assets directly from the Remix server without CDN

D. Use hashed filenames for assets and update CDN cache rules accordingly

Solution

1. Step 1: Understand cache busting with CDN

   Hashed filenames change when content changes, forcing CDN and browsers to fetch new files.

2. Step 2: Evaluate options for cache management

   Use hashed filenames for assets and update CDN cache rules accordingly uses best practice: hashed filenames plus CDN cache rules. Others risk stale content or no CDN benefits.

3. Final Answer:

   Use hashed filenames for assets and update CDN cache rules accordingly -> Option D

4. Quick Check:

   Cache busting = hashed filenames + CDN cache rules [OK]

Hint: Hash filenames to bust cache on updates [OK]

Common Mistakes:

• Setting CDN cache to never expire causes stale content
• Not using CDN reduces performance benefits
• Relying only on browser cache misses CDN caching