Nano JSX, Laravel, InertiaJS with SSR

[jrson83]

Hey,
I already told you I experimented a lot with React, Laravel and spatie/laravel-server-side-rendering. My goal was to create a server side rendered SPA, but I could't reach the desired results.

In the last days I created a laravel-nano-jsx-client-side-preset repo, which I will release in the next days. It is based on wewowweb/laravel-svelte-preset. As the preset was ready, I continued developing with focus on server side rendering. What helped me understanding the actual process of an isomorphic app, was reading the docs from InertiaJS SSR and this article.
If you checkout the SSR Demo, you see only the first paint of the website is rendered server side, then it switches over to client side navigation and is using XHR to get the data from the server.

I tried to rebuild the process with Laravel, spatie/laravel-server-side-rendering and Nano JSX and for sake it is working and very fast. Since the spatie package is not actively under development and the way I archived the results is not 100% best practice code, I started sponsoring InertiaJS, to get access to the early access SSR feature. Today I setup an app with Laravel, InertiaJS and React for testing purpose and I love it totally.

If you checkout awesome-inertiajs, it has already support for Vue, React, Svelte and Mithril. This is accomplished with app specific "adapters" which are programmed by the InteriaJS devs. Today I talked to them and asked if someone is interessted in creating an adapter for InertiaJS and Nano JSX, but they said "I don't think there will any other official adapters, unless there's a framework that's really popular. Maintaining these adapters requires extensive knowledge of the framework itself. You could try making the adapter yourself, although documentation for client-side adapters is pretty limited."

I'm now totally into this. I want to create an adapter to make not only the client side Nano JSX preset for Laravel, but server side for InertiaJS. I can just dream of the actual result you will archive with those two frameworks. It will be the best frontend setup ever.
So I wanted to ask, Yannick do you think this is a good idea? And if I gonna make the adapter, can I count on your support while developing?

Later I will make a small video of what I got.

[yandeu]

Well, SSR and hydrating to SPA (like you describe) will never be faster than SSR and partial hydration (how I use NanoJSX).

What makes a site fast, is less JavaScript. The point of Nano JSX is to ship as few bytes as possbile.

I have already build an entire webshop using only one HTML file and one JavaScript file (CSS is included in the HTML). Total size (excluding lazy loaded images) is only 19KB.
Once the html file has loaded, everything the user should see is already visible.

Even if it seems that client-side routing (like in react) is fast. Low end phone and slow connections have to deal with 50+ KB before interacting with your site.

Yes, please share the video. Becaus I'm not sure yet what the benefits of inertiajs is.

My opinion

• SPAs are popular but only good for apps (not websites).
• SSR to SPA was an experimet, but was never easy nor effective.
• SSR and partial hydration is basically how web development was few years ago. Render everything on the server and ship only the JavaScript needed for the current page.

[jrson83]

Sorry maybe I wrongly described my concept because I mentioned the word SPA.
I sure mean to use SSR with partial hydration when using Nano JSX with Laravel, this is why I like Nano JSX so much.
When I compare my current setup (Laravel, spatie SSR and Nano), the page feels much smoother and faster then the new setup with InertiaJS SSR and React. I will record the video now.

[yandeu]

I don't know if inertiajs.com was build using inertiajs
The nanojsx website was not build using nanojsx. Why? It is a simple website and no framework was needed.
But you get the idea, I prefer it simple and fast.

Once you have visited every page on nanojsx.github.io, the browser only had to download a total of 92.3KB. Why? Because navigation to another page, will not re-fetch already cached files like the logo or javascript. So even after reading the nanojsx docs for 1h or more, the browser would only have downloaded 100 KB.

[jrson83]

Here is the video demonstrating Laravel with spatie SSR and Nano JSX with partial hydration. It is really fast even there is much more room to optimize. I don't have a setup with Nano JSX and InertiaJS yet. This should only give an insight how easy and fast Laravel with SSR in combination with Nano JSX. Sorry for not so good englisch, I'm from Germany :)
If you have any idea how to optimize please let me know. Since I have not enabled helmet or caching yet, it should be also possible to create splitted client files for every component view, like in the example1. This I will try to setup next.

