I am new to using headless cms and was wondering how to render content as a new page? I am building the site in Next.js and comfortable.io but I don't understand how making a new page in comfortable can be passed to the next.js project to produce the pages. Can someone please point me in the correct direction for what I need to learn to understand this?
To get data off your headless CMS you will have to hit the API endpoints provided. In order to render the CMS content on the server side you will have to do your get request to the API in the getInitialProps life cycle method.
After doing so next.js will render the page along with the fetched content to the client.
You can find more information in the documentation link here.
Related
I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.
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.
I have a frontend built in Reactjs and a backend in Laravel. Both are on the same server. I have a feature of Social Share for Facebook and Twitter. As both reads informations from meta tags provided in the head tag while sharing.
So my question is how to share information from a specific page (component) of frontend when its content gets changed.
I googled on this. It is being advised to use Server Side Rendering for this.
Is there any alternative for this to achieve or How to do with SSR then?
Any help would be appreciated. Thanks in advance...
You can try Pre-render. But I recommend SSR
I'm quite new to React, so this might just be down to inexperience.
Im looking to use React to replace the templates, css and js of a website built with Craft CMS. Does anyone have any experience with React and Craft CMS that can give me guidance in the process?
(I have guessed I'll need to get twig working in a React component file, and point the Craft CMS backend to both the development React and the build React.)
You can use the graphQL plugin or the element API and then get your CRAFT CMS content over an API request into your react app. Thats the way to separate backend from frontend.
Is it possible to render a static web page if not signed in, but load the SPA (ReactJS) somehow if signed in before? Or are those 'static' web page just part of the app?
What I mean is like Twitter.com or Facebook.com and how they either load the app immediately if you have signed in before, or a default page that is crawl-able.
Is server-side rendering the only answer? Or is there a simpler solution, since most search engine can crawl JavaScript site? I do not want to use a subdomain like app.domain.com if possible.
Idea: most ReactJS tutorials start out with a rather empty index.html with a div that React should renders into. How about a bootstrap html that has actual content and if React detects the user has already logged in then remove those static content dynamically? Is this commonly done? what's the drawback?
This can be solve by using if else condition in react js.
Hope you get user information from an api.
if api give you some user information then you can store that information in state and display them.
and if that state is null then you can display your static page.
By this you can render static page and react js on same page.
Hope this ans will solve your problem