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
Related
so I've got a React app being served by Nginx and it uses an API server backend to which the NGINX server forwards requests, which is consumed by the React App. The react app uses the React Router package for routing.
Most of the react app is pretty simple, when you go to a specific page, it mounts a React Component which fetches some data from the API Server, and then updates itself to display that data. In doing so, it also updates the Document Title and other metadata related to the data that was fetched.
The react app is just a basic Create-React-App scaffolded application and the NGINX config is just pointing and the default index.html (which in turn loads the javascript chunks etc, standard React infrastructure).
I have a problem now where the app generally works well but if you copy a link from the app and paste it to someone, it will always show the base title of the application, and indeed if you preview the HTML source of any page on the webapp, it will always show the base title.
Here is an example (although SO doesn't do metadata link previews afaik):
https://bugwalker.io/bugs/92
My guess is that the requests that fetch metadata for a link, or fetch source page, don't have Javascript enabled and as a result it never mounts the react components and never gets to update the title etc.
Is there a way to fetch the metadata to populate the title and other metadata even when javascript is disabled? Or is there something else going on that I am completely missing?
Thanks in advance!
For this you need react helmet: https://github.com/nfl/react-helmet. On each page of your React application you should specify the title like so:
<Helmet>
<title>Some Page</title>
</Helmet>
React application serving as frontend for Markdown content pushed next to the code.
Said Markdown is run against a specific RegExp and replace matches as the Markdown is rendered into Material-UI components with data fetched from an external API.
The issue is that the application will fetch and replace on every refresh of the page. I'm trying to do those steps as I build the application, rather than on run.
Here are the relevant files:
gatsby-node.js
https://github.com/angrybacon/doomsday-wiki/blob/ff0ab5c82e/gatsby-node.js#L35-L39
src/components/Page.js
https://github.com/angrybacon/doomsday-wiki/blob/ff0ab5c82e/src/components/Page.js#L13
src/components/Markdown.js
https://github.com/angrybacon/doomsday-wiki/blob/ff0ab5c82e/src/components/Markdown.js#L62-L67
src/components/Scryfall.js
https://github.com/angrybacon/doomsday-wiki/blob/ff0ab5c82e/src/components/Scryfall.js#L78
Using Gatsby doesn't solve the issue automatically in that when building the components are not mounted and data isn't fetched yet. How can I achieve that?
I'm using a custom tool similar to react-snap to create a snapshot of my app at build time, as recommended in the create-react-app docs. This generates a static server-rendered version, which I can deploy behind nginx without running react on the server. This works fine.
I'm also using code-splitting to lazily load some components to reduce the initial JS payload. (I use react-loadable, but I'm willing to change that if needed.) It works fine when creating the snapshot, and the HTML is generated correctly, which the user receives correctly, and everything is displayed fully server-rendered without even downloading any JS yet. This is great.
However, during rehydration on the client, the import(...) call for the async loaded component hasn't yet been fired. Meanwhile, the DOM already has the stuff that has to be rendered, from the snapshot.
In this scenario, is there a way to prevent the initial render of a component during mounting, since I already have the content in the DOM?
Also, is it possible to have react's hydration logic run after the import is complete, so that I can prevent any flicker even after the import is complete?
If it matters, the lazy-loaded components are infrequently used routes, managed by react-router.
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.
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?