How is the routing done, is it with react router on the client side? An explanation about how routing is done in the mern stack would be awesome to read!
With the MERN stack you use the client side routing to render different components or different groups of components. For example, you could have a route called "/admin" that renders an admin GUI built from your React components. But these components still aren't by default loaded with any data. They would get that data by making Javascript fetch requests to the server with calls like, for example GET "/api/users" or GET "/api/roles". These latter endpoints would be managed by your server side router.
Related
Let's say I have an application with a component named "Protected"
**<Protected />**
This component should be "protected", and only admin users should have access to them (because it contains secret in formations)
But there are 2 problems.
I can't store it on the react application using a protected route on react router. (because my application can be easily reversed)
I can't fetch only the data from the server, I need to fetch the whole component.
I searched about React server side rendering but I didn't fully understand if it's possible.
Can I do this with React server side rendering? Are there more efficient ways?
Thanks !
I am building a website using Express and React. I go with Server-side rendering
Now I am looking for a solution to hydrate my final HTML.
The issue is at the build time, the page is still not available. A page only started with a main component and Express middlewares can add/remove sub-components to that main component. It means we only know what is the final structure of the page at the end of the request
Is there any way I can hydrate that page and make React available in the client browser?
Thank you so much
I'm creating a user level GitHub page using React but want to allow child repos to create their own GitHub pages outside of the root app. How can I tell React to let specific routes not defined in the router fall through for server side rendering?
I ended up calling unregister on the react service worker which resolved this issue. The links themselves stayed as an anchor tag.
I am a meteor user and I want to know the difference between express and react router Dom. When I used meteor, I would render a component that contained the browser router and routes. But I am kind of confused why people are using express with react when they can use react router Dom. Is it a preference thing or is there benefits to one that the other does not have? Or am I just wrong and they are two separate things? Please explain the difference of the two and how they would be used differently.
Express
Express works on the server-side. Specifically, it runs on top of node.js
Express is a 'web application framework', and can handle routes, accept client requests, retrieve data from databases, prepare views and send back responses.
Note once again that all of that is on the server side.
React-router-dom
React-router-dom is a client side routing library.
You might be aware that in Single Page Applications, when a user navigates to a link, a request to the server is typically not sent. Instead, the client side router (like react-router-dom) interprets the request and show appropriate content (eg: a specific react component).
To answer your question why people use express with react could be
to serve your index.html and your bundle.js files, when a user first visits the site, (www.example.com)
to redirect the user to www.example.com when someone directly visits www.example.com/subpage, which is typically handled by react-router-dom on the client,
to serve static assets like icons and images on your page
as an API backend for getting data from the server, etc
I am building an isomorphic app with React that must support users without JS.
I am new in this technology and I have a basic doubt:
The server can store the components states to emulate what React does in the client-side?
I imagine this flow when the user dont have JS:
The user click a button and send a request to the server.
The server recovers the state of the app and makes changes in it.
The components listen this changes and are rendered again.
Is it correct?
Assuming that you're using react-router :
The server aims to initialize your state, to provide it the default minimum values necessary to make your application work while getting an url.
For example, if you have an application in which you want to display a user list, let say on /users URL, when you'll send your first request, the server will store the users in the react state.
After that first load, you'll be working on the client side using react-router, and making XHR request.
However, if you refresh your page, the process will start again : first load initializing the state and then client side navigation.
EDIT : Explanations =>
When you want to use react on the server, this means that you use a Nodejs server. The fact is that react-dom provides a method called renderToString that transform a react jsx component into standard HTML.
This aims to load the first call faster
Why ?
When you load a "big" JS application on the client, you have some delay time, the time your browser needs to download your JS bundle.
Server side rendering aims to avoid that behaviour, or at least, to gives the feeling that the app starts faster.
In no case you can only use react, even if you use your server side renders. Why ? . Because your events on buttons, or asynchronous load on client, or keypress are in JS language.