Using react router dom v6.4 and its data api. Each route renders a page component containing a series of other components. There's a page that use a loader because it needs some data to render one of those contained components.
Is there a way to avoid that api request blocking the rendering of all the non data dependent components of that page?
Related
How to reload the page without reload partials in node js. I am creating a web application using node js, bootstrap, mongodb and handlebars. In my partial navbar the active class and js code for changing it into clicked component. when I render a page inside this the whole document is reloading and active class changing is uneffective in this case. I think it will be fixed with avoid reloading partials. There is any way to avoid reloading partials when page rendered.
I'm working on assumptions here as you haven't posted any code, I assume that:
You are using Handlebars to render the partials on your Server? (not on the client)
You have setup separate routes on NodeJS (are you using express?) so each route serves a different page, e.g. "/Index", "/About", "/Privacy", "/Contact" etc.
If my assumptions are true, each route on your server is providing an entire web page. It must re-load the partial because the client expects a complete html page for that route, and whenever the client changes route the server must provide a new page; if it didn't reload the partial then your navbar would be missing.
If you want a more seamless experience where the navbar stays there and you can modify its state, and only the remainder of the page reloads, you ought to try the Single Page Application approach. Frameworks such as Angular, React, VueJS or Svelte are designed with this approach in mind. Your routing and page templating is done client-side rather than server-side, but you can use a combination of both (I use Handlebars and VueJS)
I want to have Web Components hosted by one site, which another site cannot access the inner DOM or Javascript of. Exactly like with iframes, but which can be rendered inside the HTML better, for example sizing to incorporate their content etc.
There have been many discussions about this but in 2019 when I ask this, is anything implemented to do this?
EDIT: Let me be totally clear - I want the JS for the component to be served from our servers, requests to our server to be done from the component’s JS, render stuff in the component, but not let the enclosing site get it or put a trojan horse in the component. I am fine w the encloing site providing CSS but no HTML or JS. Can this be done?
How would it communicate with the component, analogous to postMessage?
Finally, is it possible for the COMPONENTS JS to access the outer containing website’s DOM and thereby find other components and communicate? This last one ain’t possible with iframes on another domain.
Simple answer: No.
Web Components Do not isolate JS. Just DOM and CSS.
But you can put all of your JS within your class, or in an ES6 Module, or in an IIFE and that would isolate it.
But I doubt that Web Components will ever be a 100% replacement for <iframe>. Nor do I think they were meant to be such.
I would not be surprised if the <iframe> were to become deprecated and eventually removed from browsers.
UPDATE
Keeping ALL of the JS code inside your component's class or inside an IIFE will somewhat protect the code. The HTML and CSS are already sand-boxed inside the component. If your code was in an IIFE or in an ES6 module then other code would have to have access to the source file and be able to modify it in order to change it.
Communication from the outside with the component is done by the outside code calling functions of the component or setting properties and attributes of the component.
Communication from the component to the outside is traditionally done by dispatching events. Talking directly from one component to another is a messy option and really should be avoided. It is up to the parent code to listen to events from all its children and then call functions or set properties/attributes on other children.
If you use shadowDOM then the enclosing site can only change the CSS of your components if you make certain aspects of the CSS available to them. This is done either with CSS Varaibles or by using <slot> to allow the enclosing app to place their own HTML/CSS inside your component. This could open you up to some things you may not want though.
The code that is in the class, or in an IIFE can always access anything in the DOM. Remember that JS is not sand-boxed and can do anything any other JS can do. But it is more difficult, though maybe not impossible, for the enclosing app to make changes to your component classes. Make sure your classes are frozen to prevent sub-classing.
One other thing to know is that if you have someone else loading their website from their server and then loading your component files from your server then you may have CORS problems. Especially if your code tries to load data using XHR/Fetch, then you may have CORS issues.
I am using react-responsive-redux in which the whole Implementation of media queries is done based on a variable in state called fakeWidth . To get it working according to the docs we need to dispatch a redux action during request handler. In my project I do that in the serverEntry.js file, though the in built helper components of the module did not work because in my project I am using immutableJs.
So Now I am using selectors.js to get the fakeWidth that is present in the state.
This works well but the component in the media query component (that says Mobile device) does not show up in the first render of the app.
I am not able to figure out why is that happening and what should I do to prevent that.
I've recently dived into React+Flux on the front-end, and I love it! But I want to also be able to use React on the back-end to avoid having to duplicate views and rendering logic.
I've seen that React supports server-side rendering if you use Node, but I do not use Node for my back-end logic.
So I'm wondering, can I set up a daemon written in Node that just renders HTML based on the data it receives and the root React component?
What I have in mind is to have my back-end application call this daemon with data already prepared (so that domain logic can live on my main back-end application), get HTML, and return that to the front-end.
Is this approach feasible? Has this been done before? I'd love some feedback!
I see that it's been a month and there are still no comments, I will share some of my understandings.
We can use this setup:
An API written in PHP or something similar that serves data.
Isomorphic React components - render on the server, attach event listeners on the client.
Server-side (Node) - the React component uses AJAX calls to get its props from the API and embeds them into a <script id="props" /> tag in the HTML as a JSON string.
Client-side - the component checks the script tag for props. If there is data, then it uses that to skip the re-rendering; if not (due to a server error or something), it can still use AJAX to get its props.
The main idea is that the website is isomorphic (server and client share the same code), so your existing front-end can be easily adapted to this setup.
A good place to start is a simple example about isomorphic React components. This tutorial can also provide an overview to this subject.
I am working on a single page web application and have run into a question for which I cannot seem to find the answer.
Is there a way to load partial views from server side when using angular? I am using nodeJs, with express and Jade, and wanted to load partial views into angular, but I am confused on how I would do such. Is there any particular guideline that I should follow to structure my files?
I do not want to load all of my partials from angular, so I wanted to know if there is a way to load the views in from node.
EDIT: What I mean to ask is, am I allowed to load in partial jade views on angular? Does that have any effect on the way the page renders?
You can't. Angular is a Single Page Application framework, it means that you application (ie HTML+CSS+JS) is loaded once at first load in the browser, and all what happens is a communication of raw data (JSON over REST for example), Angular is in charge of displaying correctly the already-loaded-html correctly according to these raw data.