I am still quite new to React, and I am currently working on a Django-React app. I read a bit about Next JS and it seems quite useful and interesting (especially for SEO), but I've heard various opinons about it. I am considering using it for the front end and rendering only.
Therefore I was wondering, would it be worth it to learn and implement NextJS (and re do some of the work I did with react), or is the effort to great for a minimal result? Will NextJS allow me to do more than react (in terms of SEO and rendering)? Does the complexity of a project really increases when implementing Nextjs + React-Django?
Lots of people are talking about NextJs and I was wondering if it was just "another framework" or really something more.
Have a good day
Nextjs is better for SEO as it renders server side and all the data can be indexed by search engines. IMO Nextjs is better because you are strictly using Javascript and it integrates very well with react. If you have good design patterns/reusable react components it will be very easy to integrate with Nextjs. The built in API feature is also very seemless. If you use Nextjs there is no need for Django.
Related
I am trying to learn how to build an eCommerce store with 2000+ products. My first quest was to pick a stack. Most google results suggest that the MEAN / MERN stack is the best for eCommerce. So, i started learning MongoDB NodeJS ExpressJS as well as CSS HTML and JavaScript. Then, it was time to choose between Angular and React. The choice was easy, most courses and tutorials i came across were using React. Once i started learning React i was introduced to the concept of SPA. Then i started researching and found that MPAs are considered a better choice for eCommerce which got me really confused. If MPAs are better than SPAs for eCommerce, why the internet is filled with MEAN / MERN suggestions as well as eShop building courses? Thank you!
[enter link description here][1]I think SPA library or framework (React, Angular) is suitable for E-Commerce website. Because it has very fast page load once you have loaded a site. Page load = higher conversion. We see a conversion point increase of 0.4% to 1.5% on SPA than MPAs.
Also, it reduces frequent page reloading. There is big community support for SPA frameworks and libraries as well.
However, you have to figure out how to make it SEO friendly by using something like NextJs (https://nextjs.org/) or Gastby (https://www.gatsbyjs.com/) for SSR (Server side rendering).
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)
...
In an article I read that
React uses server-side rendering.
But in another articles I came across this:
Client-Side-Rendering is a relatively new approach to rendering
websites, and it didn't really become popular until JavaScript
libraries started incorporating it into their style of development.
Some notable examples are Vue.js and React.js
Now Which statement is correct?
When I use create-react-app and run npm start, it seems to me that React uses the Client-Side-Rendering. isn't it?
It’s client side. But React, like some other client side libraries, can be used on the server to prerender it with node, usually for SEO.
Out of the box it renders on the client side.
But, if you have a requirement to render pages on a server, you can achieve this with:
Next.js or
Hypernova or any other tool (there is a bunch of them nowadays!)
Note, that SSR will require a bit more experience than a regular React app.
The main goal of this approach is to allow search engine robots crawl information form web pages(SEO).
create-react-app uses client side rendering by default. There are some tools like next js and gatsby js which pre-render pages on the server side. You can also do Server Side Rendering from scratch.
A few years on from the last answer, it is now quite difficult to implement a client-only React app - serving it on Node is trivial and absolutely what it expects, trying to use it as a client library with other server-side support is more of a challenge and documentation about how to do this is patchy and much of it out of date.
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.
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.