T
TanStack•3d ago
logical-cyan

Is there a way to attach stuff to "window.__stuff__" during SSR?

I'm wondering if it's possible to have the root route contain 
<script>
window.__stuff__ = somethingWeOnlyKnowOnTheServer;
</script>
<script>
window.__stuff__ = somethingWeOnlyKnowOnTheServer;
</script>
Is this possible?
8 Replies
jolly-crimson
jolly-crimson•3d ago
Have you tried using the scripts options in the route? 
export const Route = createFileRoute('/path')({
  scripts: () => [
    {
      children: `window.__stuff__ = ${somethingWeOnlyKnowOnTheServer}`,
    },
  ],
})
export const Route = createFileRoute('/path')({
  scripts: () => [
    {
      children: `window.__stuff__ = ${somethingWeOnlyKnowOnTheServer}`,
    },
  ],
})
What is your use case?
logical-cyan
logical-cyanOP•3d ago
let me try that My use case is that I'm managing my auth session on the server side, before any HTML or javascript is downloaded to the client at all. I want to inject some info about the user onto the window so the client-side doesn't need to re-fetch it.
correct-apricot
correct-apricot•2d ago
Are you by any chance using TanStack Query? The query cache can be populated on the server, you can use it server-side while rendering, and then the query cache + html is sent to the client, the client won't have to do any extra fetches because the query cache already has the data
logical-cyan
logical-cyanOP•2d ago
I am not using query yet, but I thought this should have been pretty easy in start without needing to integrate more libs
stormy-gold
stormy-gold•2d ago
how do you consume this injected "stuff"?
logical-cyan
logical-cyanOP•2d ago
In __root.tsx: 
const stuff = window?.__stuff__ ?? 'fallback';

<MyComponent stuff={stuff}>
const stuff = window?.__stuff__ ?? 'fallback';

<MyComponent stuff={stuff}>
logical-cyan
logical-cyanOP•2d ago
upon further reading I found this: https://tanstack.com/router/latest/docs/framework/react/guide/ssr#rendering-the-application-on-the-server
SSR | TanStack Router React Docs
[!WARNING] While every effort has been made to separate these APIs from changes to Tanstack Start, there are underlying shared implementations internally. Therefore these can be subject to change and...
logical-cyan
logical-cyanOP•2d ago
So now I'm thinking I can do this? 
// src/entry-server.tsx
import {
  createRequestHandler,
  renderRouterToString,
  RouterServer,
} from '@tanstack/react-router/ssr/server'
import { createRouter } from './router'

export function render({ request }: { request: Request }) {
  const handler = createRequestHandler({ request, createRouter })

  return handler(({ request, responseHeaders, router }) =>
    renderRouterToString({
      request,
      responseHeaders,
      router,
      children: (
        <script>window.__stuff__ = {await getStuff()}</script>
        <RouterServer router={router} />
      ),
    }),
  )
}
// src/entry-server.tsx
import {
  createRequestHandler,
  renderRouterToString,
  RouterServer,
} from '@tanstack/react-router/ssr/server'
import { createRouter } from './router'

export function render({ request }: { request: Request }) {
  const handler = createRequestHandler({ request, createRouter })

  return handler(({ request, responseHeaders, router }) =>
    renderRouterToString({
      request,
      responseHeaders,
      router,
      children: (
        <script>window.__stuff__ = {await getStuff()}</script>
        <RouterServer router={router} />
      ),
    }),
  )
}

Did you find this page helpful?