Time to address the elephant in the room!

It has been almost a year since I started this website. The initial version was created using Create React App which was not bad at all, only it has some limitations due to the nature of React, things like lacking server-side rendering, poor SEO optimization, and more.

A year later, it is time for a complete re-write It is time to address the elephant in the room!, SSR

What Was Wrong?

Aside from search engines not being able to scrape and index the website, no link preview was appearing when sharing a link from the website on Facebook, Twitter, WhatsApp, Slack, or anywhere.

It is one of the limitations of having a React web app ¯\(ツ)/¯

Performance-wise, the website was not slow, but there was a room for improvements, with this version, I did my best to improve the Lighthouse audit score, not only in performance but also accessibility, best practices, and SEO.

After researching and comparing many options; I went with Next.js -the latest trend in React development- to build the next version of my website.

Why NextJS?

NextJS comes with many features that made it the best choice, including:

• Server-side rendering and SEO friendly.
• Very nice and easy to start with documentation -including examples for various scenarios- that helped to build my website in no time.
• Routing out of the box.
• Kinda “Zero Setup”. To be honest, I had to spend some time setting up the project, but it is still way better than any other React solutions I have tested.
• It is still React at the end of the day, I was able to use lots of code from the previous version.

New Features

Alongside, I added some features to the website to enhance the browsing experience:

Server-Side Rendering

Pages are now rendered in server and served as complete HTML pages, making the browsing faster and the entire experience more delightful for users.

SEO Friendly

Metadata for each page is fetched from the API and injected to head in server and served with the HTML, making it easier for search engines to scrape and index the website.

Improved Performace

The new website scores 100% in all Lighthouse tests

Search

Users can now search in blog, projects, and snippets pages and see results simultaneously to find what they are looking for quickly and efficiently.

Code Snippets

The Code Snippets page offers a collection of code snippets in Swift, Git, Python, and other languages for software developers. Users can search for a snippet by language or topic, copy it to the clipboard, or share it with friends with one click.

RESTful API

The Developer page offers a list of URLs developers can use to build something on top of the website’s data, or just explore the website contents in a less user-friendly way!

reCAPTCHA in Contact Page

Contact form in the about page now has a reCAPTCHA verification to keep bots away and help me focus on messages from real users.

What’s Next

With the elephant addressed now, I will focus my energy and effort into adding more content periodically and improving the quality of the current content.

I’m also working on a series of tutorials on how to build this same website and its API step-by-step, please let me know if you have any feedback or requests via Twitter, or drop me a message using the contact page 👋