PPR + SWR

[anaclumos]

I am building a data-intensive app at my company. There are multiple pages, including

• /experiment - lists all experiments, data updated couple times an hour
• /experiment/[id] - metadata on the experiment, data updated couple times an minute
• /experiment/[id]/log - logs on the experiment, data updated couple times a second
• etc

Previously, we were not updating the website and provided a refresh button, with logs getting streamed with Firebase on client-side.

We now have a great opportunity to rebuild this app, and we want to make it as futureproof as possible. Thus, we are investigating two ways to handle data more declaratively.

• SWR
• Next.js RSC

In the end, we think using Next.js RSC will have more benefits onwards, with PPR and more features to come. However, in order to revalidate and update the results, especially on the /experiment/[id] page, we are not sure of how to approach this, without much reinventing-the-wheel problem.. Normally using SWR will automatically solve this problem with minimal boilerplate.

Hopefully, I am expecting where the initial data gets loaded and rendered on the server-side, then served through Streaming SSR or PPR, then the client-side can hydrate and take over, thus providing SWR-like capabilities, such as optimistic updates and polling, revalidate-on-focus, etc.

I know I can use

• revalidatePath("/...") to do a full re-render
• revalidateTag directive to re-fetch a certain fetch on the server
• fetch('https://...', { next: { revalidate: 3600 } }) to periodically update data on the server

...but none of the features seem to work as I described: PPR benefits on load, SWR benefits thereafter.

I tried looking at

• Building Your Application: Caching | Next.js
• How to Revalidate Server Components in Next.js 13th?