Creating a React.js application is simple, but especially those who are beginners (included me) in this world of programming, sometimes we let slip certain terms, for example, Server Side Rendering (SSR).
There are many articles dedicated to this topic and certain professions dedicated to this area, for example SEO. But quickly, to place ourselves in this context; our pages/applications have labels with information that allows browsers such as Google to define the theme, category, type of content, among other parameters, which is our focus on the web or where we want to go (target market).
With good practices in the SEO trade, the “crawlers” will give the information to Google, and after a certain analysis the search engine will define the position of our website among the search results.
But React.js, by default, does not perform this type of task or at least does not offer us the possibility of doing it.
A few months ago we shared with you a blog dedicated to the creation of a React application but with the SSR feature. In the small demonstration application we use a small framework called Next JS, who makes SSR work accurate in Javascript applications.
We’ve been working with Next JS, and we can say that it is very good, however it has some characteristics unrelated to React (because Next JS can be added to any JS application) that makes us configure some files in a slightly more complex way; as technology lovers we know that every resource is being improved with the passage of time, and with that comes practicality and ease of use.
Now, we met a new tool called Razzle. It is simply the same work that is done with Next, but Razzle tries to deviate as little as possible from React, as well as configuring as little as possible and therefore brings some of the libraries by default.
For example and perhaps the most valuable thing for those of us who have dealt with the use, is the navigation and Razzle allows you to use react-router-dom already integrated.
Also Razzle is useful with Reason, Vue, Elm and Angular according to their own documentation.
To create the Razzle project just type in your terminal:
npx create-razzle-app app-nameThe above command will create the necessary files to start working, start by modifying your App.js in the same way you do with a React project. You can see the configuration of server.js and check the use of express, as well as react-router-dom and react-dom for your backend and frontend work.
yarn start
In conclusion, I am really fascinated by Razzle, the use has been little, we are still in full investigation of the tool, we write this according to the experience we have obtained, therefore if you have something to share about this tool we thank you participate in the comments section to help the community.
It can be simply your appreciation to Razzle or some problem or error that you are getting, so we can help you or someone could also contribute to that solution you need.
We are willing to learn with each contribution assuring us of the benefit of all of us who are in this beautiful and great world of programming.
About 4Geeks
Founded in 2012, 4Geeks is a global software engineering and revenue growth consulting firm for Fortune 500, Global 2000 and fast-growing SMBs. Provides top solutions to multiple industries including Retail, Healthcare, Banking & Financial Services, B2B SaaS, Manufacturing and Education. HQ in the USA, and delivery centers across Latin America.
