In 2018, when I first jump into the world of Web development with React for my first production web apps. The terms like SEO, Vital Score, and Mobile Experience felt light-years away from my understanding. I initially focused on optimizing React to enhance its score, but the more optimizations I applied, the messier my application became. All the client-side rendering framework met this issue, not only React.
That's when a friend recommended NextJS. It introduced a revolutionary approach that utilized server and client resources to solving my problem about performance and SEO through a process known as Hydration. At first, I was puzzled by many addon functions, the distinction between getStaticProps and getServerProps, how to managing browser variables like windoworlocalStorage in a Node environment, and the necessity of using more useEffect for only rendering on Browser.
Everything fell into place when NextJS released version 13.4, introducing the App Router and Server Component architecture.
New Features of NextJS 13.4
In their latest release documents, NextJS 13.4 boasts exciting features:
This latest version of NextJS has been significantly enhanced by the introduction of React Server Components, an architecture that components fully rendered on server environments via use-server and in browsers using the use-client directive. This clear separation between components in diverse environments obviously change the way we build React Component, hence bring more values to our frontend world.
Furthermore, data fetching has been brilliantly simplified through the introduction of the fetch method, eliminating the confusion from the dual use of getStaticProps/ getServerProps. Even though, NextJS continues to support static generation pages, the introduction of generateStaticParams ensures compatibility with the established behavior.
Additionally, the introduction of Server Actions bring a new way for frontend-backend communication. With Server Actions, worries about API endpoints for database communication and concerns about API security are things of the past. Now, everything operates under the control of NextJS, guaranteeing top-notch security. It's like having a trusty guardian overseeing your digital domain! 🛡️🚀
Reality of Library Support
Despite its many advantages, NextJS 13.4 comes with its fair share of concerns:
Separation between Server and Client Components: To gain the controlling over rendering, components need to be broken down into smaller units. While this might seem different with the traditional Atomic design principle, it's a necessary to optimize component behavior in the new paradigm.
Limited React Library Support for Server Components: Existing React libraries' support for Server Components is currently limited. Most libraries rely heavily on Providers and Hooks, making the transition to Server Components challenging. Unless there’s significant demand from users for their integration into the new architecture. My experience with Next-Intl and Apollo GraphQL was nightmare with NextJS 13.4
Experimental Nature of Server Actions: Server Actions, though promising, are still in the experimental phase and currently only support form validation. The potential for updates from Vercel holds the promise of expanding their functionality.
Conclusion
In new version NextJS 13.4, despite its exciting new features, there are substantial concerns that warrant careful consideration before diving into production-grade web applications.
However, fear not! There's a silver lining. For personal projects and hobby endeavors, experimenting with the new NextJS version offers an excellent opportunity to learn and master its features. It's like trying out a new recipe in your own kitchen - you can experiment and tweak without the pressure of serving a perfect dish.
Yet, when it comes to the serious business of production environments, a bit of caution goes a long way. It appears safer to stick with the tried-and-tested Page Router (the older version) for now. By doing so, we can sidestep potential pitfalls and challenges associated with the current version.
In essence, it's a bit like waiting for a cake to bake – patience yields the best results. Waiting until NextJS 13.4 achieves greater stability and widespread support seems to be the more prudent and rewarding course of action. Happy coding! 🚀🍰
// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
const posts = await fetch('https://.../posts').then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
}))
}
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
const { slug } = params
// ...
}
