1. Learn about Server side rendering (SSR)

Okay, so when I say Server Side rendering, I also mean quite a few things related to it. For instance, NodeJS and webpack.

You obviously wouldn’t bother rendering your react app server-side as a beginner when you’re still figuring out how react works and it’s fine. All I’m saying is, you should at least have an idea about what it is and why it is important, so that when you go for your next internship and their server side rendering their app, you are not clueless.

If you are reading about server-side rendering, you’d also come across some server side code and terms like bundles, build process, etc. It’s important that you pay attention to these things because knowing about these will help you a lot in the long run. You should be able to configure webpack, babel.

Along the process, you’ll learn some basic server side code , if you don’t already and better your overall knowledge of how these libraries/frameworks work. I am not going to bore you with details about SSR here, you can find plenty of articles online. But I can list some advantages.

2. SEO

Easy to index the page in search engines. If you’re fetching data asynchronously after displaying a loader/spinner on initial render search engines may not find what you would want them to.

3. Better performance

There’s no need to download a JavaScript file before the page is loaded. The client’s browser immediately displays a completely rendered HTML file. This avoids the loading time required for client-side rendering. Although, initial load time may increase for very rich and heavy webpages. You could easily find some comparisons online and decide for yourself.

4. Don’t optimize prematurely

I’m sure you have heard about this a lot.

There are a lot of optimizations you can perform in an application but at the end of the day, getting the job done is important. When it comes to React, there are many better ways to organise code and stuff like that, but a lot of those are unnecessary in the beginning. You could learn those details through the journey as you find the need for them.

Take for example, React.PureComponent. You heard that it prevents unnecessary renders by comparing new and previous props, so you decided you use it everywhere. Don’t do this. You may not need it at all. Because the component you’re trying to optimise may not be worth the optimisation.

Sure, if you can figure out which component or which part of code needs optimisation, it’s great , in fact, it shows you know what you a