React Component - Server Side Rendering using Worker

Developers Workers
1

Hello to everyone, my question is about how to do SSR of an react component using the react component bundle
url (https://assets.mycomponent.bundle.js) using a worker
First I need to copy (download) the bundle to some kind of temporal file system then import it from that location.

const component = require('./mycomponent');

Something similar to this

import React from "react";
import ReactDOMServer from "react-dom/server";

class HelloMessage extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

async function handleRequest(event) {
  return new Response(ReactDOMServer.renderToString(<HelloMessage name="World" />), {
    headers: {
      "Content-Type": "text/html"
    }
  });
}

self.addEventListener("fetch", event => {
  event.respondWith(handleRequest(event));
});

But in my case the react component ( HelloMessage ) comes from a file, it’s not inline into the Worker.

Thanks in advance.

2

@Erlin - I haven’t dug into this too much, but if you want to do a bit of scripting, you could definitely upload your bundle to Workers KV (see the “Writing Data” page), and then retrieve it before calling renderToString.

Any particular reason you aren’t just inlining the application into the Workers script? I’ve done a few React SSR projects on Workers and had no problem inlining the bundle. Just curious if there’s any particular limitations you’re run into.

3

Hello @signalnerve thanks for your answer, my main use case it’s the next one:

In the company that i work we have an ssr server that render individual components that are hosted in Amazon S3 also we use Cloudflare. Each component has a function ( a kind of hook ) inside of that hook we do a lot of things then call renderToString function.

function myCustomRenderFunction ( input ) {
    do_some_stuff();
    return serverRenderComponent( input ) -> html; // serverRenderComponent has renderToString
}

I need to call from the worker to myCustomRenderFunction().

const component = require('./mycomponent');  // can import from the worker KV the component ?
component.myCustomRenderFunction( input )

Regards.

4

Thanks @Erlin, that’s useful! Unfortunately, we don’t have eval in the Workers runtime right now, so you wouldn’t be able to fetch an external script and execute it inside of your Workers code.

Another KV-oriented approach if you don’t want to store the actual bundles inside KV: you could do SSR on your own server, and then retrieve the HTML from inside of your Workers script. Given some HTML response that you have inside of your script, you could then cache it inside of KV, so you would be able to get quick reads instead of waiting for your SSR server to render a new version of the application.

5

Thanks @signalnerve , Yes now i’m implementing something like that.
All the best.

1 Like
6

@signalnerve. Sorry repeating myself. In your answer you said " You could definitely upload your bundle to Workers KV (see the “Writing Data” page), and then retrieve it before calling renderToString ." Can i really do that, my question is if save the bundle inside of worker kv it get stored like String instead React Element and renderToString need a valid react element. Do you have any example there.

Thanks in advance.

7

Hey @erlin - you’re totally right! renderToString does only take elements, not strings. Nice catch, sorry for the incorrect info.

8

Hey @signalnerve I’ve seen a bunch of people mention “Uploading your files to KV” or in your case you said “You could definitely upload your bundle to Workers KV”. I see the “Writing Data” page… but I havent really seen any examples of this. At the moment im using AWS S3 to host my PreactJS files… which seems to work good… but do you recommend using KV instead? What are the benefits of using KV over something like AWS S3? And would I literally just upload my JS files into a key, with the application/javascript type?

9

@signalnerve Thanks.