absent-sapphire

What is the expected behaviour of ssr:false

I asked a previous question that ssr:false breaks vinxi. I now use https://tanstack.com/router/v1/docs/framework/react/examples/basic-ssr-file-based as my starting point so i only run "node server.js". My entry-server.tsx is also identical. As soon as i set ssr:false on a route it is correctly not rendered on the server, but it is also not rendered on the client so it never appears. Do i need to declare the route differently? This does not render anything:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({
    component: About,
    ssr: false,
});

function About() {
    return <div className="p-2">Hello from About!</div>;
}

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/about")({
    component: About,
    ssr: false,
});

function About() {
    return <div className="p-2">Hello from About!</div>;
}

React TanStack Router Basic Ssr File Based Example | TanStack Route...

An example showing how to implement Basic Ssr File Based in React using TanStack Router.

5 Replies

absent-sapphireOP•7mo ago

Hm I am now running the exact example locally (checked out the repo) and can't reproduce this. however slightly adapting the component, the text "this is a server component" is still briefly visible, so SSR is not really disabled? I am still on react 18 and have react-router (v7) still installed (exploring the migration), could that be a problem?

import { createFileRoute } from '@tanstack/react-router'
import * as React from 'react'

export const Route = createFileRoute('/error')({
  component: ErrorComponent,
  ssr: false,

})

function ErrorComponent() {
  const isServer = typeof window === 'undefined'
  return (
    <div className="p-2">
      <h3>The loader of this page has a 50% chance of throwing an error!</h3>
      {isServer && <p>This is a server component</p>}
    </div>
  )
}

import { createFileRoute } from '@tanstack/react-router'
import * as React from 'react'

export const Route = createFileRoute('/error')({
  component: ErrorComponent,
  ssr: false,

})

function ErrorComponent() {
  const isServer = typeof window === 'undefined'
  return (
    <div className="p-2">
      <h3>The loader of this page has a 50% chance of throwing an error!</h3>
      {isServer && <p>This is a server component</p>}
    </div>
  )
}

oh an important piece of information: i am actually just using start for SSR and want to stick with tanstack/router for now

absent-sapphireOP•7mo ago

I found my issue. The Quick start does not specify to add the <Script/> tag here: https://tanstack.com/router/v1/docs/framework/react/quick-start#srcroutes__roottsx Neither does the SSR guide, so you end up without it, but it is required for SSR to work.

Quick Start | TanStack Router React Docs

If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router using both file-based route generation and code-based rout...

gradual-turquoise•7mo ago

https://tanstack.com/start/latest/docs/framework/react/build-from-scratch#the-root-of-your-application

Build a Project from Scratch | TanStack Start React Docs

[!NOTE] If you chose to quick start with an example or cloned project, you can skip this guide and move on to the guide. So you want to build a TanStack Start project from scratch? This guide will hel...

gradual-turquoise•7mo ago

it is indicated if you want server capabilities, check tanstack Start

absent-sapphireOP•7mo ago

Yeah this is in the start docs but not in the router docs. I am not using Start as I read here (https://discord.com/channels/719702312431386674/1320033010485035038/1320033010485035038) that i can't separte the deployment of client and server components which is what I want. As I also don't need any of the other Start features right now, I though this path would be the easiest.

Gaming

Programming

What is the expected behaviour of ssr:false

Did you find this page helpful?