You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am rendering my application in SSR, with apollo client. When I use loaders within a route, my application double renders like below(CSR content renders below SSR content). This usually means contents between CSR and SSR doesn't somewhat match.
SSR Content
-------------
CSR Content
I am just presuming this is related to loaders because when I comment out loaders within the route, everything works fine(no double render, SSR and client hydration works fine). Below is my code setup.
// BrowserRoute setupconstLoadableComp=loadable(()=>import('./Comp'))functionContextWrapper(){return(<EntryContextProvider><Outlet/></EntryContextProvider>)}exportconstserviceRouter: RouteObject[]=[{path: 'service/*',element: <ContextWrapper/>,children: [{path: 'detail/*',element: (<Suspense><LoadableComp/></Suspense>),loader: ({ params })=>{// comment out this part, things work fine// doesn't matter which type of data I returnreturn'loader data'},},
...
],},]// hydration part in separate file...constrouter=createBrowserRouter(serviceRouter)hydrateRoot(CONTAINER,<ContextProviders> // custom ContextProviders
<RouterProviderrouter={router}</ContextProviders>
)
now this is the part where I did not follow the docs for SSR. I did not use StaticRouterProvider, since I use apollo and I use their renderToStringWithData to create html string and load data. I did not need to load data separately again using createStaticRouter and createStaticProvider.
// SSR rendering consthtml=renderToStringWithData(<StaticRouterlocation={location}><AppContent/></StaticRouter>)// I create AppContent from serviceRouter using useRoutes hook, like below: exportfunctionAppContent(){constelement=useRoutes(serviceRouter)returnelement}
I am trying to use loaders just for CSR, since I am calling some slow loading data at CSR and not during SSR. Is there something I am missing? Again, just commenting out the loaders from serviceRouter makes everything works fine.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
hello,
I am rendering my application in SSR, with apollo client. When I use loaders within a route, my application double renders like below(CSR content renders below SSR content). This usually means contents between CSR and SSR doesn't somewhat match.
I am just presuming this is related to loaders because when I comment out loaders within the route, everything works fine(no double render, SSR and client hydration works fine). Below is my code setup.
now this is the part where I did not follow the docs for SSR. I did not use
StaticRouterProvider
, since I use apollo and I use theirrenderToStringWithData
to create html string and load data. I did not need to load data separately again usingcreateStaticRouter
andcreateStaticProvider
.I am trying to use
loaders
just for CSR, since I am calling some slow loading data at CSR and not during SSR. Is there something I am missing? Again, just commenting out the loaders fromserviceRouter
makes everything works fine.Beta Was this translation helpful? Give feedback.
All reactions