Next.js 14

#webdev #react #frontend #nextjs

I attended the Next.js Conference 2023 in person and I had a great time listening to the talks, talking to people way smarter than me, and getting free food and swag. The main theme of the conference seemed to be about getting people to transition from the Pages Router to the App Router. I already use and love the App Router so I did not learn much from those kinds of talks.

If you are still on the fence about App Router and React Server Components, then I recommended watching this talk by Sam Selikoff, who gives great talk that explains how these features execute React’s goal of composable UI.

The keynote about Next.js 14 by Guillermo Rauch was great. This major release is focused on improving current features and aiming for stability. You can read the official blog post here for more in-depth read. I am excited that Server Actions are now stable and am looking forward Partial Prerendering.

Server Actions

First off, if you don’t know what React Server Components are, I suggest reading up on it before continuing. I also wrote an article about it and NextJS features, including Server Actions, with lot of simple examples and pictures.

Server Actions allows you to invoke server functions from the client without needing to explicitly define an API endpoint and write a request to that endpoint. NextJS will handle all of that for you. You can also send data from the client to the server function.Simply mark a function with “use server” at the top and everything inside will only live and execute on the server.

There were people pushing back on Server Actions with the usual worry about separation of concerns, which is expected whenever React does anything. I agree with what React and NextJS is doing - concerns should be component based. I personally believe this improves DX through easier mental models and improved code maintainability. All the code required to render some piece of UI will all be in one file (especially if you use CSS utility libraries like Tailwind).

Other frameworks also have ways of defining server-only code, such as Solid and Qwik. And I’m excited to see how this new paradigm grows.

Partial Prerendering

I recently wrote a basic summary of server side rendering, and in it, I talk about the difference between build time - more accurately, ahead of time - and request time. There was one thing I did not mention for sake of conciseness which is that it’s all or nothing. If your page was static but had just one tiny part that needed to be dynamically rendered, you either had to:

Pre-render it all at request time

Or pre-render everything else ahead of time and make the client fetch the dynamic data and render it themselves.

What if there was a way to render all the static content, such as the navbar and footer, ahead of time? All the static content will be served immediately when the client makes a request. Then the dynamic content, such as product information, can be rendered and streamed in later. Partial prerendering is exactly that.

No waterfalls. No new API - this is all done through React Suspense.

This feature is not released yet but I’m very excited to try it out.

Conclusion

Next.js is an already amazing production-grade framework with great developer experience and it keeps outdoing itself with every release. They fully enable React to be used to its fullest extent in the easier manner possible. And I can’t wait to see what comes next.