Cloudflare pages functions SSR (Server side rendering)

Super excited that cloudflare pages goes full stack https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/

I’m very interested in SSR section it mentioned in the article

I have created functions/todos/[id].ts in my react root folder.
like

export async function onRequestGet({ request, params }) {
  return new Response('hello world');
}

After deploy it to pages. I can’t see the custom response is returned. when visiting something like /todos/abc

My intention is to have my todo page return dynamic html when accessed by social bots like twitter, google. but return static file if it’s not bots. is it possible to do so? it would be something like this

export async function onRequestGet({ request, params }) {
  if (request.headers.userAgent === 'bot') {
    const todo = await getTODOFromServer(params.id)
    return generateHTML(todo)
  } else {
    // fallback to static files, which is index.html for react app
  }
}

Thanks very much

Something like your example should in theory work, and you can use next(), or env.ASSETS.fetch to retrieve the static files inside your function.

I’d recommend joining the Workers Discord though if you haven’t already to chat with folks who have done similar things: https://workers.community. I know there’s lots of discussion on more direct SSR support with various frameworks in the future.

1 Like