I have been searching for a solution on this and have not had any luck. I have a app using the BrowserRouter and has dynamic routes as the user goes deeper into the flow. I have some server side rendering for static routes that work for rendering after refresh, but my dynamic routes get a 404 upon refresh.
I'm think that getting this to work (refreshing dynamic routes) is probably not possible, but I'm hoping that my application can at least forward the user to the land page or route upon refresh of a dynamic route. That would be preferable to a 404 error page on refresh. Just not sure how to achieve that.
Hope that makes sense for the most part. Thanks is advance for any help.
Related
I have a Blazor Webassembly PWA application with two razor pages: Index.razor and History.razor. Every time a user navigates between the two pages, there is a short delay where the "Loading..." HTML is displayed on the page before the app loads the actual razor page.
I understand that when you first open the app in your browser it needs to download all the necessary assemblies and load them. But once they've navigated to site, why does each navigation require that the "Loading..." html be shown? It's often a short period of time (I have my service worker caching everything), but as a user this would feel distracting to me.
I haven't been able to find anything online explaining this. I'm sure I'm probably missing how this actually works, or maybe I have setup my page/navigation incorrectly? Any information on this would be greatly appreciated. How does the page loading work with each navigation? Is there a way to prevent this?
UPDATE: Using the the Blazor WebAssembly template in Visual Studio as an example and following Mister Magoo's comment, I was able to figure out that the reason the "Loading..." shows up is because I am doing a full reload of the pages. That leads me to one last question. If the user is currently on the Index page, and they click to navigate to Index, is there a way to clear out all the Models on that page without forcing a refresh?
There are many strategies on caching in service worker you can set it depends on your needs
https://developers.google.com/web/tools/workbox/modules/workbox-strategies
I think "Cache First" strategy is proper for you
I would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I am planning to design a web application with multiple HTML and JSP pages. The first page of myapp (index.html) loads up with the url
localhost:8080/mywebapp
without an explicitly pointing it to
localhost:8080/mywebapp.index.html
because web-xml has index.html in its startup script. Thats perfectly fine!
But how to toggle between multiple JSPs and HTMLs that are in the web app keeping the URL constant
localhost:8080/mywebapp
The user should not be knowing the navigation pattern when he is using the web-app.
Ideas on any frameworks or implementations are highly appreciated.
Thanks
Leaving aside the fact that you shouldn't do this, essentially what you have to do is bypass the standard routing method of your application.
You can do this one of two ways.
1) Use Ajax to call all the different URLs you need from within a single page. This will give you the single URL you're looking for though it doesn't of course prevent anyone from trivially working out what the actual navigation URLs are and unless you build a single page app and do some really evil interdependencies finding your navigation is trivially easy.
2) Your second option would be to create a single servlet which takes parameters which identify which part of your application you want to use. If you really wanted to be horribly evil you could hash those arguments with some form of per user short duration cookie so that even if they identify the actual web calls you're making running them manually won't actually work.
Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.
A basic app usually has a
1) Login page/Index page
2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.
since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.
Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.
Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.
Wanted to check if there are any better ideas around.
Thanks in advance!!
well in the project i'm working on with angularjs i took this approach:
i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate.
i did this in my project. my login page was the only non-Ajax page that i had.
edit:
for authetication part if you wish to implement the authentication through angular you migh want to check this.
Any idea what happens when my Nodejs app returns a webpage on a favicon request? I don't have a way to simulate this but I see that my app continuously gets such requests and wonder if end users are getting the pages right.
This will just cause your page to have the default icon, nothing really bad. However, I think it'd be better style to respond with a 404.