Should I use SSR? - reactjs

I'm planning on building a web app similar to omegle.com using React.
I'm wondering if SSR done using Next.js is the right choice as the app is pretty content light and the most of content is just the user camera. I need good SEO bu I never used Next.js and it might be just additional overhead. I'll be using Twilio API for room creation, chat etc.
So what option should I go for and why?
SSR Using Next.js
CSR using React.js
Make a welcome page using Next and redirect to app.domain.com which uses CSR React.js?
Or do you know something better I should do?
Thanks a lot for help.

It depends really on the scale and type of your application But generally speaking you should go with SSR because of how incredibly fast it is. This means your site gets better indexed by google and other search engines and hence giving you an edge in terms of visibility etc. Refer to this article for more in depth discussion.

Related

ssr + csr and SEO

I have been working in nextjs since recently. I previously programmed in react, but the project requires me to use nextjs.
Briefly the application looks like this
Home page (simple backend data + form ), here I will 100% use SSR
Admin panel (/admin)
And here I am wondering whether to use SSR or CSR in admin page, I find conflicting information. If I use CSR in case of admin panel, will it somehow affect SEO? (I think it shouldn't, since the site requires a login anyway). I read that if the site requires authentication then there is no point in rendering the data on the server side. But on Reddit someone also wrote that simple admin pages can also be safely created using SSR. If so, does it give any advantages?
Or, however, would it be worthwhile to separate it into 2 different applications with the annotation (admin.mywebsite) in the domain? and what is the correct approach to such a problem?
I care about the best possible SEO, hence my questions.
If you don't need the casual user to see the admin panel, you can simply ignore it in your robots.txt file and use any preferred method (CSR or SSR), and it won't impact your SEO.
However, in the case you do want users to see the admin panel (for any future viewers), SSR is much more scrapable by web robots and is preferred for SEO.

Static HTML with dynamic SEO friendly Reactjs/Nextjs and React Native / React Native Web on firebase?

I apologize in advance for how new I am to this all. I have a new business and there are some things I want to code for it myself as proof of concept till we have enough revenue to actually hire real coders.
Our ecosystem will have 4 major areas and I'm not sure if my approach is how to go about it or even possible.
The normal, static, info webpage that just talks about our business. (SEO and load times important)
A React JS / Next JS non-static section of that same website for blog and other dynamic content. (SEO and load times important)
A react JS employee backend for customer tracking and another tracking of customer data. (SEO and load times not as important here).
A customer portal where they can log in and see stats and stuff about their account (this will pull from data we enter in the employee backend and they can access to track progress) (I would eventually like android/ios apps as well as web portal for this so I was thinking using react-native / react-native web for this section to try and maximize code reuse. (SEO not important, but a smooth experience is)
I planed on using firebase to host it all. I'm curious if this seems it can work? Can you combine all of these different frameworks and strategies in one overall project like this without causing over bloat of download and such? Like for example, the employee backend will likely have a lot of packages and dependencies that the static front end would not require. And the static frontend would be in the same project as the dynamic blog but be built on different things (one static HTML, the other react with next.js? is that a bad idea?). Also, it's been hard to find info on exactly how goog react-native-web is so I'm just lost with this all and would love some guidance. Thank you so much in advance for any direction you can offer.
With firebase hosting you can host static sites, and redirect some paths, such as /api/* or /dynamic/* to firebase cloud functions.
On those cloud functions, you can do dynamic rendering, e.g. with remix.run or next.js.
If you use good cache-headers on those cloud functions, firebase hosting caches the results appropriately, making dynamic rendering of all pages feasible too.

How To Add Server Side Rendering To React Single Page App?

I built a React app a year ago, and totally stopped working with React, so I am really really rusty.
Site is here: http://allvintagesearch.com
I'm using eBay API.
I'm sort of afraid to touch it, so wondering if there are any tips someone can provide in adding the ability for this site to get better rankings in google (right now there is really not much traffic).
Any help is appreciated.
If your site is static you can use Gatsby, otherwise, your best option is NextJs. you can check their doc. you can also find very good tutorials online.
NextJs
Gatsby
There are some websites like https://website.grader.com/ that they give you scores about every aspects of your website (e.g performance, security , SEO and etc) and then they tell you what you are missing and how to fix them. for google search i would recommend you to have look to this link:
Get your website on Google
hope it gives you some help to start from.

Shop search based on reactJS

I have to do similar web search on e-shop based on this site:
http://frisco.pl/
So far I recognize it as reactJS implementation. Am I correct? I don't know anything about reactJS and am I right that every search item is existing in _resource variable (which is visible in page source), and that's why the searching is so fast?
Also what plugin respond for automatic change of browser URL while typing keyword in search box?
Yes this website is made with reactjs.
for automatic change of browser URL, its made with react-router (but you can use other to manage that).
React abstracts away the DOM from you, giving a simpler programming model and better performance.

React Angular Wordpress Multisite WP-API - SEO?

Hi I am attempting to build a largish website for my company & love to get some feedback on whether I am crazy or its a great idea. I am basically got the ok to go free rein, I guess as long as its going to have benefits (e.g performance, maintainability, scalability, re usability & SEO)
The way I am thinking of going about it.
Wordpress multisite (company has a handful of branches worldwide) e.g China, South Africa, US etc, so content needs to be tailored. Plan to use subdomains?
WP REST API - ability for reusable data across the websites and other blogging sites (scalability and performance) also the capability of browsing offline? http://themeshaper.com/tag/react/
AngularJS for routing/views/get-post requests or possibly React-router?
ReactJS for the view (performance and reusable components across all sites)
Most importantly - good for SEO (site is crawlable) which I believe ReactJS has that covered? ref: http://en.blog.altima.fr/seo/reactjs-seo/ but also whether I need prerender.io or other because of the routing?
Wondering how this will all work together and if theres any issues with the combination of these? Still also getting my head around if this needs to be setup as "Isomorphic" with a node server? (some more insight into this would be great also)
I have been inspired by the theme https://github.com/royboy789/angular-react-wordpress-theme
Thanks!
Not sure that mix of cool buzzwords (WP, Angular, React) is the good way to choose you technology stack. May be good ideas is to use Angular+Laravel, React+Laravel, Wp+HTML.
Considering SEO if you use Angular or React you just have AJAX-site. You can use prerender technique for your site. But recently Google stated that AJAX-crawl scheme is deprecated: http://googlewebmastercentral.blogspot.com/2015/10/deprecating-our-ajax-crawling-scheme.html . So may be there is no need to prerender your pages only for crawlers.

Resources