I'm working on a coloring demo. I have an SVG file, but I decided to use svgr to convert it to a React component. This will allow me to easily edit its colors and handle onClicks for every individual cell for the user to color in. I want to have all of these components inside a server and send it through express when I fetch for it. However, I'm not sure how to send React code through Express. I looked into server side rendering, but all of the tutorials I have found render to a static index.html. I just simply want to send a component over for me to render. Could someone help me on this? I could elaborate more if needed.
You could try to use some kind of Lazy loading of the JS on frontend side. You can read more on:
https://www.newline.co/fullstack-react/articles/Declaratively_loading_JS_libraries/ or
React lazy loading - when to use
Related
I have used libraries like Codepush to update the the App over the air.However, with Codepush the new bundle is built and then existing one is replaced with the new one .
I wanted to change some javascript code for a component (maybe using an API or anything else wherein I can inject some javascript file from the server) without updating the existing bundle .
For eg=> If I have a simple UI wherein top half is empty.
The injected Javascript file (child component in the top half of the UI) may contain some Component and its handlers (can be a button or image or textinput field,etc).
This injected file is loaded as a component from the server, so I can dynamically change the component from the server file itself.
Is there any particular way to do this?
It's unlikely that you're able to push a file into an already transpiled and minimized bundle.
The better option would be to make an API call from your frontend to your backend to retrieve dynamic data. This data can then be manipulated and shown on your frontend.
Then all you need to do to change what is shown on your frontend is to change what your API returns from your backend.
EDIT:
If the component initially loaded is a simple button and post api response it turns into a modal wherein the entire modal UI as well as event handler code comes in from the API response as a component .Is something like that possible?
No.
You cannot send an uncompiled component to the front end. Remember the bundle that is given to the client is transpiled minified javascript. You cannot conditionally recompile the application for a single user, or if you could - seems like an incredibly bad idea.
What you could do is allow your frontend to receive and render HTML content from an API call. No recompiling has to happen, however you won't be able to use React Classes etc. It would have to be pure HTML/CSS/Javascript.
I have a very little knowledge about SSR.
Currently, I have two servers. I have built a CSR Single Page App using React on one server and backend on Nodejs + express on another server. My app has a login page.
How can I move my existing Login component logic to SSR and after successfull login all other components must work from CSR. I don't know how to achieve this goal.
Do I need to turn my CSR react app server into SSR by using something like Nextjs and the backend nodejs server should continue to operate like before?
Or do I need to use SSR logic on my backend Nodejs server?
Or do I need to migrate my whole CSR react app into SSR? Then do i still need backend nodejs server?
I might sound confusing asking this question. Please let me know if i need to explain it a bit further.
You will use just one NodeJS + Express server. You define some regular endpoint routes to provide things like login functionality, signup and so on. But also a "catch-all" route at the end where you will render your react app to a string via node and send it back to the browser as HTML.
Not too long ago I did a very basic SSR example using typescript and react. I hope this will be helpful!
https://github.com/akimthedream/server-side-rendered-typescript-react
I am asking this because I don't know if it's possible and don't know the terms to label this.
I have a VueJS crud app that grabs data from an API backend, and then renders it in great HTML. Thanks JavaScript, and V8 since I use Chrome.
Now, I'd like to send someone an HTML email with a snippet of the table embedded. That is a backend process. But I obviously don't want to rewrite the VueJS HTML on the backend or in another place.
Is there any way, from the backend only, to call the VueJS coding and grab the HTML, or an innerHTML section, as if I'd called it on the front end?
The answer to this is to use NodeJS and perform Server Side Rendering
This will require using the render method in VueJS which is different than what my CRUD application is written in.
Also as discussed in the link above, reactivity doesn't exist on the server side.
And in addition, the actual data that would be listed in a table needs to be pre-fetched.
I'm trying to use react-router right now, with express.js. My final objective is:
When a URL hits the server, it will use server-side rendering to render the output.
Once in the client, future clicks on the Link component will cause react-router to render on the client (no need to do a full round trip to the server).
What I got so far:
Make server rendering like this.
Make the Link component to work properly, when I render on the client.
My problem:
Once I render on the server, the ouput is not interactive. I mean, no event handler is associated with the DOM. That's comprehensible. What I'm looking for, though, is a way to blend server and client rendering. I mean, the server renders the output but somehow it gets interactive in the client. If I get this, I'll be able to use Link on the client and that will fulfill my needs.
If you call React.render(component, element) on the client where element points to a DOM node that contains your server-rendered React markup and component is instantiated with the same props as on the server (and assuming the props/state matches all the way down), React will transparently upgrade your static markup into an interactive React app.
See this JSFiddle example that demonstrates this technique: http://jsfiddle.net/BinaryMuse/ddvdppeg/ (note that there is a 1 second delay before the markup is upgraded to an interactive app, but only for demonstration purposes).
I'm using Express framework on NodeJS (hosted by Heroku) to create my web site. I'm also using the React framework to create my components.
I have several HTML files with divs inside and React components which can be rendered in those divs.
When a user chooses a route (e.g. /movies) I want to be able to associate one HTML file with a component and return it back to the user. I already looked for a solution, but all of them talk about server-side rendering and sending back HTML files.
Is there another solution?
Check out react router you don't have to use server side rendering, you just need to give a react component that you want to return when a route is requested.
The standard way to do this now is to build a Single-Page applications and redirect all requests to /, and the front end routing will handle the required page to load.