React - Full SPA renders without an index html?

[AgentEnder]

Hello, I'm working on configuring an application that will have two build profiles. One gets deployed to CDNs and is fully static site generated. The other is a "preview" view of it that loads data at runtime and is a SPA, accessible from a subroute within an admin panel.

The config I was trying to use is below:

import vikeReact from 'vike-react/config';
import type { Config } from 'vike/types';

const isPreviewMode = !!process.env.VITE_PREVIEW_MODE;

const previewConfig: Config = {
  ssr: false,
};
const staticBuildConfig: Config = {
  ssr: true,
  prerender: true,
};

const baseConfig: Config = {
  // https://vike.dev/head-tags
  title: 'My Indie OSS',

  passToClient: [
    'siteName',
    'navigation',
    'socialLinks',
    'ticketLink',
    'base_url',
    'admin_url',
    'branding',
    'tickets',
    'generated_at',
  ],
  extends: [vikeReact],
};

// Deep merge so nested keys like meta.Page.env are combined, not overwritten
export default deepMerge(
  baseConfig,
  isPreviewMode ? previewConfig : staticBuildConfig
);

function deepMerge(a: Config, b: Config): Config {
  const result: Record<string, unknown> = { ...a };
  for (const key of Object.keys(b)) {
    const aVal = result[key];
    const bVal = (b as Record<string, unknown>)[key];
    if (
      aVal !== null &&
      bVal !== null &&
      typeof aVal === 'object' &&
      typeof bVal === 'object' &&
      !Array.isArray(aVal) &&
      !Array.isArray(bVal)
    ) {
      result[key] = deepMerge(aVal as Config, bVal as Config);
    } else {
      result[key] = bVal;
    }
  }
  return result as Config;
}

I eventually landed on a working solution by using the above config, in combination with a +prerender.ts file in the pages/index folder that exports true.

Never mind, that makes the index pave "work", but the page errors on SSR. Ill try to make a minimal repro for this, but I am curious if this is just not a supported pattern? Im a bit at a loss on getting this to work with ssr false, no prerender, deployed to a static host.

Is this the expected way to set up a SPA that outputs an index.html file? It feels a bit odd still to require the index be prerendered in these cases, as the global context / data / etc will be different depending on the data that was loaded when bootstrapping the SPA

[brillout]

Have you seen https://vike.dev/pre-rendering#can-i-use-ssg-spa ? Does it answer your question?

[AgentEnder]

Ok, figured out some more. If you prerender the index and do not set passToClient and have a meta config for data to disable it running server side, I think it works....

[AgentEnder]

Update, I have a "working" solution below. It does still require prerendering the index to get some html file to link the other pages... and the prerendered index contains "wrong" info in that it doesn't contain the updated data from the global context. I'd rather it just be an empty html file w/ root + no other info.

+config.ts

import vikeReact from 'vike-react/config';
import type { Config } from 'vike/types';

const isPreviewMode = !!process.env.VITE_PREVIEW_MODE;

const previewConfig: Config = {
  ssr: false,
  meta: {
    data: {
      env: { client: true, server: false },
    },
    Page: {
      env: { client: true, server: false },
    },
    CreateGlobalContext: {
      env: { client: true, server: false },
    },
  },
};

const staticBuildConfig: Config = {
  ssr: true,
  prerender: true,
  passToClient: [
    'siteName',
    'navigation',
    'socialLinks',
    'ticketLink',
    'base_url',
    'admin_url',
    'branding',
    'tickets',
    'generated_at',
  ],
};

const baseConfig: Config = {
  // https://vike.dev/head-tags
  title: 'My Indie OSS',

  extends: [vikeReact],
};

// Deep merge so nested keys like meta.Page.env are combined, not overwritten
export default deepMerge(
  baseConfig,
  isPreviewMode ? previewConfig : staticBuildConfig
);

[brillout]

See:

• https://vike.dev/pageContext.json#avoid-pagecontext-json-requests
• Improve SPA config DX (using new +spa setting) #3145

Do these address your issues? Not sure I understand your last comment, feel free to elaborate.

[AgentEnder]

This is really close... but where it falls a bit flat is that you cant set prerender to false and have this work. For SPAs with dynamic routes or frequently updated data in general prerendering just doesn't make a ton of sense?

The general pattern ive seen is that they'd have a static index.html that all requests are redirected to in some way (hash routing, server config / proxy, etc).

With vike i can get close to that by setting prerender to false, but that emits no index.html at all so I end up selectively turning prerender on for the index page.

This, combined with the other settings you mentioned, pretty much works. But the prerendered page can be kinda out of date since its based on when the build was done. In my head there should be a way to emit the empty index.html?

[brillout]

I agree, see:

• Pre-render dynamic routes (static host deployment) #1476 => that's actually currently the number one blocker with Vike, by far. I'll work on this as soon as I'm done with my current priorities (ETA 2-3 months).
• https://vike.dev/pre-rendering#can-i-use-ssg-spa

It's also on the radar to improve the docs ones the tickets I linked to are implemented. AFAICT this will address all the issues you mentioned.