Issues with redirects and partials.
Hello, I am having some problems when I try to use partials in fresh. My partial is located in _app wrapping everything like in the example in the docs.
<body f-client-nav>
<Partial name="body">
<Component />
</Partial>
</body>
This makes my site feel significantly better to use and prevents the background and nav bar from flashing between pages.
My issue is that when redirecting (for example after a successful login or attempting to go to a protected route) the url doesn't change and none of my pages load correctly until the page is refreshed. All a tags work as expected until a redirect occurs.
When the f-client-nav and partial are removed the site works as expected. Hope someone has a fix because I enjoy the partial being used.
Thanks.
6 Replies
Hello! It's great to hear that you're enjoying the benefits of using Partials in Fresh to enhance the user experience of your site. Based on the documentation, Partials are designed to make Fresh apps feel more app-like by blending client and server-side navigation, allowing you to mark areas in your page that change on navigation and only update those, while keeping the state of your Island components intact.
However, it seems you're encountering an issue with redirects not updating the URL or loading pages correctly when using the
f-client-nav attribute and Partial component. This is not the expected behavior, as Partials should support navigation and updates without requiring a full page refresh.
Here are a few steps you can take to debug the issue:
1. Check for Errors: Look for any errors in the browser's console that might indicate what's going wrong during the redirect process.
2. Review Redirect Logic: Ensure that the logic handling your redirects is compatible with Fresh's client-side navigation. Redirects might need to be handled differently when using f-client-nav.
3. Examine Network Activity: Use the browser's network tools to observe what happens when a redirect is supposed to occur. Check if the expected requests are made and what responses are received.
4. Update Fresh: Make sure you're using the latest version of Fresh, as there might have been bug fixes or improvements related to Partials and navigation. You can update your project by running:
5. Consult Fresh Examples: Compare your implementation with the examples provided in the Fresh documentation or other Fresh projects that use Partials successfully.
6. Simplify Your Setup: Try to reproduce theissue with a minimal setup. Sometimes, other parts of the application can interfere with the navigation, so isolating the Partial and navigation logic can help identify the problem.
If after these steps the issue persists, it might be helpful to provide more specific details about how you're handling the redirects in your application. Are you using a specific function or method to perform the redirects? How are your routes set up, especially the protected ones? This information could give more insight into the problem.
Remember that the Fresh community and the documentation are valuable resources, and you can often find additional help or similar cases that have been resolved. Keep experimenting, and I hope you'll find the fix soon! 🦕
What u mean bu redirect? U mean when u actually want to go to a href without f-client-nav?
There is an open issue at the moment in regards to redirect with partials that's on my todo to fix https://github.com/denoland/fresh/issues/2404
GitHub
Client Address Bar wont update after 303 redirect response. · Iss...
The correct Page will load but the Address Bar is still showing the last Page. At the API the status 303 is used with a new location header.
Do you know if there is a way I can opt out of partials in certain scenarios that are causing issues?
You can always pass
f-client-nav={false} on a link or a containing element to opt out of partials