+onBeforeRender will no longer run on the clientside hook when returning an empty {}

[john-cashin]

Hello, in the process of moving up to 0.4.163 and have hit a little bump. We have a Vue ssr/client routing app on a single +Page.

On 0.4.143, to stop calling our api routes twice, we'd return {} when we're on the server but clientside navigating. onBeforeRender would then run clientside, call our routes/render/changePage.

Now if we return {} on 0.4.163, the clientside hook never runs. Returning false, Vike mentions it would like a plain obj, null, etc. But clientside now runs though, but the pageContext once we hit onBeforeRender is missing some of the original passToClient values (env values we pass from express). pageContextFromServer now has serverSideError/isServerSideError keys.

errorWhileRendering: "[vike][Error] The pageContext object couldn't be fetched from the server as an error occurred on the server-side. Check your server logs."

+config.js has the correct meta setup also.

/renderer/+onBeforeRender.js

let app, store, initialStoreState

export async function onBeforeRender(pageContext) {
  const isServerClientSide = import.meta.env.SSR && pageContext.isClientSideNavigation
  if (isServerClientSide) {
    // Return false kicks off the clientside hook, but the pageContext is now missing passToClient values(env) and has serverSideError/errorWhileRendering, present on 0.4.143
    // Return an object and no serverSideError/isServerSideError but clientside hook will not run. Works in 0.4.143 but not 0.4.163
    return {
      pageContext: {
        app,
        initialStoreState,
       pageProps: {}
     }
  }
 // createApp if SSR, init Stores, tracking, vwo campaign logic & cms content calls (all in Pinia stores)
  try {}
  catch {}

  return {
    pageContext {
      app, initialStoreState, pageProps
    }
  }
}

[brillout]

I ain't sure I understand. The best would be a minimal reproduction with two step-by-steps "what I expect" and "what happens instead".

[john-cashin]

Hey sorry for the delayed response and thanks for responding. The repos below have been stripped back but still contain the issue we face on trying to bump up to Vike and off vite-ssr-plugin.

General info

• Vue app, Express server.
• Single page
• ClientRouting enabled
• Route string used to query CMS to retrieve page content.
• SSR on first load, then client rendering on route change all done within the onBeforeRender(global)
• App/InitialState/Stores all created within on onBeforeRender, as all app logic lives within the stores.

Steps to run

• npm i in both repos
• npm run dev then localhost:3000

App: https://github.com/john-cashin/vike-1522-client
Server: https://github.com/john-cashin/vike-1552-server (typo 1552 🫠)

The issue we faced was that on 0.4.143 and lower was we'd hit the server hook on first load, but also on route change. To avoid calling our endpoints on both the server and then client side hook, we'd check if it was the server & client navigation true. If so we'd just return. Now of 0.4.163, we don't seem to get the same behaviour. Client side hooks is no longer called if we return {}.

The onBeforeRender file has some comments expanding on this and debugger in place, just to show this in action if you set return to either {} or false.

Playing around with some of the examples in the Vike repo. The normal behaviour seems to be to only hit the server of first load and client side from then after. Maybe this is an effect of using Vike as middleware. I leann more FE, so Node/Express isn't my expertise.

Thanks again!

[brillout]

I need this:

The best would be a minimal reproduction with two step-by-steps "what I expect" and "what happens instead".

[brillout]

With minimum I mean a minimal amount of code added to a Vike/Bati boilerplate.

[john-cashin]

What I expect on using Vike with Express(0.4.163)

• First load SSR hook (onBeforeRender)
• Client navigates, hit SSR Hook, withisClientSideNavigation true.
• Return empty {}
• Clientside hook then called.

Whats Happening Instead using Vike with Express(0.4.163)

• First load SSR hook (onBeforeRender)
• Client navigates, hit SSR Hook, withisClientSideNavigation true.
• Return empty {}
• Clientside hook not called.

Minimal Example
Vike/Bati example of behaviour: https://github.com/john-cashin/vike-1522

As mention we're on 0.4.143. Hopefully the above is satisfactory.

[brillout]

I don't see any onBeforeRender() in the reproduction. I need the steps to be more precise. I can't reproduce anything.

[john-cashin]

Hey so I think I've found the source of our issues and it lies in our use of API Routes. As mentioned above, our application seems to hit the express route/renderPage on each and clientside navigation, which in turn hit the onBeforeRender SSR also. VPS(0.4.143 and lower), allowed to check if we're SSR/Clientside navigating and just return, which kicked off the onBeforeRender clientside hook.

VPSV1 seems to plug this and rightly throws an error as the pageContext is messed up coming from the server again. I've used Bati to scaffold our app and when I switch from the boilerplate express server to our own, the behaviour changes within the onBeforeRender.

Sorry for wasting your time, but thank you for replying. At least I have something to work towards now.

[brillout]

Yea it did seem like a user land issue. No worries. Btw. would your company be up for sponsoring? It makes a massive difference.

[john-cashin]

I'll bring it up and see how receptive they are.

[brillout]

Thank you, let me know how it goes.