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.
Related
I have made a react app which gathers cusotmer information through a form and renders it in another page. The purpose is to have the website open on a tablet with the customer form and then show the result on a computer. So when the form is submited on the tablet, I want the result to automatically update on the computer on the result page. Is this possible to make happen between two different devices?
I am posting the form data to strapi in the form component and then fetching the result in the result component. I have made a refresh button which refreshes the page and updates the result. I have also tried with a setInterval every 10 sec to fetch new data, but it seems a bit unnessesary to refresh every 10 sec. I want it to rerender only when a new result is submited, not every 10 sec or so.
To make the result page automatically update on the computer when the form is submitted on the tablet, you need to use a technique called real-time communication. Real-time communication allows two or more devices to exchange data instantly without refreshing or polling.
One way to implement real-time communication in your react app is to use web sockets. Web sockets are a protocol that enables bidirectional and persistent communication between a client and a server. You can use a library like socket.io to simplify the process of creating and managing web sockets.
Here is an overview of how you can use web sockets with socket.io in your react app:
Install socket.io-client as a dependency in your react app and import it in your components.
Create a socket instance by calling io() with the URL of your strapi server as an argument.
In your form component, after posting the form data to strapi, emit an event with socket.emit() and pass the data as an argument.
In your result component, listen for the event with socket.on() and update the state with the data received as an argument.
Use useEffect() hook to clean up the socket connection when the component unmounts.
Check the documentation for more details.
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 exploring server-side rendering of React using Dot Net. I found out that we need 2 separate JS files for server-side rendering. One for client side and one for server side. I don't understand the reason.
1-we want to make sure that we never ever import any server side code into any file that will be eventually sent out to the browser. the reason for that, we might mistakenly leak an API key or some very sensitive data.
2-In client-side and server-side routing is handled differently. We will use the StaticRouter on the server. It is specifically made for use on the server side rendering. When we do the initial render of the app, it is going to be using the static router. When our application gets shipped down to the browser and it gets rendered a second time or hydrated on the browser, we will swap out to using the browserRouter instead. Browser router has the ability to look at the URL but StaticRouter needs to be told manually.
import { StaticRouter } from "react-router-dom";
<StaticRouter location={req.path} context={{}}>
3-configuration of redux is different. In server side, before we ship down our pages to browser, we need to make sure all the data fetch is complete, our components gets its data to be rendered.
4-By keeping client-side and server-side code separate, in the future we can switch our front-end framework or server-side easily.
I am working on one react application.
My requirements are :-
1) First two pages should be rendered always from server side.
2) Rest pages should be client side rendered.
For example :-
http://foo.com and http://foo.com/about I want to rendered always from server side.
http://foo.com/FAQ, http://foo.com/contact I want to render from client side.
what is the right way to achieve this?
You should use ReactDOMServer and specificly renderToString() method.
ReactDOMServer.renderToString(element)
Render a React element to its
initial HTML. This should only be used on the server. React will
return an HTML string. You can use this method to generate HTML on the
server and send the markup down on the initial request for faster page
loads and to allow search engines to crawl your pages for SEO
purposes.
If you call ReactDOM.render() on a node that already has this
server-rendered markup, React will preserve it and only attach event
handlers, allowing you to have a very performant first-load
experience.
I've created a react redux project, now how do I add some SEO functionalities to project? I do not want to waste much time while refactoring codes.
You need to setup the redux store on the server and pass its initial state down to the client, so that the server-render and initial client render don't differ
Not all life cycle functions are called on the serverside, mainly componentDidMount is not called. This indeed helps if you want to do some AJAX data fetching (which you only want to do on the client).
If you are using react-router you need to setup the serverside route matching
Here are some more details: React can be used on server side rendering. What does that mean?