Pass data to throw render()

[Dubzer]

hii
i have a use case where i render different views depending on the entity from the server response in +data.
currently, i implement this by having a single page and selecting a view in the React code, which is problematic because the bundler can't exclude unused resources depending on the view

unfortunately, i don't see a proper way to pass the data from the "routing page" to the content page on the server side, besides saving it in the global state.
i think it would be helpful if the throw render() had the ability to pass a pageContext, similar to the client-side navigate()

[brillout]

Indeed +data is executed after routing — it's tied to a page.

which is problematic because the bundler can't exclude unused resources depending on the view

Can you elaborate on that? What's the use case you're trying to achieve?

i think it would be helpful if the throw render() had the ability to pass a pageContext, similar to the client-side navigate()

How would that help?

[Dubzer]

i just tried the following:

const onBeforeRender: OnBeforeRenderAsync = async (
  pageContext
): ReturnType<OnBeforeRenderAsync> => {
  const page = await import('./(components)/Content');
  pageContext.Page = page.default;
};

for some reason, +onBeforeRender isn't executed on the client when the +data is present.
and if i remove it... +onBeforeRender isn't executed on the client after it did on the sever. so i get a hydration mismatch because the Page isn't overridden on the client.

stackblitz

also, i'm not sure if i could add the module asset to the HTML head so it would start loading before the hydration. like the actual page would do

[brillout]

How about using import() inside +onBeforeRender{Client,Html}?

Have you tried in both of these hooks? If you don't use vike-react then do it inside onRenderHtml() and onRenderClient().

If it works I'll let you know how you can dedupe the import() code (either factor it out in a new shared function, or create a new setting e.g. +PageDynamic).

also, i'm not sure if i could add the module asset to the HTML head so it would start loading before the hydration. like the actual page would do

It may be possible with injectFilter() but I ain't sure if it contains dynamically import()'d modules.

[Dubzer]

oh, i see... looking at the example in the docs, i thought you have to implement these hooks yourself and call them conditionally from onBeforeRender. but it turns out vike-react calls them instead

stackblitz

+onBeforeRenderHtml hasn't worked, since the onRenderHtml of vike-react reads the Page before calling the hook. but i think +onBeforeRender in the server-side only mode should be equal to that

in general, it was successful in rendering the page's markup. unfortunately, no CSS from the lazy loaded module is included in the SSRed HTML, so the solution still isn't working, since the final page is rendered broken before hydration

also, i added console.log injectFilter to the onRenderHtml of vike-react:

[
  '/assets/static/vike-react-2ae00934.BcWtY8Ol.css',
  '/assets/static/layouts_style-b34a8e57.a91n6qlS.css',
  '/assets/static/pages_star-wars_index_notOverridden.DdbbTsP2.css',
  '/assets/static/logo.DLJJsk-H.svg',
  '/assets/entries/pages_star-wars_index.B65_mjZc.js',
  '/assets/chunks/chunk-BbattvQj.js',
  '/assets/chunks/chunk-Dk7-vTfA.js',
  '/assets/chunks/chunk-Ca5DTe3Z.js',
  '/assets/chunks/chunk-BlTxHScW.js'
]

there are CSS module JS chunks, but no stylesheets (notOverridden .css corresponds to the initial +Page.tsx)

[brillout]

no CSS from the lazy loaded module is included in the SSRed HTML

That's possible indeed, the CSS of dynamic imports may be missing. See:

vike/packages/vike/node/runtime/renderPage/getPageAssets/retrieveAssetsDev.ts

Lines 32 to 34 in acaa3ec

	// Collect the CSS to be injected to the HTML to avoid FLOUC
	// - We only collect the root import: https://github.com/vikejs/vike/issues/400
	function collectCss(mod: ModuleNode, styleUrls: Set<string>, visitedModules: Set<string>, importer?: ModuleNode): void {

Maybe (with the latest Vite version) there is a way to retrieve the CSS of dynamic imports.

so the solution still isn't working, since the final page is rendered broken before hydration

That's surprising: are you sure the CSS isn't loaded on the client-side?

+onBeforeRenderHtml hasn't worked, since the onRenderHtml of vike-react reads the Page before calling the hook.

We may be able to change the order (I'll have to think about other use cases).

[Dubzer]

That's surprising: are you sure the CSS isn't loaded on the client-side?

it starts loading after the HTML rendered, when the dynamic import is executed on the client, which causes FOUC.
for proper pages, it's avoided by your code above :D