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
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.
NextJS comes with many features that made it the best choice, including:
Alongside, I added some features to the website to enhance the browsing experience:
Pages are now rendered in server and served as complete HTML pages, making the browsing faster and the entire experience more delightful for users.
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.
The new website scores 100% in all Lighthouse tests
Users can now search in blog, projects, and snippets pages and see results simultaneously to find what they are looking for quickly and efficiently.
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.
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!
Contact form in the about page now has a reCAPTCHA verification to keep bots away and help me focus on messages from real users.
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 👋
Learn how to generate SSH keys, add them to your git website, and enforce the system to use SSH for all git operations.
Meet MaxItUp, the new awesome list for MacOS apps, packages and more!