I've just rebuilt a new portfolio site using Gatsby, which dynamically displays my projects, using Apollo and GraphQL.
I'm really happy with the performance, however I've noticed that the project items page will sometimes show the previously loaded content for a split second before displaying the correct content.
My approach was based on this demo - https://www.youtube.com/watch?v=wNUg1jpj9T0&t=18m01s
Does anyone know how I prevent this issue from happening please?
Thanks in advance,
Paul
Related
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I have built an application using React and .Net Web API. I'm pretty new at all this and without any previous knowledge on meta tags, I am now stuck on trying to implement a Facebook Share Button using dynamic meta tags.
I tried using react-helmet and react-snapshot but Facebook ignores the dynamic tags, and only accepts the url of the page. Now I've heard that it's possibly doable to replace the meta tags using the server side, but I'm not so sure I know how to do that in .Net.
I'm also aware of the option of using a framework such as Next.js, however, being so short on time, I was wondering if there exists a solution that doesn't include migrating.
Is there a way of making this work with the technology I am already using?
If anyone has had this problem before and is willing to help, or just knows the solution, I'd highly appreciate it! Thank you!
Headless WordPress (CMS), that is use a page builder (Elementor, Gutenberg etc') to write content.
Then render the content elsewhere, using Next.js (React.js).
I can easily get the HTML markup, but the styling is challenging.
I could also get the inner data structure, for example Elementor is using JSON, but that means I should implement each component - unwanted.
How would you approach this, considering WP headless + Next.js is a requirement?
In a similar situation - there's no easy solution. Page builders are dependent on lots of WP-specific code. Unless you need specific WP plugins to power parts of this, it's probably a lot less work to adapt ApostropheCMS to whatever your needs are.
I'm a complete beginner in ReactJS. I'm currently designing a website using it and currently working through localhost.
My main page is on localhost:3000 and I want to navigate to localhost:3000\University(I have designed a separate file University.js for this).
On navigating to the content of this file, it overlaps with the existing content (ie that of localhost:3000). Is there any way to show the new content without overlapping as well as with separate CSS. Any help would be really appreciated.
Actually, I'm not getting what you mean by "overlapping content"! For the css part maybe you are looking for something like "local stylesheets" aka "css modules".
This answer has an example of using local stylesheet for each component. Also, there are various libraries, as mentioned in this post, which can come handy for you.
Go through this article, and pay attention at method 4 there. CSS modules is one of the best solutions in case you are experiencing CSS overlapping.
PS: react-native and react-js are two different tags!
You can understand react routing here, if you have some doubt over it. (Mentioning this because of tag!)
I am trying to quickly create a dashboard with next.js and react.js as a front end using tempaltes from material-ui.
Using next-create-app and find it easy enough to get something up and running but I just can't seem to integrate this dashboard.
https://github.com/creativetimofficial/material-dashboard-react
I realise that material UI has a github link for next.js here https://github.com/mui-org/material-ui/tree/master/examples/nextjs but for some reason I can't install it either...
when using the curl function i get locked out for some reason. I can use git functions fine though - maybe that would solve the issue? I don't think there's a way to get that specific branch though.
Appreciate any help - I realise it's a simple question yet I've had some difficulty with it so would love some help.