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
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!
If you know a site is using react in some way, how can you, just using the javascript console, identify if the app is running a next.js app or create react app.
I am not sure about this. But to my knowledge, one of the important feature of next.js is that it supports SSR.
If we fetch the url of the page using postman, sites developed using react app will return a html with javascript files, where as those ones with next.js or with SSR mode returns a complete page. I think it might be worthy to fetch the url and check if the response contains "Need to enable javascript" or something like that. This might not completely show that the site is built create-react-app or next.js but can help you to discriminate them.
It's easy to tell if a website uses ReactJS, by using the React Developer Tools.
However, I know a website that uses ReactJS and Server Side Rendering (the whole page is built with React components, but the page source contains the whole HTML). Is it possible to tell if this website uses Next.js in particular for SSR?
Does Next.js leave any trace detectable on the front-end?
If you are seeing content is wrapped with id="__next", this website use next.js
like uber
and like netflix
By default, Next.js sets the X-Powered-By header to Next.js. So if you check Chrome's devtools for a page, you can check to see if this header exists.
Note: Developers can opt-out of including this header. So if the header does not exist, it is not evidence that the website does not use Next.js
Version of Next.js + properties of the page:
console.log({
NextJSVersion: window.next?.version,
pageProps: window.__NEXT_DATA__?.props?.pageProps
})
I have an application that is largely tables and standard pages and forms. However, I have one page this really need to be highly responsive that is probably best developed in React.js.
I would like to have a Flask + Jinja handle the delivery of most of the pages. I understand Facebook does a bit of this with PhP for the majority of the site with React.js handing the responsive components. Is there a Flask library that makes this simple?
I don't think you need to use any library for this as it's pretty straightforward.
All you need to do is:
Make that page using React.js and build the project to make bundle Javascript file which bootstraps the React.js page.
Make div inside your jinja template and import that bundle javascript file.
Here, one important thing is to assign identical 'id' to the Jinja template div and React.js rendering div.
I am a web developer tries to learn React.js. I am thinking about a blog for my first React project. Based on articles and tutorials I have read in the past few days, I am thinking about to use Node.js, Express.js and MongoDB for my server side and React.js for the front-end. Before I start, I want to be clear on few questions I have.
Are those enough to build a blog? Can React.js be used for UI without other template library such as Handlebars?? I have seen few articles using both React and Template engine and confused if I am going to need another template engine.
Can I use Json as communication method(Restful API) between the UI and the server?
Yes for all. But I suggest to use Redus(or Flax) to control all states.