diff --git a/docs/content/4.sdk/2.getting-started/1.index.md b/docs/content/4.sdk/2.getting-started/1.index.md index 23d6a1fc3c..07c718ee73 100644 --- a/docs/content/4.sdk/2.getting-started/1.index.md +++ b/docs/content/4.sdk/2.getting-started/1.index.md @@ -72,7 +72,15 @@ Let's break down the code above: - The `middlewareUrl` is the URL of the middleware instance. -- The `getRequestHeaders` function is used to retrieve the Cookie header with cookie values. +- The `getRequestHeaders` function is used to provide the incoming headers within your requests. You can use `getRequestHeaders` to access and proxy the initial cookie headers to SDK requests during SSR. Initial headers could be provided by the [`getSdk`](#getsdk) method. + Check out examples there: + - Next Pages Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/pages-router) + - Next App Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/app-router) + - Nuxt app [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/nuxt/__tests__/app) + +::info +In the browser, `getRequestHeaders` will return an empty object. +:: - The `createSdk` function returns - the `getSdk` function, which is used to create the new SDK instance, @@ -100,6 +108,30 @@ import { getSdk } from "../sdk.config"; const sdk = getSdk(); ``` +You can proxy server side headers to the SDK requests using `getSdk` method. + +```ts +import { type GetServerSideProps } from "next"; +import { getSdk } from "../sdk.config"; + +export const getServerSideProps: GetServerSideProps = async ({ req }) => { + const sdk = getSdk({ + getRequestHeaders: () => req.headers, + }); + + return { + props: { + result: await sdk.example.getSuccess(), + }, + }; +}; +``` + +Check out more examples there: + - Next Pages Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/pages-router) + - Next App Router [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/next/__tests__/apps/app-router) + - Nuxt app [link](https://github.com/vuestorefront/vue-storefront/tree/main/packages/storefront/packages/nuxt/__tests__/app) + ### createSdkContext For client-side rendering, you can use `createSdkContext`. In order to use it, you'll need to create a new file in your application, for example `hooks/sdk.ts`: