SolidJS•8mo ago•

1 reply

Stream SSR & BFF with full SPA transitions

Hey!

Question about implementing :solid: SSR & BFF with full SPA transitions. Pls, help

Have a classic BFF with file-based routing on Fastify.
The endpoints call several APIs, gather the data, and save it in

fastify.state

fastify.state

. After the route handler finishes, a onSendAsyncHookHandler is invoked, which passes to

renderToStream

renderToStream

a bundle of links to assets (collected from the Vite manifest),

initialState

initialState

, and a few other parameters. And then returns a stream to the client:

const stream = render({
  ...hydrateAssets,
  url: request.raw.url ?? '/',
  initialState: request.server.state,
  production: isProduction
});
await pipeline(stream, reply.raw);
return stream;

const stream = render({
  ...hydrateAssets,
  url: request.raw.url ?? '/',
  initialState: request.server.state,
  production: isProduction
});
await pipeline(stream, reply.raw);
return stream;

In the

App

App

component, I render the entire HTML document. In the

<head>

<head>

I add

<link>

<link>

tags for the assets and a

<script>

<script>

pointing to the client entry for hydration. I store the

initialState

initialState

in a custom

StoreProvider

StoreProvider

. I’m using a

Router

Router

wrapped in

Suspense

Suspense

with simple lazy routes that import each page.

The core of the problem:
In the current implementation, without using

explicitLinks

explicitLinks

, regular

<a>

<a>

links on hover and the

useNavigate

useNavigate

callback load some static chunks for the target route. But I also need to send a request to the BFF to fetch JSON for the store, which should then be merged into the current store.

I imagine I’d like to intercept the click/navigation event, send a single request with

application/json

application/json

, show some kind of progress bar (classic for an SPA), wait for the response, and at the moment of the transition merge the new store into the old one.

Question:
So, how’s the best way to implement this? How do you handle it?

Mind sharing your experience? Thanks!

SolidJS•8mo ago•

1 reply

Folco

Stream SSR & BFF with full SPA transitions

Hey!

Question about implementing :solid: SSR & BFF with full SPA transitions. Pls, help

Have a classic BFF with file-based routing on Fastify.
The endpoints call several APIs, gather the data, and save it in

fastify.state

fastify.state

. After the route handler finishes, a onSendAsyncHookHandler is invoked, which passes to

renderToStream

renderToStream

a bundle of links to assets (collected from the Vite manifest),

initialState

initialState

, and a few other parameters. And then returns a stream to the client:

const stream = render({
  ...hydrateAssets,
  url: request.raw.url ?? '/',
  initialState: request.server.state,
  production: isProduction
});
await pipeline(stream, reply.raw);
return stream;

const stream = render({
  ...hydrateAssets,
  url: request.raw.url ?? '/',
  initialState: request.server.state,
  production: isProduction
});
await pipeline(stream, reply.raw);
return stream;

In the

App

App

component, I render the entire HTML document. In the

<head>

<head>

I add

<link>

<link>

tags for the assets and a

<script>

<script>

pointing to the client entry for hydration. I store the

initialState

initialState

in a custom

StoreProvider

StoreProvider

. I’m using a

Router

Router

wrapped in

Suspense

Suspense

with simple lazy routes that import each page.

The core of the problem:
In the current implementation, without using

explicitLinks

explicitLinks

, regular

<a>

<a>

links on hover and the

useNavigate

useNavigate

application/json

application/json

Stream SSR & BFF with full SPA transitions

Similar Threads

Stream SSR & BFF with full SPA transitions

Similar Threads

Similar Threads

Similar Threads