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
})
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.
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.
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 have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking
I have a React (redux) app that uses client side rendering. I wanted my sites description and title to be crawlable by google (they seem to crawl async stuff cause my site shows up fine in google with text from my h1 tags) so I found a library called react-helmet which builds on react-document-library. This library allows me to change the document title and description depending on what route I am currently on.
So here are my questions:
Currently (1 week later) my google search results are unchanged which makes me think either google hasn't crawled my site or google crawled it but didn't notice the dynamic change of description and just used my h1 tags. But how can I check which one has happened?
I notice Instagram have a client side rendered app but somehow when I check the page source they have already changed the title and description on each page even though the body tag is just an empty div as is typical of a client side rendered app. I don't get how they can do that.
react-helmet
Follow the React Helmet server rendering documentation: https://github.com/nfl/react-helmet#server-usage.
Use Google Search Console to see how Google crawls your site, and to initiate a crawl/index of your pages: https://www.google.com/webmasters/tools/
As for how instagram can show meta tags in a client-side app – they probably render and serve static content server-side when they detect a crawler or bot is viewing it. You can do this yourself for your content without converting your entire app to server-side rendering. Google prerendering services. (I won't mention any examples because I don't want to boost their SEO without having an opinion on them.)
Another option is to render your React app statically, and serve it when necessary. See Graphcool's prep (seems slightly outdated), react-snap, and react-snapshot. All render the site on a local server and download the rendered html files. If all you need is the <head> then you should be good!