Render Modes (SSR/Streaming) [Experimental]

Experimental Features
1

Render Modes is going to bring awesome new capabilities to Redwood, and now you can try it for the first time!

This is a very first demo release. Features are missing and features are broken. But please do try it out and help shape the future of Redwood!

:rotating_light: Heads up
This post is a little out of date, the videos may be worth a watch, but what you’re after is probably the latest experimental release: React Streaming and Server Side Rendering (SSR)

Here’s a demo video showing of some of the cool thing this will bring to Redwood

Here are written instructions on how to try this

If you just want to see some code, here’s a demo repo (note the branch is not main)

And finally, for some more background info, here’s the original RFC (now a bit out of date)

Please share any and all feedback here in this forum thread

3 Likes
2

Deployments

Up until now when deploying a Redwood app you’ve only needed a server for the api side. The web side could be served as static files from a CDN. With Render Modes this changes. You now need a frontend server too. Because of this none of our official deployment guides or 3rd party integrations work out of the box.

It’s worth repeating that the Render Mode experiment isn’t ready for production yet. But if you do want to try to deploy your app we’ve got two documented options for you. Using fly.io and doing a Baremetal deploy.

fly.io

Deploying with fly.io is by far the easiest option. And before we officially launch Render Modes we’re going to make it even easier!

Install the fly CLI tools if you haven’t already. Then you just run fly launch and answer the prompts. Just make sure to answer “No” when it asks if you want to deploy. The CLI will generate a few files. You’re going to have to modify two of them. Start by updating .fly/start.sh. Replace the npx rw-server command with these two lines

node node_modules/@redwoodjs/api-server/dist/index.js api &
yarn rw-serve-fe

And then you’ll have to switch to development mode in Dockerfile. Find the first ENV NODE_ENV and change it from development to production. And finally you have to make it copy over the api side files before building the web side so that your route hooks can access the api side code. Just add COPY api api before COPY web web.

That should be it. Commit all changes and run fly deploy

Baremetal

This is an advanced topic. Click to show

Do a normal Baremetal deployment setup. Then update ecosystem.config.js to look like this

module.exports = {
  apps: [
    {
      name: 'api',
      cwd: 'current',
      script: 'node_modules/.bin/rw',
      args: 'serve api',
      instances: 'max',
      exec_mode: 'cluster',
      wait_ready: true,
      listen_timeout: 10000,
    },
    {
      name: 'fe',
      cwd: 'current/web',
      script: 'yarn',
      args: 'rw-serve-fe',
      instances: 'max',
      exec_mode: 'cluster',
      wait_ready: true,
      listen_timeout: 10000,
    },
  ],
}

This makes sure we run both the api server and the frontend server inside pm2.
You also have to log in to your server and update the nginx config.
At the top I define two upstreams:

upstream redwood_api_server {
  server 127.0.0.1:8911 fail_timeout=0;
}

upstream redwood_fe_server {
  server 127.0.0.1:8910 fail_timeout=0;
}

And then in the server block I use them like this

  location ~ /.redwood/functions(.*) {
    rewrite ^/.redwood/functions(.*) $1 break;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://redwood_api_server;
  }

  location / {
    # try_files $uri /200.html =404;
    proxy_pass http://redwood_fe_server;
  }

Restart nginx and you should be able to access your RW app.

1 Like
4

I ran though Danny’s example in development (starting rw-serve-fe and ‘serve api’ locally). Two questions: 1. Do i have to run the build for every change? 2. Should Tailwindcss work?

5

With “serve”, yes, you have to build for every change. But for local development you can run yarn rw dev, just like you’re used to and it will reload automatically :slight_smile:

There are some limitations around css we haven’t figured out yet. So TW might not work. Maybe @danny can fill in about the details.

6

Tailwind works, you may need to make changes to make sure your config is Vite compatible first. If you’ve been on Vite already.

Do i have to run the build for every change?

You do not need to start multiple servers for dev, the same way you currently do not need to separately start the web and api dev servers (but you can choose to, e,g, with yarn rw dev web). All changes will be hot reloaded, exactly the same as before. Your dev workflow doesn’t change!

Running the two servers
Running the two servers is only something you need to do for a deployment - see Tobbe’s post above for this. But also useful for debugging deployment issues locally.

7

Thank you for the info:

Just a reminder for others:

  1. remember to change the tailwind.config.js content element to relative.
    content: {
    relative: true,
    files: [‘…/src/**/*.{js,jsx,ts,tsx}’],
    },
  2. for dev (locally), ‘yarn rw dev’ works
    3… for renderMode (locally), ‘yarn rw serve api’ (for api server) and ‘yarn rw-serve-fe’ for frontend. Run ‘yarn rw build’ first to get your changes.

Initially this seems to be the best of two worlds. I can run ‘yarn rw dev’ for quick development. Otherwise, I can run the two renderMode servers to test renderMode programming.

3 Likes