I am developing an application using React/Redux. The application reads from a Json file and saves changes back to the json file.
Its a two page application but I am not using any router. All the editing and saving part is done on the second page, where I am hiding the home page.
My problem is that whenever I am saving something it goes back to the home page, which I know is the default behavior as the source is getting updated. So it is re-rendered. I am using different action for the second page rendering.
But what I am looking for is a simple solution for it to stay on the second page where I can show a success message that the data was saved.
"Where you are hiding the home page" - this suggests you are looking for clientside routing, for which react router would be the normal option: https://github.com/ReactTraining/react-router. You can also look into doing it purely with hooks: https://blog.logrocket.com/how-react-hooks-can-replace-react-router/
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'm studying ways to develop a SEO-friendly React website with CSR.
I have read many articles pointing out that to provide a SEO-friendly website, one should go with the SSR approach.
To my knowledge, when using browser's view source feature in CSR, the html content is a bunch of javascript bundle files and the actual html would not be present since view source only shows what's rendered from server side. while in SSR html is rendered and passed to the browser and the displayed html would be present in source view of the page.
However https://divar.ir (a well known retailer site) seems to be using CSR (upon clicking any link, the data is fetched from an api endpoint in json format via an ajax call and then it looks like the page is rendered in client side).
The thing is, when I view the source of the page even after clicking any link, I can see the actual html that is being displayed.
So to sum it up, How can I use CSR in React, and when I view the source of a page, I actually see the html that is being displayed to the user?
Server side rendered react applications usually only pre-render the initial page load. Subsequent navigation may still be entirely handled and rendered by the client.
By using the view source tool it will open the code in a new tab (at least in chrome) that leads to a fresh load of the current route from the server. If the application is server side rendered you will receive a pre-rendered version of that route and therefore see the html for that route.
By providing a sitemap of your website a bot can discover all SEO relevant routes by visiting the urls provided in the sitemap. Each of those requests are independent requests to the server and will be pre-rendered in contrast to how a real user would navigate the page by clicking the links.
I just tried something rather trivial: get the source code of a web page (by saving it) and count how often a certain phrase occurs in the code.
Turns out, it doesn't work if that page uses Polymer / web components. Is this a browser bug?
Try the following: Go to http://www.google.com/design/icons/ and try to find star_half in the code (the last icon on the page). If you inspect the element inside of Chrome or Firefox, it will lead you to
<i class="md-icon dp48">star_half</i>
but this won't be in the source if you copy the root node or save the html to disk.
Is there a way to get the entire code?
Reason for this behavior is probably how source viewing( and source saving as well?) works for browser and because shadow roots are attached to web components on the client side.
When you press ctrl-u on a web page, browser essentially does a network call again on the same url to fetch a copy of what server returned when you hit that url.
In this case, when this page renders, browser identifies the component icons-layout and then executes code to attach a shadow-root to this node. All of this happens when your page reaches the client(browser).
When you are trying to save this page, you are saving what server returned not current state of the page. You'll see same behavior if you fire up chrome console and try to save an icons-layout node.
Is there a way to get the entire code?
I don't know how to do it from browser but phantomjs provides a way to save client side rendered html.
I have this theme http://themes.two2twelve.com/site/fluidapp/light/ installed on my website running wordpress. I converted the template to a wordpress theme by following the steps here: http://thethemefoundry.com/blog/html-wordpress/ and its all working fine.
However, I have now been given the crazy task to integrate a "Back button" function in it.
What they want is to have some sort of Back button functionality (or the browser one) so when they open Team and they press Back - they go back to Home. The template is basically one-paged, you can see so in the source code.
One way I can see this happening is if I make every page a different .php file, upload them to my theme folder and then just hyperlink them. like www.yoursite.com/team.php
Another possible way (I think) would be to create a page.php template file and then post the pages using wordpress. Question: How do I tell wordpress to use page.php as the page template file?
Can you think of another way to integrate this functionality? Thanks a lot in advance.
If it always is going to return the user to the startpage you could just use the home_url(); function.
Back
If you got more advance structure and you want the button to just redirect the user back one page, you should use javascript.
Back
page.php is the default template for wordpress pages. So if no other is selected in admin, page.php will be used.
If you're using javascript to load the new content, you could use javascript pushState()and popState() to log the stuff to new url's, and it gets added to the browser history. Here's an example.
In my web client I have inside an if statement a command like this
myList = myBean.getNewList();
that references a global List and is displayed in table form in the web page.
How is it that my web page doesn't update the table on screen till I refresh the page again? It seems to refresh by its self straight away after a button is pressed
Where is that code? In the *.jsp file, or in some backing java action?
Most likely, that code is never called until there is a request made to the server, via a button click which would probably do one of the following (depending on your application):
Submitting a form or making some request to the server and building some response object to be rendered by your browser
Make some Ajax call to change the innerHtml of one of your DOM elements
use jQuery (or some other javascript) to change the innerHTML on the fly with some hard-coded data