Remix - purely server side (html over wire) #7422
Replies: 4 comments 11 replies
-
|
Just omit the All links and forms will continue to function as they are native HTML elements. |
Beta Was this translation helpful? Give feedback.
-
|
You may have better luck trying the new Vite support. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @kiliman - definitely looks like I'm trying to abuse Remix 😄 |
Beta Was this translation helpful? Give feedback.
-
|
@kiliman now that Vite support is stable wanted to revisit this.
The So wanted to check if is there is still a simple way to omit just Remix client side? |
Beta Was this translation helpful? Give feedback.
-
|
Hmm... not sure. It's not something I've tried before. You could just render {process.env.NODE_ENV === 'development' && <Scripts />} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! will give this a try... |
Beta Was this translation helpful? Give feedback.
-
|
wow - that simple! Thanks @kiliman |
Beta Was this translation helpful? Give feedback.
-
|
This would be an interesting mid-point by the way: https://twitter.com/ryanflorence/status/1703970940030496934 |
Beta Was this translation helpful? Give feedback.
-
|
One more question - how would I go about rendering a partial (without the layout)? |
Beta Was this translation helpful? Give feedback.
-
|
You can use a resource route to send partials of HTML. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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 />))
} |
Beta Was this translation helpful? Give feedback.
-
|
Thanks so much @sergiodxa! |
Beta Was this translation helpful? Give feedback.
-
|
I was able to get this working by using the manifest from For local dev am able to see changes reflected as soon as a file is changed. Also once built the html correctly references the javascript and css assets. entry.client.tsx Just has the client side code I need (hotwire turbo) import * as Turbo_ from "@hotwired/turbo"
export const Turbo = Turbo_root.tsx Do not render Get the manifest from import { useRemixContext } from "@remix-run/react/dist/components";
export function Layout({ children }: { children: React.ReactNode }) {
const { manifest } = useRemixContext();
return (
<html lang="en">
<body>
{children}
<ScrollRestoration />
{import.meta.env.DEV && <script type="module" src="/@vite/client"></script>}
<script type="module" src={manifest.entry.module}></script>
</body>
</html>
);
}Once built the html correctly references the build entry client and also other assets like tailwind I think this is a working solution, do suggest if I'm missing anything obvious... |
Beta Was this translation helpful? Give feedback.
-
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...
I know it sounds like fighting the framework, but just asking... 😄
Thanks
Ajai
Beta Was this translation helpful? Give feedback.
All reactions