I am brand new in the NextJS world - and react frameworks too for that matter. Coming from backend / server-rendered HTML web development.
I am confused as to the relationships between a PWA, and NextJS server components vs. client components. My naive first thought would be that a PWA should essentially be client-side only (i.e. the JS bundle gets installed and the app runs fast from there on out), and therefore should only leverage client-rendered components.
But I'm seeing in a few places (seems hard to Google this topic with most of the web content being circa 2021/2022 with old NextJS) that server components are good for PWAs.
Can someone clear this up for me?
Server Components are rendered at request time and cached if possible, the only thing that is returned from a server component is static html and maybe one-or-many server or client components. Inside your PWA both component types would have the following roles:
Server Components
Provide the layout and static markup for your application, something like a header or navigation that does not need interactivity from the user. Also are suited for data fetching needs from a database, API or similar. These requests can also be cached.
Client Components
Are used to collect user input, listen to events and use hooks. By default everything is rendered on the server and you can opt-in to client components with
"use client"the the top of your file.By using server components where possible you can reduce the size of your client bundle to a minimum what will make your PWA even faster than it was before. On a very basic level you can think of server components as of a handlebars template on steroids.