Remix - purely server side (html over wire)

[ajaishankar]

Hi All

Huge remix fan here!

By having a clear separation of where data access happens (loaders and actions) it has made my life infinitely simpler, thanks!

Just wanted to check if anyone has experimented with using Remix purely on server side to emit HTML.

That is, avoid client side Remix - no React, hydration or anything...

1. Remix sends HTML over the wire
2. Client is Turbo (https://turbo.hotwired.dev) + Stimulus

I know it sounds like fighting the framework, but just asking... 😄

Thanks

Ajai

[kiliman]

Just omit the <Scripts/> component in your root.tsx route. Remix will be entirely server-side.

All links and forms will continue to function as they are native HTML elements.

[kiliman]

You may have better luck trying the new Vite support.

#2427

[ajaishankar]

Thanks @kiliman - definitely looks like I'm trying to abuse Remix 😄

[ajaishankar]

@kiliman now that Vite support is stable wanted to revisit this.

Just omit the <Scripts/> component in your root.tsx route. Remix will be entirely server-side.

The <Scripts> component I believe is necessary for the Vite integration

So wanted to check if is there is still a simple way to omit just Remix client side?

[kiliman]

Hmm... not sure. It's not something I've tried before.

You could just render <Scripts> in development. For production, it would be entirely server-rendered.

{process.env.NODE_ENV === 'development' && <Scripts />}

[ajaishankar]

Thanks! will give this a try...

[ajaishankar]

wow - that simple! Thanks @kiliman

[frontsideair]

This would be an interesting mid-point by the way: https://twitter.com/ryanflorence/status/1703970940030496934

[ajaishankar]

One more question - how would I go about rendering a partial (without the layout)?

[sergiodxa]

You can use a resource route to send partials of HTML.

[ajaishankar]

I'd still like to use react components to render the html server side.

Is this possible in resource routes?

Or can we have a layoutless UI route where even the root.tsx is not rendered?

[sergiodxa]

Yes, you can do something like this

// app/routes/partial.something.tsx
import { renderToString } from "react-dom/server"
import { html } from "remix-utils"

import { Something } from "~/partial/something"

export async function loader() {
  return html(renderToString(<Something />))
}

[ajaishankar]

Thanks so much @sergiodxa!