Hi, I am investigating a basic react-ssr setup with Cloudflare pages. In my

functions/index.js

, I added the following code:

import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "../src/components/App";
import template from "../dist/index.html";

export async function onRequestGet(context) {
  // get HTML string from the `App` component
  const appBodyHTML = ReactDOMServer.renderToString( <App /> );
  console.log(appBodyHTML);
  const appHtml = generateFullHTML(template, appBodyHtml)
  return new Response(appHtml, {
    headers: { "content-type": "text/html" },
  });
}

The error I am getting is on a tangent though:

✘ [ERROR] The JSX syntax extension is not currently enabled

    functions/[index].js:71:49:
      71 │   const appHTML = ReactDOMServer.renderToString( <App /> );
         ╵                                                  ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

Has anyone come across that before?

You're trying to use jsx in a js file that esbuild isn't expecting to contain jsx

I am doing this inside

functions/index.js

. I dont have

esbuild

setup in my project. The project uses webpack to bundle the static assets.

wrangler runs esbuild under the hood which means that

functions/index.js

is getting crunched with esbuild.

(speaking from about two weeks of experience so i might be wrong)

You're correct

Tweaking the cli tool sounds wrong here. Am I to assume then that SSR is not possible with wrangler+pages ?

It is, though in general, people use a system like Vite/Astro, that is built to handle it

Is there a simple example of react ssr on cloudflare pages?

The error that I am seeing:

The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

is fundamentally a blocker for SSR dev. Wrangler needs to be updated. I am on version 2.13.0

You are trying to write jsx inside a js file. That is not standard practice. You should be using jsx/tsx files for jsx/tsx

Nonetheless, it would be better to use an existing framework/tooling if you want to achieve SSR

You should be able to pass in a custom loader, but again, most people just use a framework

I eventually want to try a framework like next or remix. However, that is a bigger migration for an existing pure client side react app.

I was hoping to render the initial Html inside my

functions/index.js

and swap out

React.render

with

React.hydrate

in my client side app.

This would allow me to gain SSR on initial render with minimal code changes to my client code.

Basically, i dont want to buy into a full featured framework like Next or Remix just yet.

Systems like Vite are very minimal, and shouldn’t require much extra set up

And many modern frameworks actually use Vite as a building block, so you could see it as sort of an incremental adoption

I am confused. What should I use vite for? My react app uses webpack to bundle. Is it specifically for the

functions

folder?

Vite/Astro come with a very fast bundler, but they also have SSR that works on Workers directly

So you don’t have to mess with wrangler trying to compile some JSX

Is their some existing literature on this?

This one is from Astro: https://docs.astro.build/en/guides/integrations-guide/cloudflare/

I really would recommend picking up a framework that's similar to what you're aiming to do instead of reinventing the wheel

It may take slightly longer, but you'll get a lot more out of it

Oh wait, here’s the one for Vite…