haorui.li - README

The first version of my personal website can be dated back to the year 2019, when I first learned HTML, CSS, and JavaScript. And this is now my 3rd redesign of this workspace. This article serves as a tech note for my website.

A Short History

I started the 3rd redesign of my personal website in June 2023, and it took 2 months for me to complete the entire construction (I was so busy with my full-time and 2 part-time jobs during that time). If using only 1 sentence to summarize each major version of my personal website, it would be:

1. v1.0 (2019): Pure JS on VPC
2. v2.0 (2021): React-powered, with CDN
3. v3.0 (2023): Next.js and RSC, database and edge network acceleration

These versions witnessed the growth of my front-end skills, and helped with my social networking over time.

Project Structure

UI and UX Design

Design always starts first. Thanks to Ekin, who suggested a bunch of resources for me to refer to. And I finally chose cali.so as my main source of inspiration. Note that though cali has open-sourced its website, I did not get into any of his code – I regard his site only as a source of design, and cali is really a talented UI and UX designer, and programmer.

Next.js, APP Router, RSC

Background: React 18

One of the main progress of frontend, especially for React this year, would definitely be React server components (RSC). Shortly after that, Next.js introduced its app router (in addition to its original page router), to fully support utilizing RSC. According to React Conference 2021, the server components have the following advantages:

1. More friendly UX: the <Suspense /> component introduced in React 18 takes a fallback value, in which we display a temporary component while the children of <Suspense /> is loading. It can be a spinning circle, or some other promotes which improves user experience.
2. Streaming HTML: in the context of pure server-side rendering (what Next.js pagesrouter does), instead of providing HTML as a whole, we are able to divide them into several pieces and return separately. In my web app, let's take message board page for example, by utlizing server components, I am able to load both textarea input and message list concurrently, and the client (browser) can get whichever is ready first. What's more, by tearing down HTML into pieces, we can have more fluent page switch.
3. Selective hydration. React 18 is able to prioritize the components which the user is interacting with during hydration. This is a performance optimization to Time to Interactive (TTI), which also imporves user experience.

Next.js App Router – A Brand New Experience

Next.js has been working closely with React to provide a more friendly development and user experience. However, the story of our main character, Next.js app router, didn't become stable until May 2023. The following is a timeline for reference:

Time	Event
Jun 2021	React 18 first Alpha release
Dec 2021	React Conf 2021, announcing new features
Mar 2022	React 18 release
Oct 2022	Next.js 13 realease, app router in beta
May 2023	Next.js 13.4 release, app router in stable

I came to get familiar with React 18 in June 2022, but not until June 2023 did I start to take advantage of RSC and the app router.

While React 18 tells programmers what should we do, Next 13 shows us how to do. According to Next, "The app/ directory makes it easy to lay out complex interfaces that maintain state across navigations, avoid expensive re-renders, and enable advanced routing patterns." What Next.js does, is providing a programming convention and toolkit to help utilizing the new features React releases, which makes sure everyone is on the right lane.

In my project, I fully take advantage of Next 13, and you will be able to find out them from the following aspects:

1. While switching between pages, you will not see any refresh/reload of the browser, while the React state of the <Header /> component remains changing continuously.
2. For the message board page, input textarea and message list are served separately, while a spinner effect is shown when loading.
3. Content of homepage, blog, and projects are served as a static page (meaning there is no external API fetch from the client side) – although this can also be implemented with Next's previous page router.

Vercel Deployment and Edge Network

With dynamic content, the traditional content delivery network (CDN) does not always work. However, is there any way that we can accelerate content distribution? Well, here comes our hero – Vercel edge network. Vercel's Edge Network enables you to store content and run compute in regions close to your customers or your data, reducing latency and improving end-user performance. The Edge Network is both a CDN and a globally distributed platform for running compute at the edge (Vercel doc). This idea is somewhat similar to the edge functions of AWS, but as the developer of Next.js, Vercel's service is more ad hoc to its own product.

Unfortunately, due to political reasons, the edge network does not cover Mainland China, the closest node to Mainland China is Hong Kong.

Database and Data Management

Vercel released its beta version of PostgreSQL in May 2023. However, they have a strict limit on database writing, querying, and computing time. After reaching their limit, I have no choice but to either update to their Pro plan (which is 20$/user/mo), or migrate to external service providers (such as AWS). As AWS has a more stable and recoverable DB service at an affordable price, I migrated to Amazon RDS for PostgreSQL later on.

Conclusion

The libraries, services, external tools, and references used in my project is listed below.

Libraries:

1. Frontend framework: React 18, Next 13
2. UI and style tools: MUI, scss, tailwindcss
3. Database ORM: prisma
4. Other utils: markdown-to-jsx, moment

Services and external tools:

1. Deployment: Vercel
2. Database: Amazon RDS for PostgreSQL
3. Data management: JetBrains Datagrip

References:

1. cali.so for design reference only