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
Related
I'm working on this web app that include several pages.
I really would know if it's better handle the router in the backend (Node.js) or in the frontend (React.js) or with both (I didn't understand in the Internet).
For example, how have I to work with the login page (that will re-direct on the user area).
Thanks
I don't know how big your project is, or its requirements, but if this is a personal project I would suggest using the React Router Library. You can make a call to your Express app from the Front, and based on the response you get back you can route the user to wherever.
In a project of mine I had an express route for login that looked for the user in a database, then checked to see if they provided the correct password. If the user provided the wrong password or if the account wasn't found I sent back an error message. If the user provided the right password I sent a success message to the front. I would listen for the response on the frontend, if I received a success message, I would call useNavigate from React Router to route the user to the user page.
Here is the documentation for React Router Dom: https://www.npmjs.com/package/react-router-dom
If this is a bigger project and you need to think about accessibility and search engine optimization, you would have to find a way to render React from the backend. Its called server side rendering, which I'm not familiar with.
Hope this helps a little.
I am a little confused and the more I read, the more confused I get...
So I have an JS Express Backend that is protected by a PassportJS local Strategy and uses express-session. How would I proceed within my React Set Up now? Can I just make a route on my server, that checks whether the User is logged in or not, and then depending on the response set a React State accordingly, which allows access to protected routes?
I assume all redirecting (for example for unauthorised request to a route) then takes place in the react app and not from the server (for example res.redirect()?
I am very new to React and web development, so I am a little confused about security here, because I thought all React-Front-End JS is accessible to the client!
I've got 2 github repositories that are related and can help you.
Authentication with React.js with JWT
Authentication using passeport
You'll juste translate README in English cuz ot's in French.
The front-end repository connects to the backend repo created with express.The code is really easy to understand.
I hope that i will help
Im new to backend dev, and I have a full fledge working React app that GETs,DELETEs and PUTs data using a fake server. Now I need to use an actual backend and I was thinking of going with Firebase as it seems really convenient. However I saw some examples using Firebase directly in the React app, and some using Node.js to do the work.. Could someone please tell me whats the best way to go with this? If there's an easier way to create REST API using express/mongo, I am also open to those :)
You have to keep in mind that anything you do from the frontend will be visible to the user, so communicating with Firebase from React will be a bad idea at least for anything involving sensitive information (passwords, credit card info, etc.). Just because you can do something doesn't mean you should. Use a Node backend and use that to communicate with your DB and other services.
To address the last part of your question, it is possible that Firebase might be more than you need. A simple setup with Express and MongoDB might be easier. MLab has a pretty good free sandbox database-as-a-service that requires very minimal setup.
I think firebase can also be a good fit, you can use Firebase auth to manage authentication and Rules in the Realtime database or in Firestore to prevent not authenticated users to manipulate your data https://firebase.google.com/docs/database/security/ And to get the best out of Firebase I would recommend using the SDKs but you can also use the REST API https://firebase.google.com/docs/reference/rest/database/
Also if you want to have functionality on the backend you can do so With Firebase Admin SDK https://firebase.google.com/docs/reference/admin/
From my point of view that is one of the advantages of firebase, you can get con going really fast without having to worry about managing infrastructure.
I have built a react application which has a login page. I am done with the frontend of login page using react. Now the other person from my team has build a backend api on django. I want to call that api from my react code now. How should I do it? Do I need to learn something specific? I have searched in internet and all of the sources we to make serve react and django from same project. I have a React project with me and a separate api developed by someone else. Please guide me through this. I am pretty new to this.
No, you dont have to learn something new. You need to just make an ajax call to the API endpoint from within your react application to fetch or send the data needed and handle the response.
Also keep in mind to setup the ajax to send the CSRF token as shown in the docs.
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.