IHP 1.1 is out now!

← Back to Feature Requests

Optional pre-rendering of SPA-widgets

A killer feature for me in IHP would be to optionally server-side render certain widgets, and on page load hydrate these widgets with client-side logic.

I think this could completely bridge the gap that Next.js and Remix fills regarding hybrid apps. One could possibly even choose to use React, Vue or even Elm as the main templating language if so desired with little added complexity, and no SPA tech lock-in.

I think it could make sense to drop in these types of widgets from the controller and just place them in the hsx view.

salesWidget :: Sales -> Html
salesWidget sales = [hsx|
<div id="salesWidget"></div>
<script data-sales={Aeson.encode sales} src="/app.js"></script>|]

action DynamicTableController = do
  sales <- query @Sales |> fetch
  dynamicSalesTable :: Html <- renderSSR (salesWidget sales)
  render DynamicTableView{dynamicSalesTable}

In the background, one could use puppetteer, jsdom or something like that to load the correct scripts and print the evaluated html string with the relevant initial data.

Another nicety would then also be to have to option to build cached static views/data for extra performance, like I know Next.js does with getStaticProps. This could allow for static site generation that also has been mentioned before as a wanted feature.

The only thing Next.js would offer in addition here would be client-rendered page navigation for slightly less expensive page navigation. For most cases, I think this small advantage is often neglible as database queries are mostly very fast.

Comment +