I am working on a question web-app which has 20 posts on a single page. I have to implement facebook share button on each question. I am using meta og:image. However, for sharing each single post, og:image content will have to be changed, but FB doesnot seem to read changes through javascript. As a result, questions within image post is not visible. What are the ways to implement dynamic meta tags so that the images are visible during fb sharing.
JavaScript will be ignored by Facebook, the usual solution is SSR (server side rendering) or something like https://prerender.io/ - you have to make sure each post has a static link.
I am using Next.js with SSR for that, and can only recommend it. Another solution would be Gatsby, for example.
Related
I am looking to incorporate social media sharing for my website's URLs, such as blog posts, on platforms like Facebook and Twitter. I have learned that libraries like react-helmet can be used to modify meta tags. However, I have also learned that Facebook and Twitter's crawlers do not support the rendering of JavaScript, which means the meta tags do not display when a blog post from my website is shared on these platforms. Is there an alternative solution that can be used without implementing Server-Side Rendering (SSR)?
Thank you.
I have a complex requirement, where we have an asp.net webforms site we want to try and upgrade in a step by step way. We are considering using React (frontend, with asp.net core backend) for this purpose. The website has an iframe in the centre, and we want to try and replace the old content with the new completely separately hosted React content. This needs to occur after clicking a link on the asp.net webforms page.
I managed to create a ‘Create React app’ website prototype and it was simple to load it into the iframe by linking directly to the React website. I came unstuck when I wanted to try and add an authentication token into the header (oauth2 with openid connect for use with IdentityServer). The only way I could see to do this was to try using javascript to add the header by making an XMLHttpRequest object (or I tried also using the Fetch API) and this partially worked but not everything was correctly loaded.
I see for example an answer here How to embed React App into another website which I assume is the best way to add the website into an iframe.
So, I can’t find much on the internet about dealing with authentication… I guess because asp.net webforms are so old by now, but I assume others have wanted to do something similar before. The question I have, is what would be considered to be the best way to do this? I don’t know if I’m going in completely the wrong direction.
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'm learning NextJS and am trying to wrap my head around the difference between server-rendered and client-side React code -- while NextJS seems great, I'm having some trouble conceptually understanding the difference between the two types of rendering and what those differences mean.
For instance, I came across the following comment in the NextJS documentation, in the section describing `_document``
// _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file
Why can one not put event handlers in _document? What is the difference between this and putting them 'client side'?
Also I'm somewhat confused because NextJS seems to be oriented around building 'pages' -- that is, there's support for adding <HEADER>, etc, as if we were building a static website. But if I were to build a React SPA, there's only one page, no? One can simulate different 'pages' using the React router, but the actual containing HTML (header, body, etc) remains the same, no? That is, we never really leave the actual HTML page?
I can use NextJS OK -- following through the documentation's tutorials -- but clearly conceptually I'm missing the forest for the trees. Any clues or pointers much appreciated!
pages/_app.js is where you need to client-side codes. It is shared between all pages.
pages/_document.js only runs in SSR. so you need to put relevant code there.
Saying that, you only need to create these pages if you need to modify the normal behaviour of the app and customise it in your way.
SSR means Server side rendering and it happens when you type url in urlbar and press enter or when you refresh the page with refresh button.
CSR Client Side Rendering on the other hand is the way of SPA(single page app). so the URL change but there is no server call. It look for resources in pages directory for routing.
Next HEAD is way to manipulate the header tags like meta, title etc. in every page. It will give you freedom of customising head tag.
I will be glad if someone could answer the following questions
How does it work?
Why is it necessary?
What does it improve?
Client side routing is the same as server side routing, but it's ran in the browser.
In a typical web application you have several pages which map into different URLs, and each of the pages has some logic and a template which is then rendered.
Client-side routing simply runs this process in the browser, using JavaScript for the logic and some JS based template engine or other such approaches to render the pages.
Typically it's used in single page applications, where the server-side code is primarily used to provide a RESTful API the client-side code uses via Ajax.
I was trying to build a Single page application and came to know about client side routing.
By implementing client side routing I was able to achieve the following
The front and back buttons in the browser started working for my single page JavaScript application. This was very important while accessing the page from a mobile browser.
The user was able to Bookmark/share a URL which was not possible earlier.
I know that it's late but I have some information about how the client side routing (CSR) works. This answer does not try to provide a full js implementation of client side routing but rather tries to shed some light on what concepts will help you implement one of your own. It's true that when user click an anchor tag, the browser sends a request to the server. But we will be able to intercept the event and prevent it's default behavior, i.e sending a request to the server by using "event.preventDefault();". Below is snippet from React routers web page.
<a
href="/contact"
onClick={event => {
// stop the browser from changing the URL and requesting the new document
event.preventDefault();
// push an entry into the browser history stack and change the URL
window.history.pushState({}, undefined, "/contact");
}}
/>
Also listening to forward/backward button click is important. This can be done by,
window.addEventListener("popstate", () => {
// URL changed!
});
But looking at the above two snippets you can imagine how a CSR could be implemented. There is much more to it. That's why libraries like React Router exists and web frameworks like angular provide CSR by default.
If you want more information please visit the link below, it will take your the concepts page of react router.
https://reactrouter.com/docs/en/v6/getting-started/concepts
Also if you want to get more depth into the topic your could check out the code of Angular router. Comparing the two implementations will give a much more insight.
What :
In react the history object takes care of that what it does..it keeps track of all the addresses and the Router defines all the different routes. So Router takes the help of this History object to keep a track of various addresses / History of the current URL and based on that location it serves the appropriate content.
Why :
To reduce unnecessary reloads.
For better user experience.
It's internally handled by JS.