feat: nextjs sdk #586
feat: nextjs sdk #586
Conversation
ajwootto
commented
Oct 24, 2023
•
ajwootto
commented
- Add Next JS SDK supporting App Router
- update example app to use it
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Current dependencies on/for this PR:
This stack of pull requests is managed by Graphite. |
ajwootto
force-pushed
the
next-app-router-example
branch
from
9aff0ea to
07f8a48
Compare
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| <DevCycleClientProvider |
There was a problem hiding this comment.
this is a server component which handles initializing and fetching config etc. on serverside, making variables available to server components
It also renders a clientside provider with a bootstrapped client that uses the server's config data, guaranteeing hydration consistency. That bootstrapped client is also used on the server for rendering the first pass of client components
| @@ -38,6 +45,7 @@ export class DVCPopulatedUser implements DevCycleUser { | |||
| options: DevCycleOptions, | |||
| staticData?: StaticData, | |||
| anonymousUserId?: string, | |||
| headerUserAgent?: string, | |||
There was a problem hiding this comment.
accept a user agent from outside so that the serverside can tell us what the user agent should be
sdk/js/src/Client.ts
Outdated
| * @param config | ||
| * @param user | ||
| */ | ||
| synchronizeBootstrapData(config: BucketedUserConfig, user: DevCycleUser) { |
There was a problem hiding this comment.
adding this because once the client has rendered the first time, subsequent refresh + rerenders of server content will not replace the existing bootstrapped config if the server has found a new one. This method is called each time the serialized context the server is passing to the client is changed, so that the client gets updated with the new config and user that the server was using during its last rendering pass
| @@ -167,7 +170,10 @@ export class DevCycleClient< | |||
| } | |||
| this.initializeTriggered = true | |||
|
|
|||
| const storedAnonymousId = await this.store.loadAnonUserId() | |||
| // don't wait to load anon id if we're being provided with a real one | |||
There was a problem hiding this comment.
this is to fix a problem where initializing a bootstrapped client couldn't be used for variable evaluation until the next tick, because the config wasn't set until after this call
