docs: svelte kit adapter with optimize ssr

Author: dinwwwh

apps/content/docs/adapters/svelte-kit.md

@@ -7,7 +7,7 @@ description: Use oRPC inside an Svelte Kit project
 
 [Svelte Kit](https://svelte.dev/docs/kit/introduction) is a framework for rapidly developing robust, performant web applications using Svelte. For additional context, refer to the [HTTP Adapter](/docs/adapters/http) guide.
 
-## Basic
+## Server
 
 ::: code-group
 
@@ -38,3 +38,61 @@ export const DELETE = handle
 ::: info
 The `handler` can be any supported oRPC handler, such as [RPCHandler](/docs/rpc-handler), [OpenAPIHandler](/docs/openapi/openapi-handler), or another custom handler.
 :::
+
+## Optimize SSR
+
+To reduce HTTP requests and improve latency during SSR, you can utilize [Svelte's special `fetch`](https://svelte.dev/docs/kit/web-standards#Fetch-APIs) during SSR. Below is a quick setup, see [Optimize SSR](/docs/best-practices/optimize-ssr) for more details.
+
+::: code-group
+
+```ts [src/lib/orpc.ts]
+import type { RouterClient } from '@orpc/server'
+import { RPCLink } from '@orpc/client/fetch'
+import { createORPCClient } from '@orpc/client'
+
+declare global {
+  var $client: RouterClient<typeof router> | undefined
+}
+
+const link = new RPCLink({
+  url: () => {
+    if (typeof window === 'undefined') {
+      throw new Error('This link is not allowed on the server side.')
+    }
+
+    return `${window.location.origin}/rpc`
+  },
+})
+
+export const client: RouterClient<typeof router> = globalThis.$client ?? createORPCClient(link)
+```
+
+```ts [src/lib/orpc.server.ts]
+import type { RouterClient } from '@orpc/server'
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { getRequestEvent } from '$app/server'
+
+if (typeof window !== 'undefined') {
+  throw new Error('This file should only be imported on the server')
+}
+
+const link = new RPCLink({
+  url: async () => {
+    return `${getRequestEvent().url.origin}/rpc`
+  },
+  async fetch(request, init) {
+    return getRequestEvent().fetch(request, init)
+  },
+})
+
+const serverClient: RouterClient<typeof router> = createORPCClient(link)
+globalThis.$client = serverClient
+```
+
+```ts [src/hooks.server.ts]
+import './lib/orpc.server'
+// ...
+```
+
+:::

playgrounds/svelte-kit/src/hooks.server.ts

@@ -0,0 +1 @@
+import './lib/orpc.server'

playgrounds/svelte-kit/src/lib/orpc.server.ts

@@ -0,0 +1,26 @@
+import type { RouterClient } from '@orpc/server'
+import type { router } from '../routers'
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { getRequestEvent } from '$app/server'
+
+if (typeof window !== 'undefined') {
+  throw new Error('This file should only be imported on the server')
+}
+
+/**
+ * This is part of the Optimize SSR setup.
+ *
+ * @see {@link https://orpc.unnoq.com/docs/adapters/svelte-kit#optimize-ssr}
+ */
+const link = new RPCLink({
+  url: async () => {
+    return `${getRequestEvent().url.origin}/rpc`
+  },
+  async fetch(request, init) {
+    return getRequestEvent().fetch(request, init)
+  },
+})
+
+const serverClient: RouterClient<typeof router> = createORPCClient(link)
+globalThis.$client = serverClient

playgrounds/svelte-kit/src/lib/orpc.ts

@@ -5,11 +5,17 @@ import { RPCLink } from '@orpc/client/fetch'
 import { BatchLinkPlugin } from '@orpc/client/plugins'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
 
-const rpcLink = new RPCLink({
+/**
+ * This is part of the Optimize SSR setup.
+ *
+ * @see {@link https://orpc.unnoq.com/docs/adapters/svelte-kit#optimize-ssr}
+ */
+declare global {
+  var $client: RouterClient<typeof router> | undefined
+}
+
+const link = new RPCLink({
   url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
-  headers: () => ({
-    Authorization: 'Bearer default-token',
-  }),
   plugins: [
     new BatchLinkPlugin({
       exclude: ({ path }) => path[0] === 'sse',
@@ -21,6 +27,6 @@ const rpcLink = new RPCLink({
   ],
 })
 
-export const client: RouterClient<typeof router> = createORPCClient(rpcLink)
+export const client: RouterClient<typeof router> = globalThis.$client ?? createORPCClient(link)
 
 export const orpc = createTanstackQueryUtils(client)