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 somewhat doesn't match, hydration did not complete successfully.
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 })=>{// commenting 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 server side. 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
-
hi,
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 somewhat doesn't match, hydration did not complete successfully.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 server side. 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