Difference between Remix support for Cloudflare Pages vs. Cloudflare Workers?

[MLDimitry]

I recently saw that Remix added Cloudflare support. I'm pretty interested in trying both of these together but was a bit confused on the difference between CF Pages vs. CF Workers support.

This blog post announces "Cloudflare Pages" support for Remix https://blog.cloudflare.com/remix-on-cloudflare-pages/

But the Remix docs mention "Cloudflare Workers" support https://remix.run/docs/en/v1/guides/performance#cloudflare-workers

And when I start up the CLI it gives me the option of Cloudflare Pages AND Cloudflare Workers

I picked "Workers", my thinking was the "Pages" would only handle static web pages, but workers will handle functions as well? Not sure if that assumption is correct though.

It's hard to tell if one is preferred for Remix, or why I would pick one over the other?

[jacob-ebey]

Pages seems to be the future for full stack apps on CF. Pages is static + workers with conventions. Workers will be the most "stable" and easiest to find support for outside of Remix for a bit longer. Pages is stabilizing well and will be what we at Remix recommend soon.

[kael]

I've installed Remix with Cloudflare Pages flavour, but can't seem to use Cloudflare functions outside of the app.

Calling HTTP GET /api/foo returns a 404 with this code in functions/api/foo.js :

export default {
  async fetch(request) {
    return new Response(JSON.stringify({ foo: "bar"}), { headers: { 'content-type': 'application/json' } });
  },
};

Using a public/_worker.js completely overrides Remix routes, the worker handles the request but Remix routes get erased:

const pathname = '/api/foo';
const pattern = new URLPattern({ pathname });

export default {
  async fetch(request) {
    if (pattern.test(request.url))
      return new Response(JSON.stringify({ foo: "bar"}), { headers: { 'content-type': 'application/json' } });
  },
};

How can the Remix app serves XML or JSON API content using Cloudflare functions ?

[pawelblaszczyk5]

You can use Remix to build API routes to serve both XML and/or JSON
https://remix.run/docs/en/v1/guides/api-routes#resource-routes

[kael]

Awesome. Thanks ! 👍

[kael]

@jacob-ebey:

Reading Integrate Remix with Cloudflare Pages, it's unclear how useful Cloudflare functions are: seems to me that since Remix can do what Cloudflare functions do, the main interest of using Cloudflare functions is to access Cloudflare Context (KV, Durable Objects, etc), doesn't it ?

Also, I can't figure how a _worker.js could be used with Remix since it erases Remix routes, the integration guide doesn't give much precision.

[rubensdemelo]

Here are a handful of use cases to get you thinking.

• JSON API for a mobile app that reuses server-side code with the Remix UI
• Dynamically generating PDFs
• Dynamically generating social images for blog posts or other pages
• Webhooks for other services

[WillSmithTE]

For future reference, it seems like they're actually converging on workers. There's an official guide using workers assets: https://developers.cloudflare.com/workers/frameworks/framework-guides/remix/

If you use pages, you won't be able to use workflows in the same service (you'll have to create a new workers service and put the workflow in there, which kind of kills the point)