I'm trying to figure out how to dynamically generate sitemap in reactJS server side (express) web app. I'm using react router.
For simple ReactJS sitemap integration with React Router, you should check out the react-router-sitemap package.
It's fairly configurable as well, as you can see in the docs, so if you need to include change frequency or things like that, you should be able to do it no problem.
Or were you looking for a way to implement one yourself?
If your site frequently changes, you need to dynamically create the sitemap. I was stuck here and found this effective solution, which can even generate a real time sitemap by calling API for my website in ReactJS, using NextJs. dynamic Sitemap Steps
You can do this by creating most of the public files like
sitemap.xml
rss.feed
robots.txt
humans.txt
That too with preserving the behaviour of ReactJS.
Related
I've already developed and deployed ReactJS app with separated front and backend (Laravel).
I'm facing issue with sharing pages with dynamic data due to the disability of react to dynamically generating meta tags, No dynamic preview , no dynamic title .
After searching the web for days the only stable solution found is migrating to NextJs.
my question is can i migrate ( partially ) to Nextjs ?
using Nextjs router for only the sharable pages and preserve the react router for the rest pages?
or any other solution other than nextjs for that issue ?
I'm not sure why you want to migrate partially because I think NextJS offers exactly what you want.
It can generate meta tags dynamically (see next/head)
Using Vercel OG, you can even have dynamic OG images (dynamic preview)
But to answer your question, no you cannot partially migrate to NextJS because it's not just a library. it's a framework.
nextjs offer ssr and csr same time.
my suggestion is that you create a nextjs project and create all your routing as folder in page file. and copy your routed component in these folderand create a folder named "components" and copy your child component inside them.
some difficulty may occur for localstorage or parameters etc ...
after that you run your app without error you can see all your pages as csr rendering.
so for seo sake!! you need to go to those page that need to be seo freindly and change them to ssr.
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!
How do sites use ReactJS on their web pages when the whole site is not built with React?
I was under the impression that if you used ReactJS then the whole site had to be delivered using ReactJS.
So for example, https://www.bbc.co.uk/sport/football/scores-fixtures which is part of the BBC website seems to use React (as per How to tell if a web application is using ReactJs ).
Always remember that react is just plain old Javascript, if you read the documentation you'd know that you can import it even with a tag or in any way you see fit.
Here's the link to the docs:
https://reactjs.org/docs/add-react-to-a-website.html
I want to make partially SSR web application and looking for best solution for that. I need SSR for SEO and that will only serve dynamically rendered products pages - this will be handled by NextJS.
Other part of the app is only for logged users and I don't want anybody not logged to accidentally display it (but only users data have to be secure, if anyone access by a hack those restricted pages without any user data that's ok) - for that part I've already implemented React Router with proper redirections and few routes (it's using Redux too).
Whole project was made with create-react-app. Is there a way to easily combine those two functionalities? Do I have to move everything from /src to /pages? Maybe best way would be to serve them independently and just redirect to one or another using Apache configuration?
If anybody wonders about it - currently the best solution would be to use NextJS for all of it, cause Next provides a clean way to handle static pages, CSR and SSR alongside each other.
By the default all pages are static generated or pre-rendered with partial CSR, while using getServerSideProps method allows to handle SSR, without any extra configuration.
I have spend a week to figure out this question currently I'm using gatsby to generate my static web app.
i have tried to do it
-pages
--en
---index.js
---main.md
---contact.md
--zh
---index.js
---main.md
---contact.md
it's kind a works, but still not exactly perfect solution.
i'm thinking about impelent React-Intl but i'm not sure. is it possible for static app/webpage?
any other suggestion ?
we use Instant as a multi-language solution for React. We have a static generated React app that we deploy to S3 and serve through CloudFront. In you React router you can make sure all paths are caught like /en/some-page and /fr/some-page. Then, based on this route you set the correct Locale in Instant and the tool will serve the correct language to the visitors.
My current approach is using react-intl and Gatsby-plugin-i18n together. so I keeping the content of the pages in Gatsby-plugin-i18n and for everything else in react-intl. which is works totally fine so far.