eidellev / inertiajs-adonisjs

280 stars 17 forks source link

Add SSR live reloading in development #98

Closed msurdi closed 1 year ago

msurdi commented 1 year ago

Context

When the SSR feature is enabled in development, the watcher process correctly monitors and rebuilds the SSR module during development, so that any change you do to the frontend Pages or Components, etc is correctly rebuilt and available for being served from the server.

Problem

I've found that the current way the SSR is done prevents newly built versions from being picked up after the first SSR operation is performed.

This means that when reloading the application in the browser, either by CMD+R or by the live reload system from Adonis.js itself a small "flicker" will happen, because the browser will have received outdated HTML markup from the server and then it will have been replaced by the CSR rendering on the browser.

If React's hydrateRoot is used instead of createRoot (as in the example linked below) then an error is echoed in the browser's console explaining that the CSR generated DOM doesn't match the SSR generated DOM.

One way to avoid this is to restart the Adonis.js main server/development process so that it picks up the freshly rebuilt version of it, but it's annoying to do after every frontend code change.

Proposed solution

This Pull Request adds a new SSR setting for this project, named autoreload that, when enabled (usually just in development), will then take care of removing from Node.js' require cache the already loaded module, so that every time the SSR content is generated it will be done using the latest built frontend code. This happens here.

I've also included some tests for this feature, and I've created this minimal example project demonstrating the issue I was having.

Questions, ideas, etc

Thanks for your work on this project, and hope you find this interesting or useful enough to get it merged in.

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 7.4.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: