Client-side interactivity doesn't seem to be working with SSR

finestgecko commented 1 year ago

I'm new to the SSR aspect of Inertia. I followed the instructions and everything seems to work just fine, until I try to do any sort of client-side interactivity:

<button onClick={() => alert('hello!')}>say hello</button>

When I click the button, nothing happens.

This is my ssr.tsx file:

import { createInertiaApp } from '@inertiajs/inertia-react'
import ReactDOMServer from 'react-dom/server'

export default function render(page) {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => require(`./pages/${name}`),
    setup: ({ App, props }) => <App {...props} />,
  })
}

As far as I can remember, these are the only things that I changed in webpack.ssr.config.ts:

Encore.addEntry('ssr', './resources/js/ssr.tsx').enableTypeScriptLoader()

and for Tailwind:

Encore.enablePostCssLoader()

The source of the page looks like this (notice app.js is present, as you'd expect):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="http://localhost:3333/favicon.ico">
    <link rel="stylesheet" href="http://localhost:8080/assets/app.css" />
    <script src="http://localhost:8080/assets/app.js" defer></script>

    <title>test-app</title>
</head>

<body>
    <div id="app" data-page="{&quot;component&quot;:&quot;Auth/Login&quot;,&quot;version&quot;:&quot;e77ee25438e9f73dc55c00b5e3ee4e15&quot;,&quot;props&quot;:{},&quot;url&quot;:&quot;/auth/login&quot;}">
        <button>say hello</button>
    </div>
</body>

</html>

To me, it seems like the HTML isn't being hydrated.

I was wondering if I could get some help to figure it out.

finestgecko commented 1 year ago

I created a fresh project, set up everything from scratch and encountered the same problem.

I've created a repo on my profile (called ssr-test).

eidellev commented 1 year ago

Hey @joelcieslar ! Thanks for reporting this issue, I'll take a look.

eidellev commented 1 year ago

I took a look at your repository. it seems you're not initializing your client-side app(app.js is empty) so react doesn't mount and that's why the button does nothing. I realize it's a little confusing that you need to do this twice, so maybe it's a good place to improve developer experience :-)

https://inertiajs.com/client-side-setup

eidellev / inertiajs-adonisjs

Client-side interactivity doesn't seem to be working with SSR #93