Next.js RSC vs Static Exports Mode Best For PWA?

[bestickley]

Hi, I need to build a offline first PWA. I'd prefer to use Next.js 14 App Router with all it's (server) features, but I'm wondering if it that will make building an offline-first / PWA difficult. Should I resort to using Next.js static exports mode?

[DuCanhGH]

@bestickley

RSC vs Static Exports

They are not mutually exclusive, fyi.

Well, if you keep your pages dynamically generated, just don't precache them and you should be fine :) @serwist/next serves them with the NetworkFirst strategy out of the box. If you want to go down the offline-first route, it's recommended that you statically generate your application and keep dynamic content on the client (I'm not sure about PPR, please do your research on how it works, thanks!). To precache the pages, use the additionalPrecacheEntries option.

[bestickley]

@DuCanhGH, re:

But no, please don't precache dynamically generated pages. This causes them to be served from the precache until they are removed from your precache list.

But what if I use NetworkFirst strategy? Wouldn't that make it so even if I cache dynamic route, that upon subsequent load of that dynamic page it would attempt to get new one from network, and only fallback to cache if network fails? Or does additionalPrecacheEntries specifically not work like that?

Ideally, upon initial load of first page of app, I'd like to cache all routes so that if user then goes offline, they can visit all pages of app. I understand that those pages will only be as up to date as when the user was last offline.

[DuCanhGH]

@bestickley

Precached URLs are NOT handled by any of your runtime caching strategies. They have their own caching strategy, which is always tested first, meaning that it always matches those URLs.

Ideally, upon initial load of first page of app, I'd like to cache all routes so that if user then goes offline, they can visit all pages of app. I understand that those pages will only be as up to date as when the user was last offline.

I will repeat this again: please use window.serwist.messageSW({ type: "CACHE_URLS", urlsToCache: [] }). That will work the way you expect it to. It forces Serwist to cache the URLs without them being visited.

One big issue is that Serwist never knows what URLs your Next.js application will have. If you want to cache all routes, you have to feed it all of them.

[bestickley]

@DuCanhGH, got it. I guess I didn't understand "precached" has a special meaning. I will use that API. Thank you, again!

[DuCanhGH]

@bestickley on precaching and runtime caching:

• https://serwist.pages.dev/docs/serwist/guide/precaching

• https://serwist.pages.dev/docs/serwist/runtime-caching

[bestickley]

@DuCanhGH, perfect. Was looking for this. Thank you!

[paul-stinchcombe]

I build a PWA with NextJS 14 without issues.

…

On 11 May 2024, at 12:26 AM, Ben Stickley ***@***.***> wrote: Hi, I need to build a offline first PWA. I'd prefer to use Next.js 14 App Router with all it's (server) features, but I'm wondering if it that will make building an offline-first / PWA difficult. Should I resort to using Next.js static exports mode? — Reply to this email directly, view it on GitHub <#140>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AATMOLC4AZ52QG5WBTBDPGDZBTYJZAVCNFSM6AAAAABHQ44ZRGVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZWGY2DEMJXGQ>. You are receiving this because you are subscribed to this thread.

[bestickley]

@paul-stinchcombe, thanks for the response. Would you mind sharing your next.config.js? Do you precache all routes upon initial load so that the entire app is available offline? Or do you only cache as they're visited so that only if you've visited a route while online it's available offline?