Video: Nano JSX, Laravel, Spatie SSR with partial hydration

[yandeu]

Looks nice. A very similar approach to nextjs.

I see that you are only hydrating the navbar and the main content. Love it!
But I have no idea what this line does:

Nano.hydrate({ 'home': <Home name="Test" />, "user": <User name="Test" packages={packages} /> }[page], document.getElementById('content'))

• renderSSR returns a string. (Unless you use Helmet, then you have to parse it with Helmet.SSR)
• Yes, for now hydrate and render does the same.
• This will be much easier with the new Router Listener.
• You could do:

const User = () => {
  const browser = fetchNames
  const server = () => {
    const names = props.packages.map(obj => obj.name)
    return names
  }

  return (
    <div>
      <h2>Names</h2>
      <Suspense cache names={isSSR() ? server : browser} fallback={<Loading />}>
        <List />
      </Suspense>
    </div>
  )
}

• I don't like __PRELOADED_STATE__. Imagine your have a huge content. With preloaded_state, you will ship all that content twice for nothing. Why do you need it?

I'm very bad with PHP, but I will of course help with JavaScript related issues. I can't promise that I will be able to write specific code for compatibility with other frameworks. A specific nanojsx plugins would be better I guess.

Btw, (not sure if you dot but,) I do not recommend using customElementMode on such a website. You should simple render the components using render().

Hope this helps 😊

[jrson83]

Thanks for the feedback! 😊

Nano.hydrate({ 'home': <Home name="Test" />, "user": <User name="Test" packages={packages} /> }[page], document.getElementById('content'))

This is a switch statement from stackoverflow. [page] is the expression.
This was the only way I could pass components with props through another and render it.

renderSSR returns a string. (Unless you use Helmet, then you have to parse it with Helmet.SSR)

This is good and I guess the reason why console.log() works ☺️

I can't wait to get the new router listener.

__PRELOADED_STATE__ isn't nice, but it seems InertiaJS is using the same approach, just adding it as data-page="{json}" to the root div itself and clearing the data after picking it up client side.

Soo, yeah that helps, thanks again! I will see what to do next and let you know what's happening!

[yandeu]

Nice. Love that switch.

Router Listener is available since v0.0.22.

[jrson83]

Oh okay, I'll check it out again!

Just released the client-side preset for Laravel & Nano JSX:
jrson83/laravel-nano-jsx-preset

[jrson83]

@yandeu since inertiaJS is not using typescript at all and the existing packages with SSR support (react, vue-2, vue-3) are not using typescript, what would you suggest? Using the configuration you published in this example with commonJS for tsconfig.json or the configuration from template?

I already setup a dev environment and tried Laravel, InertiaJS and Nano JSX with the typescript configuration. This is kind of annoying, because I have to define so many types. This would be actually no problem and there are also guides for installing Laravel and Inertia with React and TypeScript, but when I check the InertiaJS issues, I see a lot of people complaining on having issues when using typescript.

The development of the @inertiajs/nano-jsx adapter is possible for sure. I already have it almost running.

[jrson83]

They actually use typescript on every package besides svelte. I had no problems so far, when using commonjs so I will try to continue.

[jcs224]

I've written a server-side Inertia adapter for Deno. It's actually not too hard, mostly just a matter of listening for X-Inertia header and returning JSON if it's present, HTML page if it's not. I'm using it successfully with Vue. It even has (unofficial) SSR support, tested with React.

https://github.com/jcs224/oak_inertia

However, I tried to create a client-side adapter for SolidJS and it is much more difficult. I haven't been able to pull it off actually. Some guidance is needed for that.

[jrson83]

I spent a lot of time trying to create the client side Inertia adapter for Nano JSX, but finally gave up, because I couldn't get a satisfying final code for hydration / component updates. After I switched to Preact and created the Inertia Preact Adapter with Ping CRM Preact.

The Nano JSX Adapter is almost done, but never released it.