flat-fuchsia

Can't figure out why / isn't pre-rendered in SPA mode

Here's my config:

    tanstackStart({
      spa: {
        enabled: true,
        prerender: {
          enabled: true,
        },
      },

    tanstackStart({
      spa: {
        enabled: true,
        prerender: {
          enabled: true,
        },
      },

I see this in the output while building:

[prerender] Prerendering pages...
[prerender] Concurrency: 16
[prerender] Crawling: /
[prerender] Prerendered 1 pages:
[prerender] - /

[prerender] Prerendering pages...
[prerender] Concurrency: 16
[prerender] Crawling: /
[prerender] Prerendered 1 pages:
[prerender] - /

But then when I inspect the output in /dist/client the only html file is _shell.html, which does not contain the content from my base route /. Deploying and loading as a static site confirms that the shell is rendered immediately and the main content loads in afterwards. Something I'm missing or misunderstanding perhaps?

9 Replies

equal-aqua•4w ago

the spa shell does only contain the root route

equal-aqua•4w ago

https://tanstack.com/start/latest/docs/framework/react/guide/spa-mode#how-does-it-work

SPA mode | TanStack Start React Docs

What the heck is SPA mode? For applications that do not require SSR for either SEO, crawlers, or performance reasons, it may be desirable to ship static HTML to your users containing the "shell" of yo...

flat-fuchsiaOP•4w ago

I may be getting confused because "root route" to me would be the content in src/routes/index.tsx, or whatever is created with createFileRoute('/') but it seems like when root route is mentioned in the docs that is referring to something else, just the shell? With the understanding that SPA mode by default only prerenders the root shell, which makes sense, now my question is how to get the / route content to prerender in SPA mode. The SPA docs state Other routes may also be prerendered and it is recommended to prerender as much as you can in SPA mode Basically just trying to get rid of the main content loading in after my shell on my landing page while retaining the benefits of SPA

equal-aqua•4w ago

checkout https://tanstack.com/start/latest/docs/framework/react/guide/static-prerendering

Static Prerendering | TanStack Start React Docs

Static prerendering is the process of generating static HTML files for your application. This can be useful for either improving the performance of your application, as it allows you to serve pre-rend...

flat-fuchsiaOP•4w ago

Seems like according to those docs this config should prerender the / route as well as the root route shell, but instead it's only rendering the shell:

    tanstackStart({
      spa: {
        enabled: true,
        prerender: {
          enabled: true,
          autoSubfolderIndex: true,
          crawlLinks: false,
        },
      },
      pages: [
        {
          path: "/",
          prerender: { enabled: true },
        },
      ],
    }),

    tanstackStart({
      spa: {
        enabled: true,
        prerender: {
          enabled: true,
          autoSubfolderIndex: true,
          crawlLinks: false,
        },
      },
      pages: [
        {
          path: "/",
          prerender: { enabled: true },
        },
      ],
    }),

I guess my goal would be to get a _shell.html and an index.html in my dist/client directory when built, this way my landing page is preloaded but every other page can load the app shell. Is this possible?

equal-aqua•4w ago

it should can you please create a GitHub issue including a complete reproducer project?

flat-fuchsiaOP•4w ago

I'm not able to create a github issue, but here is an easy reproduction of the behavior that I just verified:

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install

npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic
cd start-basic
npm install

And then used this for my tanstack plugin config:

    tanstackStart({
      srcDirectory: 'src',
      spa: {
        enabled: true,
        prerender: {
          enabled: true,
          autoSubfolderIndex: true,
          crawlLinks: false,
        }
      },
      pages: [
        {
          path: "/",
          prerender: { enabled: true },
        }
      ]
    }),

    tanstackStart({
      srcDirectory: 'src',
      spa: {
        enabled: true,
        prerender: {
          enabled: true,
          autoSubfolderIndex: true,
          crawlLinks: false,
        }
      },
      pages: [
        {
          path: "/",
          prerender: { enabled: true },
        }
      ]
    }),

And then npm run build and you should see in dist/client/ there is _shell.html but no index.html

equal-aqua•4w ago

I'm not able to create a github issue,

why is that?

flat-fuchsiaOP•4w ago

Probably not the best place to elaborate, but basically privacy/ethics stuff. Happy to provide anything else needed to look into this

Gaming

Programming

Can't figure out why / isn't pre-rendered in SPA mode

Did you find this page helpful?