I am a newbie to development and I recently created a MERN Stack Application which uses reactjs as the frontend, Nodejs with express as the Backend, and MongoDB as the Database. After that, I searched for some methods to SEO this application. But in many articles on the internet, they have mentioned that we can't SEO Reactjs applications and instead we need to implement SSR(Server side rendering). So now I have the following questions. Could someone explain these, please?
Can we upgrade the existing MERN application to NextJs?
Is there any other methods to SEO this MERN Application?
So do I have to prevent using React as the frontend in my future projects? Instead, do I need to use Nextjs definitely in my future projects? If so reactjs is useless?
Thank You.
Surjeet has covered your first question nicely. In answer to you second and third question there are tools such as React Router and React Helmet which can add some SEO to a React project. There's a helpful article about it here:
https://medium.com/#prestonwallace/3-ways-improve-react-seo-without-isomorphic-app-a6354595e400
The quick summary is that React Router will allow you to generate a uri for each new route. React Helmet creates metadata tags in the header of a component such as a title or the description of the page, which googlebot can then pick up.
Yes, You cannot do SEO of a react application. You have to use SSR for it.
Answers to your questions:
1. Can we upgrade the existing MERN application to NextJs?
Yes you can but it's a lengthy manual process. All of your components you can use directly. There are many things you need to change:
Routing (NextJs has a different way of routing)
Way of Importing Styles
Run Scripts in package.json
If you have used browser things like window object, localStorage then you have to handle those in SSR
And there may be other issues you might face while running the app
2. Is there any other methods to SEO this MERN Application?
No, SSR is a must
3. Do I have to prevent using React as the frontend in my future projects? Instead, do I need to use Nextjs definitely in my future projects? If so reactjs is useless?
Go with NextJs if SEO is a must and you want SSR (Ex: E-Commerce Site, Personal Site)
Go with React if no SEO (Ex: Admin Panel, Specific User-based Web App)
Related
I have a Reactjs web app that is using Nodejs backend (two seperate apps/repositories). I want to implemented SSR to improve SEO and overall performance of my app. However I am not sure what is the best practice here. I have read some guides and most of them suggested nextjs, but I'm not really sure how that would affect deploy and so on.
Is there a way I can implemented SSR to my existing backend? Or should I do some changes to my front-end instead?
Thank you for suggestions.
I just finished my JavaScript course and I understand pretty well how things work.
I have started my React journey with a project in mind
So I want to create a mobile application using React Native and I also want that same application to be a website with domain and url since I want the website to work with with Google adsense.
I'm a little bit confused about things cause I want to use mysql database, node for back end and React for the front end, but I don't know if this is possible to just create one application that work as both mobile app and a website.
Thank for your assistance and advice in advance.
A way to use practically the same code for a web frontend and mobile app is using tools like Capacitor. It make it quite simple, and also allow you to use some mobile native API's.
Here's how to integrate it with react js Using Capacitor with React
I have a question already search on google but not find a good answer.
What is the job of nodejs & ExpressJS in mean stack development ? Like is it some thing like php to create api and angular will call it ? Or something else
You're exactly right, Node.js is used in MEAN stack to create backend code and APIs that are called from a frontend Angular app.
Angular is the way to create an SPA (Single Page Application).
Wikipedia:
A single-page application (SPA) is a web application or web site that
interacts with the user by dynamically rewriting the current page
rather than loading entire new pages from a server.
ExpressJS
What is Express.js. Express is a fast, assertive, essential and
moderate web framework of Node.js. You can assume express as a layer
built on the top of the Node.js that helps manage a server and routes.
It provides a robust set of features to develop web and mobile applications.
So on top of node-js which is your server side application where you can build your apis that your angular SPA will consume, you have Express JS which is a ready solution to help you.
This way, you will not need to solve problems like routing which have already been solved by the framework in an "optimal" or at least commonly agreed "good enough" way.
There is an excellent answer on express js in stackoverflow here
Yes, you right it is like so. NodeJs is used to create a server, then APIs and Angular call those API from the Front-End.
Detailed Description:
What is NodeJs
You can create a server using NodeJs where you will have a bunch of APIs.
These APIs can be called from an Angular app.
Official Definition: Node.js is a runtime environment that executes JavaScript code outside of a browser. Outside of a browser means Server.
What is ExpressJs
ExpressJS is a prebuilt NodeJS framework that can help you in creating server-side web applications faster and smarter.
Note: It is not necessary to use ExpressJs if you are using NodeJs.
What is Angular
Angular is a framework for building Single Page Application(SAP) web
applications.
SAP means your site does not reload the page when you move from one page to another.
Your Angular app calls NodeJs API.
Angular is a library for building Single Page Applications which (typically) run inside a web browser.
Node.js is a way of running software written in JavaScript outside of a browser. It has many uses.
Software written to run under Node.js — that is strictly relevant to the topics you are asking about — includes:
Build tools used with Angular (converting code is written in ways optimal for developers to edit and debug to ways optimal for delivering to and running in a browser).
Other helper tools for software development (such as #angular/cli which creates a skeleton set of code for an Angular project)
HTTP servers used to provide web services (a type of API) for client applications (which may be written in Angular) to access
Express.js is a library for Node.js which provides prewritten solutions for many of the tasks an HTTP server needs to perform.
You can write many kinds of software in Node.js. I have some code lurking around that loops over all the images in a directory and spits out a PDF of them. It doesn't even go near the Internet.
I am new to React and Vue frameworks. I am learning how to build simple SPA from courses, but there are no courses for MPA/SPA.
For example when I need website with 3 parts: Registration form, Login form, Dashboard
I don't want to use SPA and Router. I want to have those 3 sections served by back-end as 3 different websites. If you asking why, it is because I see this technique on almost every React/Vue powered websites (Instagram, AirBnB, Qualitista, ...)
Can you please explain to me what is best practice and how to implement this and if its worth making? Or am I supposed to just make backend API + SPA no matter what.
I think what you are referring to is called Micro Frontends https://micro-frontends.org but just like Micro Services, it is a solution to an organisational problem, not a technical one.
If you are not Instagram or Airbnb, you'll save yourself a lot of extra work by sticking with a monolithic architecture.
Next.js is a good place to start if you want to be guided into the pit of success https://nextjs.org
I don't know too much about this topic in particular. But after a little searching, this Universal Multi-Page React App looks like it might be a tutorial to do what you're interested in? Also found a little info in this Reddit post about Multi-page React Sites.
Also here's some info about how Vue.js does it from I'mOnlyVueman with a couple articles I found on the topic.
Companies use server-side rendering or preloading to bypass the
limitations of Vue with regard to SEO. Google cannot crawl Vue
components, so serving them from the server allows them to be indexed
before rendering.
Vue.js Server Side Rendering Guide
Server Side Rendering from the Vue.js docs
If you were to ask me a good example to learn multiple page apps I wouldn't go to React/Vue to do this, I'd use MVC. Microsoft has tons of tutorials if you're interested. Create a web app with ASP.Net Core and MVC
Hope this helps!
I want to build a self-hosted website with nodejs and the express framework because I'm already familar with that. However, using a CMS for this project is a requirement, so I'm looking for a suited and easy-to-use/-learn CMS and discovered strapi which I quite like.
Setting up an API with strapi is easy indeed but now I'm struggling with adding strapi to an express server. My goal is one express server with strapi, which also hosts the website. So, I can control the routing with express (which I'm used to) and can render the site on the server.
Can somebody explain me how to do that and maybe give a small example? The examples I found, are only about hosting the API externally and using a client-side web framework or a static site generator.
Or is my vision not possible with strapi and I should use another CMS like KeystoneJS (which is already built on Express)?
Thanks in advance!
Using Express with Strapi must be very complex and does not really make sense.
Strapi is based on Koa, which has been designed by the team behind Express. If you are coming from Express, eyou will get confortable with Koa very quickly. Here is the documentation: https://koajs.com.