Building a new personal site
In the ever-evolving world of web development, it feels like there's a new JavaScript framework released every week. Although I had some prior experience with JavaScript through building a Node.js web server, I had never ventured into creating a full-fledged website using JavaScript alone. So, I decided to seize the opportunity and build a new personal site using Next.js - a popular React framework that supports server-side rendering and static site generation.
Why NextJS?
I had heard of Next.js before but never really delved into its potential. Lately, my software engineering experience has been focused on framework development and simulation development. I was keen on familiarizing myself with React due to its widespread popularity, and one quote from the React team at NextConf sealed the deal for me in choosing Next.js:
Next.js is the backend for React
This statement underscored the tight integration between Next.js and React, a bond that's expected to strengthen even further with the ongoing development of React Server components. In my search for the ideal solution for a personal site, Next.js checks all the boxes for simplicity and efficiency:
- Server-side rendering - Next.js supports server-side rendering out of the box, which is a huge plus for SEO and performance. This is especially important for a personal site, as I want to make sure that my site is easily discoverable and loads quickly.
- Easy deployment - Next.js is built on top of Node.js, which means that it's easy to deploy on a variety of platforms. I chose to deploy my site on Vercel, which is a platform that specializes in deploying Next.js sites. Vercel makes it easy to deploy a Next.js site every time you push to GitHub, which is a huge plus for me as I host all of my personal projects on GitHub.
Next.js 13 and React Server Components
Next.js 13 brings a significant shift in the way components are rendered by making all components server components by default. This means that components are first rendered on the server, with the client receiving the rendered HTML and JavaScript. This change introduces a unique constraint on the architecture of each file, requiring developers to adapt their application structure and coding practices to optimize performance.
To ensure that the client receives only the necessary JavaScript to render the page, each file containing client-side rendering must be explicitly denoted with "use client" at the top of the file. This enforced separation of client and server code is similar to the separation of concerns in software engineering, and it's an excellent way to minimize the amount of JavaScript sent to the client, with the only downside being the need to structure the code in a specific way
(while some may not be a fan of this, I am a big fan of "opinionated" languages and frameworks). In conclusion, choosing Next.js for building my personal site has proven to be an excellent decision, as it aligns with my goals of simplicity, efficiency, and flexibility.