I have a SPA made with create-react-app and it contains a forum where logged in users can post along with other features. The forum is simply a component within the app currently.
For SEO purposes I want to make the forum public and like Stack Overflow use dynamic routing for those posts and it should be viewable to anyone searching on Google without having to login. The user has greater abilities when logged in.
So I assume I have to implement server-side rendering on the forum using Next.js.
The problem is the rest of the code(React + Redux implementation) needs no changes and converting it to Next.js would be unnecessary. Is there a way to implement the forum within the CRA?
Yes there is! The official Next.js docs actually offers solutions on how to incrementally adopt Next.js.
There are two flavors:
subpaths
rewrites
Their documentation explains both in detail: https://nextjs.org/docs/migrating/incremental-adoption
Related
Here I'm just start learning react native(latest version). I almost cover all the basic in react-native, Now I want to use Google Authentication in my app without firebase. I read almost every documents which is present on google but still not able to find how to do this or may be I'm not able to get these documents correctly.
Here Is anyone who guide me how to Google Authentication in React Native in simple way?
i am not an expert react native developer but i have some experience doing React.js. I faced the same problem and the solution below helped me :
https://dev.to/suyashvash/google-authsignin-in-react-native-without-firebase-43n
Give it a try it may help :)
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.
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
We are thinking of remaking our more and more popular ecommerce website.
I am new to React, just went through some tutorials, read some articles on it. Learned about the use of React Native, React Render which wpuld probably be of use for eventual mobile apps and SEO improvements.
My question is if React is suited for such websites since it is mainly used to create SPAs. For ecommerce SEO is verry important, for obvious reasons, and React is not so good at this.
What would you suggest? Does anyone have experience with similar cases?
Please give us some advice on what we could use to make a complete and complex ecommerce website. What technologies/programming languages/framewors (even if other than React) should we use? Please suggest only modern technologies and libraries.
By the way, we are currently working with PHP and Yii framework.
General
At its base, React has nothing to do with SEO. It is just a way to build your web application through components (same as Vue or other frameworks).
Magento - a PHP shop system - is using React to render its frontend. You can find more on this special system in the Magento Community. See also the Documentation for Magento PWA.
Experience
What would you suggest? Does anyone have experience with similar cases?
PWA and storefronts with React/Vue/Angular are all very new. Everyone got the same problems. How to do SEO, synchronize data between storefront, APIs and the shop core system. Here's a list (to be continued).
SEO: how to work with URLs, manual URL redirects for products/cms/categories/...
SEO: Server side rendering is currently the best solution to handle googles crawler.
How to sync products, other data and especially the cart while or after beeing offline.
Extensions: How to integrate new or existing extensions which might already be installed in the conventional shop
...
Each community is trying to solve those issues. Every community learns from the other and if you choose a more or less active storefront, you should be good to go. But really keep in mind that (in my opinion) all of them are in alpha or beta state with a lot of changes you have to integrate into your own theme/extensions/etc.
Projects
Here are a few storefronts you can choose from. Most of them have an API you can adapt to support your own Shop system. I would go with a React storefront, because I found it the most readable solution and it has a huge community. But choose yourself.
Magento PWA Studio (React)
DEITY (React)
Front-Commerce (React)
Vue Storefront (Vue)
...
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.