Sitecore Next.js App Router: Part 1, “use client”
There were many talks about Next.js App Router and Sitecore at the Sitecore Symposium. And that became one more reason to look at Sitecore App Router again. I took a first look at it more than half a year ago. I and my colleagues Bogdan Druziuk and Yurii Bondar tried to make it work. We had a half-working prototype. The biggest concern for us was about client and server components. We concluded that it will be quite easy to make Sitecore Next.js App Router work if marks all JSS components as use client. But we didn’t see too many benefits in it. It will be much harder to make it work together with server components. That is why, we stopped our experiments without any final prototype.
Corey Smith pointed me that Sitecore made their own prototype. The prototype was done by Illia Kovalenko, Lead Developer at Sitecore. That is the thing that I like about Sitecore JSS. It is truly open-source. You can see things on which they are working. In our case, it is the Next.js App Router. Even if there was no official announcement, we know that Sitecore tried it and made PoC.
Pages and App Router difference
Before moving forward, let’s figure out the difference between Pages and App Router.
App Router is a quite new approach. It was introduced in the middle of 2023. And now it is the default choice when you create a new Next.js application. Here is the list of differences:
- Pages Router is much simpler than App Router
- Pages Router has much better support on different hosting platforms compared to App Router
- App Router has support for server components
- App Router has support for streaming
- App Router has a flexible, but more complex architecture of routing compared to Pages Router
Both approaches have about the same performance. Some developers say that App Router has better performance, and some say that Pages Router has better performance.
Client and Server component difference
“Client” naming and use client keywords confuses many people. And probably that is not the best name. Both client and server components are rendered on the server in the case of Next.js. The difference is that client components are hydrated once they appear in the browser. HTML for both components will be prepared on the server side. (SSR/ISR/SSG doesn’t matter).
It makes server components faster in theory. The browser should render them faster. But it will add limitations to server components. We will not be able to use interactive user interfaces (UI) that require client-side JavaScript capabilities. The interactive user interface includes state management, event handling, and access to browser APIs.
For our case, it is important that we will not be able to use context and class components in server components.
Sitecore and Server Components
The two key parts of Sitecore JSS are SitecoreContext and Placeholder. Both, heavily relies on React features that are available only in client components. They are class components and context. It makes conversion of them into server components a complex task. In other words, you will need to add a separate implementation of JSS for React/Next.js to support server components.
Next.js App Router has a different file structure. Also, it has a different approach to retrieving data. But even after finishing these steps, the Sitecore JSS website will just not work. It will throw many error messages, that you can’t use some features inside server components. But, there is a quick fix for it. You can make your server components to be client components. It is quite easy, all that you need is to add use client directive at the top of your files. That was actually done in Sitecore proof of concept for App Router. That is it. Now, you can use Next.js App Router and Sitecore.
Conclusion
I was able to run Sitecore proof of concept for App Router locally. I was able to deploy it to Vercel. It works. So, technically, nothing stops you from using App Router right now. You may not wait for the official release from Sitecore and do everything by yourself. It will require additional work on your side, you will have limitations. But it will work. Another question, do you need it? Will you be able to utilize App Router features?
Client component
You will get no server components. And no benefits of server components. use client directive will force all components to be client. And all your components will be client components. The same that you already have with Next.js Pages Router.
Streaming
You will get no streaming. Streaming helps you to display your page before loading all of the elements. It requires the component to be a server component. All our Sitecore components will be under SitecoreContext and Placeholder marked as use client. And Streaming will not work. There is a workaround, pass the server component to the client component as children. But that will not work for Sitecore architecture. The layout is controlled by Sitecore and is constructed dynamically. It means that we will not be able to use streaming with current implementation
Routing
You will get no Next.js App Router routing. Indeed, you can use a new approach for routing in App Router, but you will need to get rid of routing based on Sitecore items.
Most probably, you don’t need Next.js App Router together with Sitecore in the current state. It will come without server components, streaming, and a new routing approach. You will not be able to utilize the most desirable App Router features. But, each project is different. And probably you for your case your need Next.js App Router. And now you know that you can use it!
But what can you do if you want server components and streaming? Stay tuned, the answer will be in my next blog post.