Calling bin/vite ssr just exits with no errors

[iamdriz]

I've followed the documentation at: https://vite-ruby.netlify.app/config/#ssr-options-experimental and built a quick example SSR app to test out if we can do SSR in our Rails app that's using this plugin to add in React JS views... the code is as follows:

ssr.tsx in app/javascript/ssr/ssr.tsx:

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

const App = () => {
  return (
    <div className="flex h-full items-center justify-center">
      Hello from SSR
    </div>
  );
};

export function render() {
  const html = ReactDOMServer.renderToString(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  return { html };
}

We then call: bin/vite build --ssr which results with:

Building with Vite ⚡️
vite v5.0.12 building SSR bundle for production...
transforming...
✓ 1 modules transformed.
rendering chunks...
../../public/vite-ssr/ssr.js  0.49 kB │ map: 0.85 kB
✓ built in 285ms
Build with Vite complete: /Users/cameron/myapp/public/vite

And the contents of that built file:

import { jsx } from 'react/jsx-runtime';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const App = () => {
  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: "Hello from SSR" });
};
function render() {
  const html = ReactDOMServer.renderToString(
    /* @__PURE__ */ jsx(React.StrictMode, { children: /* @__PURE__ */ jsx(App, {}) })
  );
  return { html };
}

export { render };
//# sourceMappingURL=ssr.js.map

Then I have tried running: bin/vite ssr to run the SSR version (documentation doesn't mention anymore steps)

But the command just runs with no output and then that's it... is there missing step?

In the ViteJS documentation they mention using an express server: https://github.com/bluwy/create-vite-extra/blob/master/template-ssr-react/server.js - but you don't mention this anywhere and it seems implied (even in the Inertia example you provide at: https://github.com/ElMassimo/inertia-rails-ssr-template) that a custom express server isn't required and all the additional parts come built in... the documentation does mention a nodejs file... but all I see generated is that JSX output I provided above.

Can you point me in the correct direction for what's actually missing? or is there a bug from the CLI?

[ElMassimo]

Hi Cameron!

The command exits because ssr.tsx is defining a constant and a function, so Node evaluates that and exits, as expected.

For SSR, you'd need to start a server (Fastify, Express, Koa, etc).

[iamdriz]

@ElMassimo Thanks for the response, sorry been super busy and haven't had chance to respond yet.

So here's my confusion, our Ruby on Rails uses this ViteRuby library so we can run an Admin React app inside it and then wildcard the routes for /admin so React picks up the requests.

The routes file config/routes.rb is as follows:

match '/admin(/*path)', via: :all, to: 'admin#show', as: :admin

The admin/show.html.erb is as follows:

<%= vite_client_tag %>
<%= vite_react_refresh_tag %>
<%= vite_javascript_tag 'application.tsx' %>

<div id="root"><div>

and then our app/javascript/entrypoints/application.tsx file is as follows:

import { createRoot } from 'react-dom/client'
import { App }  from '~/app';

const root = document.getElementById("root");
if (root) createRoot(root).render(<App />);

However whilst this works great, it means the sever-side HTML for the admin app is always just that root element... which is where SSR would come in... but if we were to try and use Express it would mean requests to the admin would need to be picked up by Express instead of our Rails app which would bypass our ViteRuby stack entirely right?

Do you have an example of how we could use SSR with our setup in Rails and then still be able to hydrate it? Or is it not possible to use SSR in the way we have built the app currently?

Thanks.

[ElMassimo]

Here's an example using Inertia.

In order to serve JS-rendered HTML from your Rails app, you need to somehow execute that JS that will render the HTML, then serve that HTML in the Rails response.

The way Inertia does it (one of many other possibilities) is to make an HTTP request to the Node.js server started by bin/vite ssr, passing the page that needs to be rendered and the props for the page, obtaining the rendered HTML in the response.

[iamdriz]

Yeah I saw that from your example in the documentation, however we don't use inertia (or particularly want to move to it).

I've had a look around and the examples I've seen all have the Node.js Express server taking complete control and having both the client and server side handled outside of a Rails setup.