disabled javascript in browser

I'm not sure that I understand the SSR thing correctly, but in my understanding it means that the ready html is rendered on the server and sent to the browser, so even with JavaScript disabled, the page would look like it should.
What I see now is that the doesn't load it's contents if I disable JS. My component is roughly like this:

export const Route = createFileRoute(
  "/{-$a}/_layout/_main/_other/b/c/$d/$e"
)({
  loader: async ({ params, context }) => {
    const data = await context.queryClient.ensureQueryData(
      getDataQueryOptions({
        d: params.d,
        e: params.e,
        a: context.a,
      })
    );
    return { data };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { data } = Route.useLoaderData();
  return <> // render data here </>
}

export const Route = createFileRoute(
  "/{-$a}/_layout/_main/_other/b/c/$d/$e"
)({
  loader: async ({ params, context }) => {
    const data = await context.queryClient.ensureQueryData(
      getDataQueryOptions({
        d: params.d,
        e: params.e,
        a: context.a,
      })
    );
    return { data };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { data } = Route.useLoaderData();
  return <> // render data here </>
}

With JS enabled the page loads as expected, and I see that in the Network tab there is no any fetch requests from JS. Nevertheless, if I turn off the JS, the page is empty..

TanStack•4mo ago•

3 replies

foolish-indigo

disabled javascript in browser

export const Route = createFileRoute(
  "/{-$a}/_layout/_main/_other/b/c/$d/$e"
)({
  loader: async ({ params, context }) => {
    const data = await context.queryClient.ensureQueryData(
      getDataQueryOptions({
        d: params.d,
        e: params.e,
        a: context.a,
      })
    );
    return { data };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { data } = Route.useLoaderData();
  return <> // render data here </>
}

export const Route = createFileRoute(
  "/{-$a}/_layout/_main/_other/b/c/$d/$e"
)({
  loader: async ({ params, context }) => {
    const data = await context.queryClient.ensureQueryData(
      getDataQueryOptions({
        d: params.d,
        e: params.e,
        a: context.a,
      })
    );
    return { data };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { data } = Route.useLoaderData();
  return <> // render data here </>
}

With JS enabled the page loads as expected, and I see that in the Network tab there is no any fetch requests from JS. Nevertheless, if I turn off the JS, the page is empty..

disabled javascript in browser

Similar Threads

disabled javascript in browser

Similar Threads

Similar Threads

Similar Threads