Next JS 14

I completed a comprehensive Next.js 14 learning course , and I must say it left a lasting impression on me. The course's hands-on approach to learning resonated with my belief that practical experience is the most effective way to learn. Not only did it keep me engaged throughout, but it also allowed me to revisit and reinforce my understanding repeatedly.

One aspect that stood out was the provision of a well-structured template, complete with dummy data and automated form filling. This feature greatly enhanced my learning experience, and I thoroughly enjoyed it. It made me wish I had access to this kind of interactive and immersive learning during my college days.

If I have this kind of classes in college, I'd be in a much better place today, seriously, higher education should do something like this.

Here are some key takeaways from the course:

Server Action

Next.js 13 introduced Server Action and Next.js 14 made it stable, a feature that aims to simplify server-side operations like CRUD without the need to write custom APIs. I know a lot of folks making fun of it by saying PHP is out again. Hey, chill the heck out bro, every language has its prime, don't make fun of others. That's not cool. I think this is a game-changer for productivity. The ability to consolidate these actions into a repository or even a single file is remarkable. However, it's worth noting that the code generated through Server Action can sometimes appear messy and challenging to read. It's reassuring to know that future tooling and formatting solutions are likely to address this issue.

Partial Prerendering

Partial Prerendering may sound like a complex concept, but it's essentially about harnessing the best elements of both Static Rendering and Dynamic Rendering, all while leveraging the power of React suspense. This approach offers a versatile and efficient way to render web pages.

The most important of all, there are no new APIs, it's all under the hood.

It is under experpermental-flag now, which is called Preview, looking to see what community can do with it.

I saw Guillermo Rauch, the CEO of Vercel, posted a thread on Twitter explaining the Partial Prerendering, it's strightfoward with benchmark analysis, I liked it, I am gonna write a post about it.

Streaming

Streaming is a data transfer technique that divides a web route into smaller "chunks" and progressively transmits them from the server to the client as they become available. The key advantage of streaming is its ability to prevent slow data requests from blocking the entire page. Users can interact with parts of the page without waiting for the complete data load, significantly improving the user experience. Unlike the traditional sequential approach, where data fetching and rendering are initiated one after another, streaming initiates data fetching and rendering in parallel, allowing the user to see and interact with the UI as it becomes available. This approach represents a fundamental shift in how we handle data and rendering in web development.

Cache

There are quite a few talks about Next.js on YouTube that I've watched. They claim that Next.js may not fully disclose the details of how they handle caching. Upon researching these videos, I found that they generally argue that Vercel, the hosting platform for Next.js, might be overly aggressive in optimizing caching, leading to undesirable hard refreshes on the client-side cache, which is considered suboptimal.

Curious to investigate further, I delved into the GitHub repository and discovered that this issue has been converted into a user story. This is an encouraging sign as it indicates that the development team is actively addressing and working on improving the situation.

One more thing

Vercel's DB integration with SQL is quite awesome, thinking about switching from other DB sources. Of course, as a trying-to-be good developer, I need to figure out the tradeoffs first.