SSR Loading State with Pages Rotuer
Answered
Whiteleg shrimp posted this in #help-forum
Whiteleg shrimpOP
I am trying to figure out how to handle loading states/animations for SSR pages so users aren't blocked with no UI change while pages are rendered on the server. I found this post in the docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming, but this appears to be only for the app router and I am still using the pages router. Is there a way to achieve this with the pages router?
Answered by joulev
i think you can use [router events](https://nextjs.org/docs/pages/api-reference/functions/use-router#routerevents) to detect navigations to a slow page then render a loading screen/a [progress bar](https://ricostacruz.com/nprogress/).
it's not directly translatable to the loading UI in the app router but it should be sufficient.
it's not directly translatable to the loading UI in the app router but it should be sufficient.
2 Replies
@Whiteleg shrimp I am trying to figure out how to handle loading states/animations for SSR pages so users aren't blocked with no UI change while pages are rendered on the server. I found this post in the docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming, but this appears to be only for the app router and I am still using the pages router. Is there a way to achieve this with the pages router?
i think you can use [router events](https://nextjs.org/docs/pages/api-reference/functions/use-router#routerevents) to detect navigations to a slow page then render a loading screen/a [progress bar](https://ricostacruz.com/nprogress/).
it's not directly translatable to the loading UI in the app router but it should be sufficient.
it's not directly translatable to the loading UI in the app router but it should be sufficient.
Answer
Whiteleg shrimpOP
Gotcha, yeah I have used this approach before. I dont love it but better than nothing. Thank you!