Next.js Tutorial #142
Next.js Tutorial #142
Conversation
|
|
||
| ### Install PowerSync Dependencies | ||
|
|
||
| Using PowerSync in a Next.js application will require the use of the [PowerSync Web SDK](https://www.npmjs.com/package/@powersync/web) and it's peer dependencies. |
There was a problem hiding this comment.
| Using PowerSync in a Next.js application will require the use of the [PowerSync Web SDK](https://www.npmjs.com/package/@powersync/web) and it's peer dependencies. | |
| Using PowerSync in a Next.js application will require the use of the [PowerSync Web SDK](https://www.npmjs.com/package/@powersync/web) and its peer dependencies. |
|
|
||
| We also instantiate our `BackendConnector` and pass an instance of that to `db.connect()`. This will connect to the PowerSync instance, validate the token supplied in the `fetchCredentials` function and then start syncing with the PowerSync service. | ||
|
|
||
| #### DynamicSystemProvider.tsx |
There was a problem hiding this comment.
This section is very much the crux of using Next+PS. It would be useful to address this solution in the context of how many Next apps will be structured. Say they have a home, about, a login, and dashboard page - with the dashboard being available after login and the only section that depends on PS. So in that scenario this snippet only opts out of SSR for the dashboard page (or a subsection), this is great because it means they should still be able to have full SSR for the other pages which affects things like SEO and initial page load performance.
I am not sure if whether it's more relevant to this tutorial or a more general entry for Next.
There was a problem hiding this comment.
Okay, maybe we should add a note in the intro which could read like this:
At present PowerSync will not work with SSR enabled with Next.js and in this guide we disable SSR across the entire app. However, it is possible to have other pages, which do not require authentication for example, to still be rendered server-side. This can be done by only using the
DynamicSystemProvider(covered further down in the guide) for specific pages. This means you can still have full SSR on other page which do not require PowerSync.
What do you think?
|
Beyond minor polish, LG2M - was easy to follow :) |
This PR introduces a new "from scratch" tutorial on how to create a Next.js app that integrates with PowerSync. This is WIP and needs more polish.